SVG 优化教程：清理脚本、删除编辑器元数据和注释、精简小数位，渲染对比确认外观不变
一句话答案
把 SVG 代码粘贴到优化工具，保持“清理脚本等危险内容”和“去掉元数据和编辑器信息”勾选，小数位选 2 或 3，点“优化”。示例从 428 个字符减到 214 个，约省 50%，渲染对比一致。小数位设得太少可能让图形变形。
广告Advertisement
SVG 里有哪些冗余
Illustrator、Inkscape、Figma 等软件导出的 SVG 常带有：
- 编辑器专用的命名空间和属性（如 inkscape:label）；
- metadata 元数据、注释；
- 空的 g 分组；
- 小数点后 5–6 位的坐标，例如 85.123456；
- 默认值属性，例如 opacity="1"。
这些内容不影响显示，却增加文件体积。
用工具优化
- 粘贴代码：打开 SVG 优化，把 SVG 代码粘贴到输入框（工具自带一段示例）。
- 选清理项：保持勾选“清理脚本等危险内容”和“去掉元数据和编辑器信息”。
- 选小数位：“小数位”一般选 2 或 3；图标很小、精度要求低时可以选 1。
- 优化并下载：点“优化”，查看节省比例和渲染对比结果，再点“复制”或“下载 SVG”。
✂️ SVG 优化
免费在线使用，文件和数据只在你的浏览器本地处理，无需注册。
广告Advertisement
为什么要清理脚本
SVG 本质是 XML 代码，可以包含 script 标签和 onclick 等事件属性。来源不明的 SVG 直接嵌入网页可能带来安全风险，上传到网站前建议先清理。
小数位怎么选
| 小数位 | 适用 |
|---|---|
| 1 | 很小的图标，可能轻微变形 |
| 2–3 | 大多数图标和插画，推荐 |
| 4–6 | 大尺寸、精细的图形 |
| 不改 | 对精度有严格要求 |
工具会做渲染对比，如果提示外观有差异，就把小数位调大一些。
相关
- 位图转 SVG 矢量图：图片转 SVG；
- 制作网站图标：favicon 制作；
- 位图压缩：PNG 压缩。
常见问题
优化会改变图形吗？
正常情况下不会，工具会对优化前后渲染对比；小数位过少时可能出现细微变形。
文件会上传吗？
不会，优化在浏览器本地完成。
优化后还能在设计软件里编辑吗？
可以打开编辑，但图层名称等编辑器信息被删除了，建议保留一份原始文件。