前端图形学【免费下载链接】svgeditPowerful SVG-Editor for your browser项目地址https://gitcode.com/gh_mirrors/sv/svgedit点击查看免费下载SVGEdit 是一款基于 Web、由 JavaScript 驱动的开源 SVG 绘图编辑器可在任何现代浏览器中运行其底层依赖强大的 SVG 画布库svgedit/svgcanvas。本文以项目根目录 README.md 为主线结合仓库源码与构建配置系统讲解本地托管、集成到自有 Web 应用、基于 svgcanvas 自建编辑器、扩展开发与贡献流程帮助你快速上手并二次开发这一浏览器端矢量绘图方案。项目概述与架构SVGEdit 由两大核心组件构成svgcanvas承担底层 SVG 编辑逻辑绘图、选择、变换、历史记录、图层、路径编辑等对应 npm 包svgedit/svgcanvas可独立用于构建你自己的编辑器editor负责编辑器 UI菜单、按钮、面板、对话框等即 src/editor 目录下的前端应用。这种拆分在 package.json 的 workspaces 配置中体现得十分直接workspaces: [ packages/svgcanvas, packages/react-test ]仓库当前版本为7.4.2要求 Node^20.19.0 || 22.12.0通过 Vite 构建产物输出到dist/editor。编辑器入口Editor类位于 src/editor/Editor.js它继承自EditorStartup构造时会创建LeftPanel、BottomPanel、TopPanel、LayersPanel、MainMenu等 UI 模块并将自身挂载为全局变量window.svgEditor方便脚本调试与扩展调用。在线体验无需本地安装可直接在浏览器中尝试构建版本V7master 分支开发版与 V7npm 最新发布版均可在线访问若需兼容旧浏览器或某些已废弃功能可访问 SVGEdit 6.1.0、5.1.0 等旧版本也可利用unpkg直接访问任意 npm 发布版本例如版本 3.2.0。本地托管从克隆到部署若希望在自己的环境中托管 SVGEditREADME 给出了完整步骤结合仓库脚本可进一步细化克隆或复制仓库内容执行npm i安装依赖含 npm workspaces 下的packages/svgcanvas与packages/react-test执行npm run build --workspace svgedit/svgcanvas先本地构建 svgcanvas 依赖本地测试运行npm run start启动开发服务器用受支持的浏览器访问http://localhost:8000/src/editor/index.html执行npm run build构建可部署到自有 Web 服务器的静态包。从 package.json 的 scripts 可以看到更多细节build: vite build packages/svgcanvas vite build packages/react-test vite build, postbuild: node scripts/copy-static.mjs node scripts/build-extensions.mjs, start: vite dev --host --port 8000 --strictPort, prestart: echo svgedit is available at http://localhost:8000/src/editor/index.html, lint: standard ., test: vitest run --coverage node scripts/run-e2e.mjs其中postbuild会通过 scripts/copy-static.mjs 复制静态资源并构建扩展start强制使用 8000 端口。构建配置见 vite.config.mjs以src/editor/Editor.js为库入口同时输出 ES ModuleEditor.js与 IIFEiife-Editor.js两种格式并处理src/editor/index.html、iife-index.html、xdomain-index.html三个页面入口。将 SVGEdit 集成进自有 Web 应用V7 显著改变了集成与定制方式只需在 HTML 中插入一个div容器再通过模块脚本导入Editor并将编辑器注入该容器即可。README 给出了完整示例head !-- You need to include the CSS for SVGEdit somewhere in your application -- link href./svgedit.css relstylesheet mediaall/link /head body !-- svgedit container can be positioned anywhere in the DOM but it must have a width and a height -- div idcontainer stylewidth:100%;height:100vh/div /body script typemodule /* You need to call the Editor and load it in the div */ import Editor from ./Editor.js /* for available options see the file docs/tutorials/ConfigOptions.md */ const svgEditor new Editor(document.getElementById(container)) /* set the configuration */ svgEditor.setConfig({ allowInitialUserOverride: true, extensions: [], noDefaultExtensions: false, userExtensions: [] }) /* initialize the Editor */ svgEditor.init() /script /html关键警告README 原文强调容器div可以位于 DOM 中的任意位置但必须具有数值型的宽和高不能是auto例如当div处于隐藏状态时会出现auto。这一点在 src/editor/index.html 的源码中同样有注释说明集成时务必为容器显式设置width与height。集成细节与配置入口仓库自带的 src/editor/index.html 即为上述模式的真实实现它引入./svgedit.css与./Editor.js在div#container中注入编辑器并通过setConfig设置扩展相关配置userExtensions支持以对象数组形式按路径加载扩展例如注释中展示的{ pathName: /packages/react-test/dist/react-test.js }。此外它还预留了跨域xdomain模式的配置分支svgEditor.setConfig({ canvasName: xdomain, allowedOrigins: [*] })Editor类src/editor/Editor.js的关键 API 包括new Editor(div)构造编辑器实例div为挂载容器svgEditor.setConfig(options)设置配置底层委托给ConfigObj.setConfigsrc/editor/ConfigObj.js必须在页面/DOM 加载前调用否则不生效svgEditor.init()完成初始化并启动svgEditor.ready(cb)/svgEditor.runCallbacks()在编辑器就绪后执行回调svgEditor.loadFromString(str)/loadFromURL(url)/loadFromDataURI(uri)以字符串、URL 或 Data URI 方式预载 SVGsvgEditor.addExtension(name, initfn, initArgs)以编程方式添加扩展。关于setConfig的完整可配置项如dimensions、canvas_expansion、initFill、stylesheets、noStorageOnLoad等的默认值与用途见 docs/tutorials/ConfigOptions.md。基于 svgcanvas 自建 SVG 编辑器如果不想使用整套 Editor UI可以只取底层画布在自己喜欢的框架中搭建编辑器。安装方式npm i -s svgedit/svgcanvas然后在应用中导入import svgCanvas from svgedit/svgcanvasSvgCanvas类位于 packages/svgcanvas/svgcanvas.js构造时接收容器元素与配置对象内部按模块拆分实现了大量核心能力对应 packages/svgcanvas/core 下的多个模块绘制与几何coords.js坐标换算、math.js矩阵运算、recalculate.js变换重算元素与属性elem-get-set.js、selected-elem.js、select.js、selection.js历史与撤销history.js、historyrecording.js、undo.js图层与路径layer.js、path.js、path-actions.js、path-method.js数据与安全dataStorage.js本地存储、sanitize.jsSVG 消毒、json.jsSVG/JSON 互转文本、触摸、粘贴text-actions.js、touch.js、paste-elem.js、clipboard.js等。该包的产物与类型声明见 packages/svgcanvas/package.jsonmain指向dist/svgcanvas.jstypes指向svgcanvas.d.ts其 API 文档由 docs/tutorials/CanvasAPI.md 提供。仓库中的demos目录与 svg-edit-react 仓库均提供了基于底层画布的自建示例。扩展开发React 扩展示例SVGEdit 支持通过扩展extension机制增强功能。仓库中的示例扩展使用 React 构建位于 packages/react-test其核心组件 packages/react-test/src/ReactTest.js 展示了扩展与编辑器交互的典型方式从组件 props 中取得svgEdit与svgCanvas通过document.addEventListener(svgedit, handler)订阅编辑器事件如mouseDown、mouseUp并在组件卸载时移除监听在事件回调中读取ev.detail如vars.mouse_x、vars.mouse_y结合svgCanvas.getZoom()换算画布坐标通过svgCanvas.setMode(hello_world)切换为自定义模式渲染一个se-button自定义元素作为工具栏按钮。激活该扩展的步骤在扩展目录执行npm run build生成扩展 bundlepackages/react-test的build脚本为vite build产物输出到dist修改index.html通过userExtensions激活扩展svgEditor.setConfig({ allowInitialUserOverride: true, extensions: [], noDefaultExtensions: false, userExtensions: [./react-extensions/react-test/dist/react-test.js] })仓库中 src/editor/extensions 目录还内置了大量官方扩展如 ext-connector、ext-eyedropper、ext-grid、ext-polystar、ext-shapes、ext-storage 等每个扩展均包含对应语言的 locale 目录与实现文件可作为自定义扩展的参考范式扩展开发规范详见 docs/tutorials/ExtensionDocs.md。配置选项速览编辑器行为可通过setConfig或 URL 参数定制核心用法与优先级规则详见 docs/tutorials/ConfigOptions.md编程方式设置svgEditor.setConfig({ dimensions: [320, 240], canvas_expansion: 5, initFill: { color: 0000FF } })URL 方式设置.../svg-editor.html?dimensions300,240canvas_expansion5initFill[color]0000FF优先级同时设置时setConfig的值优先生效自 v2.7 起出于安全考虑可通过第二参数{ overwrite: false }禁止覆盖或{ allowInitialUserOverride: true }允许后续被 URL 覆盖样式定制svgEditor.setConfig({ stylesheets: [default, myStylesheet.css] })保留default可同时加载默认样式预载文件loadFromString(svg xmlns....../svg)、loadFromDataURI(data:image/svgxml;base64,...)、loadFromURL(images/logo.svg)也可通过 URL 参数?source/?url预载。注意预载时如需阻止本地存储覆盖应设置noStorageOnLoad: true。浏览器支持与贡献流程开发与持续集成基于Chrome环境同时支持近期的 Chrome、Firefox 与 Safari 版本项目会尽力修复这些浏览器下的问题。如需支持旧浏览器可能需要使用更早版本的 npm 包若你的浏览器版本有特殊需求可通过 issue 与项目组沟通是否纳入最新版支持。若想参与贡献README 建议先在 GitHub 上 fork 仓库并按前述步骤本地安装提交 PR 前请务必本地执行npm run lint按 standardjs 规则检查代码风格npm run test运行 Vitest 单元测试与 locale 检查pretest会自动先跑 lint。从源码看测试体系覆盖单元测试tests/unit、e2e 测试tests/e2e由 scripts/run-e2e.mjs 驱动与视觉回归示例tests/visual代码覆盖率由 Vitest v8 provider 生成见 vite.config.mjs 的test.coverage配置。更多项目背景可查阅 AUTHORS作者列表与 docs 目录下的各类教程文档Editor.md、EditorAPI.md、Events.md 等。总结从本地上手到生产部署SVGEdit 提供了清晰的路径npm i后即可通过开发服务器体验完整编辑器将Editor注入带数值宽高的div即可嵌入自有 Web 应用引入svgedit/svgcanvas则可完全掌控底层绘图能力自建编辑器而扩展机制与setConfig配置体系则让功能增强与外观定制变得灵活可控。无论是直接使用、二次开发还是贡献代码本文所述的命令与源码路径均可作为后续查阅与调试的索引。赞分享前端图形学【免费下载链接】svgeditPowerful SVG-Editor for your browser项目地址https://gitcode.com/gh_mirrors/sv/svgedit点击查看免费下载相关推荐BentoPDF 快速上手指南在浏览器内完成隐私优先的 PDF 工具集部署BentoPDF 快速上手指南在浏览器内完成隐私优先的 PDF 工具集部署 BentoPDF 是一个免费、开源、隐私优先的 PDF 工具集所有处理都在浏览器前端LangFlow可视化AI开发实战零代码构建智能应用的完整指南LangFlow可视化AI开发实战零代码构建智能应用的完整指南 LangFlow是一款革命性的可视化AI应用开发平台让你无需编写复杂代码就能快速构建和部署智人工智能大模型AI AgentRAG后端前端MCP 服务工作流自动化Semi Design 快速上手指南从安装到 Next.js / Remix / 浏览器 UMD 的完整集成方案Semi Design 快速上手指南从安装到 Next.js / Remix / 浏览器 UMD 的完整集成方案 Semi Designdouyinfe/前端UI组件设计系统上一篇GitHub Audio 终极问题解决指南轻松解决10个常见疑难杂症下一篇Web安全测试效率提升10倍param-miner插件安装与配置详解创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
