SVG 清理压缩

设计师导出的一套图标，每个文件二三十 KB。放进网页后发现首屏加载明显变慢——因为 SVG 通常是内联在 HTML 里的，它的体积直接计入首屏。

打开「SVG 清理压缩」看到的初始界面。在浏览器本地完成、数据不离开浏览器，免费。

冗余从哪来

设计软件导出的 SVG 往往带着大量对渲染毫无作用的内容：

• 编辑器的私有属性（图层名、编组信息、锁定状态）
• 无用的元数据（创建时间、软件版本、版权注释）
• 精度过高的坐标——d="M 12.000000001 8.999999998"，小数点后十几位，而屏幕上根本分辨不出
• 从未被引用的定义块（<defs> 里留着删掉的渐变、蒙版）

清理掉这些，体积常常能降到原来的三分之一甚至更低，渲染结果完全一致。

两个开关

移除注释（默认开启）——去掉 <!-- -->。

移除元数据（默认开启）——去掉 <metadata>、<title> 之外的描述信息。

什么时候关掉「移除元数据」：SVG 里的 <title> 和 <desc> 是无障碍信息，读屏软件会读它。如果这个 SVG 是有语义的图标（不只是装饰），保留它对可访问性有意义。

不确定的话：装饰性图标可以全清，承载信息的图形保留 title。

清理不会改变外观

这是它和「压缩图片」的根本区别：SVG 清理是无损的。去掉的都是不参与渲染的内容，图形本身一个像素都不变。

所以不用担心「压完变糊」——那是位图的问题，矢量图没有这个概念。

更省的做法：内联

网页上用 SVG 图标时，比清理更有效的是直接内联 <svg> 标签而不是用 <img> 引用：

• 少一次网络请求
• 可以用 CSS 控制颜色（fill: currentColor），一套图标适配深浅两个主题
• 配合清理，体积可以做到极小

浏览器本地处理

文件不上传。

相关工具

• SVG 转图片 —— 对方环境不支持 SVG 时
• 图片转 Base64 —— 内联的另一种方式
• ICO 图标生成 —— 做网站图标