SVG-Edit · 官方在线版

浏览器里的 SVG 矢量图编辑器

它解决什么问题

SVG-Edit 是一个能在浏览器里直接编辑 SVG 源码的可视化编辑器，最大特点是「所见即所得」和「源码」可以同时看。当你需要精确控制 `` 的坐标、或者要清理 Figma 导出的一堆冗余属性时，它比 Illustrator 快得多，因为它不隐藏 XML。

三个典型使用场景

1. 拿到设计师导出的 SVG，手动清理多余的分组和变换属性
2. 改一个开源项目的 logo：换颜色、调描边宽度、删掉不需要的元素
3. 在 SVG 里画简单的示意图，需要精确输入坐标和路径

和 ToolHub 本地工具怎么配合

图片格式转换：SVG 需要给不支持矢量图的系统用时，站内转 PNG 可以指定尺寸并保留透明通道（本地工具，文件不上传）

图片转 PDF：把矢量图放进 PDF 交付物时，先转高分辨率 PNG 再嵌入，避免字体缺失（本地工具，文件不上传）

同类可替代方案

• Excalidraw —— 手绘风格白板画图，协作绘图神器
• tldraw —— 精致的无限画布白板，交互丝滑
• draw.io —— 最流行的流程图/架构图绘制工具

使用时要注意什么

界面停留在 2010 年代的审美与交互，复杂路径编辑不如 Inkscape；处理带大量滤镜和渐变的 SVG 时渲染会失真。

常见问题

SVG-Edit 是免费的吗？

SVG-Edit 是开源项目，采用 MIT 许可证，官方在线版可以免费使用，不需要为基本功能付费。ToolHub 只做收录与说明，不代管你的数据，也不提供账号或存储服务。

SVG-Edit 适合什么场景？

最常见的是这几种：拿到设计师导出的 SVG，手动清理多余的分组和变换属性；改一个开源项目的 logo：换颜色、调描边宽度、删掉不需要的元素；在 SVG 里画简单的示意图，需要精确输入坐标和路径。判断标准很简单——如果你现在正为了这件事装一个几百 MB 的桌面软件，先用它试一次。

它和 ToolHub 的本地工具有什么区别？

ToolHub 的本地工具把代码放在你的浏览器里执行（WebAssembly 或原生 JS），文件不经过服务器；SVG-Edit 由项目作者维护，数据在其服务器或你的浏览器中处理，具体取决于项目实现，使用前建议先看对方的数据政策。需要「绝对不上传」时可以改用站内同类工具。

用 SVG-Edit 有什么限制？

界面停留在 2010 年代的审美与交互，复杂路径编辑不如 Inkscape；处理带大量滤镜和渐变的 SVG 时渲染会失真。

相关阅读

• 颜色格式转换 —— HEX / RGB / HSL 互转，附色块预览与 CSS 变量（在浏览器内执行，不联网也能用）
• 颜色对比度检查 —— 按 WCAG 标准检查文字与背景的对比度是否达标（在浏览器内执行，不联网也能用）
• 全部设计类工具 —— 按分类筛选，含本地执行与目录直达
• Excalidraw —— 同类别另一个选择

项目来源：github.com/SVG-Edit/svgedit · License: MIT · 分类：设计

官网地址：https://svgedit.netlify.app（新标签页打开 svgedit.netlify.app）

说明：本页是 ToolHub 对该开源项目的整理与推荐，工具由项目作者维护，版权与数据归原作者所有。官网无法访问时可能是临时故障或网络限制。

← 返回 ToolHub 全部工具