面向网页的高性能 2D 渲染库，基于 WebGL 和 WebGPU 绘制图形、精灵与文本。
4.8万5105TypeScriptMIT更新于 3天前
- Star
- 5,336
- Fork
- 423
- 未关闭 Issue
- 27
- 最近提交
- 4个月前
这是什么？
SVG Path Editor 是一个网页应用，用于创建和编辑 SVG 路径的 `d` 属性。你可以直接粘贴原始路径数据并在画布上实时看到图形变化，也可以先选择命令类型再点击目标位置，从零开始绘制路径。
节点支持拖拽移动，每条路径命令都可以插入、删除、转换类型，或在相对坐标与绝对坐标之间切换。编辑器还支持从选中命令开始重排路径、反转子路径等操作，并提供缩放、平移、旋转、取整、坐标转换、反转和优化等整条路径的批量处理。viewBox 可以通过滚轮缩放、拖拽或数值输入设置，也支持自动适配当前路径。
核心编辑逻辑已作为 svg-path-editor-lib 发布到 npm。项目需要 Node.js 18.13 及以上版本，并提供开发服务器、生产构建和基于 Karma 的单元测试。
核心功能
- 01既可以直接编辑原始路径文本，也可以在画布上拖拽节点编辑。
- 02支持插入、删除和转换单条路径命令。
- 03可在相对坐标与绝对坐标之间切换命令。
- 04支持对整条路径进行缩放、平移、旋转、取整和优化。
- 05可通过缩放、拖拽、数值输入或自动适配来调整 viewBox。
适用场景
- 手动微调从其他工具导出的图标或插画路径。
- 在浏览器中直接绘制简单的 SVG 图形。
- 通过取整和优化命令来精简路径数据。
快速上手
- 1
安装 Node.js v18.13 或更高版本，然后安装依赖
npm install - 2
启动开发服务器并打开 http://localhost:4200/
npm start
使用前须知
- 本地运行需要 Node.js v18.13 或更高版本。
- README 未提供独立桌面版本；托管版本在浏览器中运行。
标签
常见问题
- svg-path-editor 是什么？
- 在浏览器中可视化创建和编辑 SVG 路径的在线编辑器，支持拖拽调整节点。 SVG Path Editor 是一个网页应用，用于创建和编辑 SVG 路径的 `d` 属性。你可以直接粘贴原始路径数据并在画布上实时看到图形变化，也可以先选择命令类型再点击目标位置，从零开始绘制路径。
- svg-path-editor 可以免费使用吗？用的什么许可证？
- svg-path-editor 以 Apache-2.0 许可证开源。用于商业产品前，请先确认许可证条款。
- svg-path-editor 还在维护吗？
- 半年内有更新。svg-path-editor 最近一次提交是在 2026年6月18日。
- svg-path-editor 适合用来做什么？
- 手动微调从其他工具导出的图标或插画路径。 在浏览器中直接绘制简单的 SVG 图形。 通过取整和优化命令来精简路径数据。
- svg-path-editor 怎么安装和运行？
- 安装 Node.js v18.13 或更高版本，然后安装依赖: npm install 启动开发服务器并打开 http://localhost:4200/: npm start
- 在哪里获取 svg-path-editor？
- 源代码和安装说明在 GitHub 上：https://github.com/Yqnn/svg-path-editor
概要由 AI 根据项目 README 生成；GitHub 数据每日更新。
相关项目
一套经过优化、可自定义的技术 Logo SVG 图标库，提供 npm 包与 React 组件。
2669214TypeScriptMIT更新于 2个月前
面向 React 与 TypeScript 的手绘 naive 民间艺术风格 SVG 图标库，可作为 AI 编码助手技能使用。
2495TypeScriptMIT更新于 6天前
一个 TypeScript 库，可将 Mermaid 图表渲染为可主题化的 SVG 或 ASCII/Unicode 文本，无需 DOM 依赖。
1.1万411TypeScriptMIT更新于 6个月前
一个声明式信息图生成与渲染引擎，通过文本语法输出 SVG 信息图，适合 AI 生成与流式渲染。
7016583TypeScriptMIT更新于 前天
一个小型同步渲染器，把 Mermaid 图表文本渲染为 SVG，无运行时依赖。
255977TypeScriptOther更新于 17小时前