SVG 太大太重：SVGOMG 在线压缩，去冗余还不动画面

设计软件导出的 SVG 里，往往只有一小部分是真正画图用的路径，其余是编辑器元数据、无用分组、精度过高的坐标。压缩工具能把体积砍掉一大半。

它解决什么问题

从 Illustrator、Figma 导出的 SVG，常见带着编辑器注释、空的 defs、重复的样式定义，体积是必要内容的数倍。

这些冗余虽然不影响显示，但会影响页面加载，尤其当一个页面里有几十个图标时。

核心能力

压缩 SVG 时哪些选项不要开

大部分选项都安全，但有几项要小心：「合并路径」在某些带不同填充色的图形上会改变效果；「移除 viewBox」会破坏响应式缩放能力；「清理 ID」在 SVG 内部有引用关系（比如用 url(#id) 引用渐变或剪切路径）时会导致引用失效。

稳妥做法是逐个打开选项、观察左侧预览是否变化。一旦发现画面有变，就把刚开的那项关掉。压缩目标是「体积降下来、画面一模一样」，任何视觉变化都不该接受。

谁适合用

• 要优化站点图标体积的前端
• 设计导出 SVG 后要交付给开发的设计师
• 做 H5、需要控制资源大小的人
• 手工编辑过 SVG、文件里留了大量冗余的人

怎么开始

1. 打开 SVGOMG 页面，把 SVG 文件拖进去或粘贴源码。
2. 左侧是优化后的预览，右侧是参数面板。
3. 留意右下角的体积对比，理解每项优化的收益。
4. 逐项打开参数并观察预览，出现视觉变化就立即关掉该项。
5. 复制优化后的代码，或下载文件替换原资源。

常见问题

压缩会损失画质吗？
矢量图没有「画质」概念，只有路径精度。适度降低小数精度视觉上无差别，过度降低会让曲线出现折角。

能批量处理吗？
网页版一次一个。批量可用命令行版 SVGO 配合脚本。

压缩完打不开怎么办？
多半是移除了必要的命名空间或 ID。把「清理 ID」「移除命名空间」这类选项关掉重试。

和手动改代码比好在哪？
它能系统地识别冗余，比人工逐个看可靠得多，且可复现。

授权与合规

SVGOMG 是 SVGO 的图形界面，以 MIT 许可开源，免费使用，压缩后的文件可自由用于商业项目。 官网：jakearchibald.github.io/svgomg。