如何在线编辑 SVG 文件（无需安装软件）

SVG 本质上是一段标记代码，所以要修改它并不一定要装 Illustrator、Inkscape 或 Figma。现代浏览器都能解析和渲染 SVG，用一个浏览器端的编辑器就可以完成打开、修改、导出三步，文件也不会离开你的电脑。

为什么在浏览器里改 SVG？

SVG 体积小、可无损缩放，嵌入 HTML 和 CSS 都很干净。但大多数图标库和导出产物在上线前都得做几件小事：

• 去掉 Figma 和 Illustrator 留下的元数据与冗余信息
• 调整描边和填充颜色以匹配品牌
• 调整画布尺寸而不破坏画面
• 在某些仍不支持 SVG 的场景下，把 SVG 导出为 PNG

这些都是细碎的本地编辑，完全没必要动用桌面编辑器。

第 1 步 — 打开文件

把 SVG 拖到编辑器里、粘贴进来，或者点 打开文件。编辑器会在本地解析源文件，你的文件不会上传到任何服务器。

第 2 步 — 编辑

点击图形即可选中，在属性面板里修改填充、描边、宽高或位置。编辑历史通过命令总线统一管理，随时可以撤销重做。

第 3 步 — 导出前先优化

完成后，把文件丢进 SVG 优化器。它会移除注释、元数据和冗余的路径数据，同时保持渲染效果不变。普通导出通常能瘦身 20–60%。

第 4 步 — 导出

把结果保存为 SVG、PNG 或 JPG。如果你在做 React 或 Vue 项目，SVG 转 JSX 和 SVG 转 Vue 工具能直接把文件变成一个组件，连 className 和 style 都已经接好。

打开、编辑、优化、导出——就这四步，不用注册、不用上传、也不需要额外安装任何软件。