SVG 优化与 SVG 压缩实战:去冗余、精简路径、不损画质

很多人第一次打开自己导出的 SVG 源码会愣一下:一个三角形的图标,代码居然有几十行。问题不在图形本身,而在导出工具往里塞了一堆渲染器根本用不到的东西。SVG 优化压缩做的事很朴素,就是把这些没用的字节挑出来删掉,让文件回到它本该有的大小,而画面一个像素都不变。

SVG 里到底是哪些字节在占地方

打开一个 Figma 或 Illustrator 导出的 SVG,体积通常被四类东西撑大。第一类是编辑器元数据,Inkscape 会写 inkscape:label、sodipodi:nodetypes,还有整块 <rdf:RDF> 命名空间声明,这些只服务于编辑器自己的撤销和图层状态,浏览器看都不看一眼。第二类是过长的小数,Figma 喜欢写 d="M 100.4923 50.6128" 这种 6 位精度的坐标,可屏幕根本渲染不出小数点后第四位的差别。第三类是冗余属性,inline style="fill:#FFFFFF;fill-opacity:1" 比直接写 fill="#fff" 长出一大截。第四类是没人引用的 id 和只套了一个形状的空 group。把这四类清掉,体积自然就瘦下来了。

一个真实例子:从 14 KB 到 2.6 KB

我自己最近清理一个开源项目 README 里的图标,Inkscape 导出的源文件 14 KB,打开一看里面塞满了 sodipodi 图层信息、一个 <rdf:RDF> 元数据块、7 个没人引用的 id="path",还有一个只包着一个三角形的图层 group。把它丢进 SVG 优化压缩器,默认设置一按,结果是 14 KB 压到 2.6 KB,省了 81%。GitHub 上那个三角形渲染出来一模一样,但 PR 里的 diff 从一坨 200 行属性变成了几行能读的代码,这个体验差别比体积本身还让我在意。

不损画质的关键:每条优化都可控

担心压完画面变样,是大多数人不敢动 SVG 的原因。靠谱的做法是把优化拆成一条条独立流程,每条单独开关,而且全程有左右并排的渲染预览盯着。比如"小数精度"这条,默认收到小数点后三位 M 12.346 24.193,这在 5K 屏上肉眼也分不出区别;图标可以收到 2 位,插画收到 1 位都没问题。但如果你把一条曲线很多的有机图形精度调成 0,它可能开始出现锯齿感,这时候预览图会立刻告诉你,把这一条勾掉重来就行。同理,"去未引用 id"对普通图标很安全,但如果你的文件是一份用 <use href="#icon-foo"> 引用的 symbol sprite,就要把这条关掉,否则被引用的 id 会被静默删掉。

不同来源能压多少

压缩比和来源关系很大。根据这个工具结果面板的实测,Figma 导出通常能压 30 到 45%,主要省在那串超长小数和 inline style 上;Illustrator 和 Inkscape 的导出能压 50 到 70%,因为它们额外塞了 metadata、RDF、图层信息和编辑器命名空间属性。纯代码画的图标更夸张,默认设置下经常能压 70% 以上,光是 #ffffff 缩写成 #fff 加上小数四舍五入,一个手写的 24×24 双 path 图标就能再瘦 15%。换句话说,越是从设计软件直接导出的文件,优化空间越大。

和命令行 SVGO 是什么关系

聊 SVG 优化绕不开 SVGO,它是命令行里最成熟的方案,跑大约 30 个插件,做深度启发式调优,确实更彻底。区别在于取舍:SVGO 里有些 DOM 合并和 path 数据重写的插件偶尔会微调视觉输出,得人工盯着结果。浏览器内的这个优化器选择只留 10 条收益最高、又能证明安全的流程,代价是放弃最后那 5 到 10% 的极限压缩,换来的是不用装 Node、不用 npm i、也不担心供应链投毒,粘进去就能用。日常清理图标这点压缩比绰绰有余;真要榨干一个上百图标的大图标库,再上命令行 SVGO 补刀。

压完之后还能顺手做的事

优化完的 SVG 有几条常见去处。要内联进 CSS 的话,直接复制成 data:image/svg+xml;base64,… dataURL,塞进 background-image: url(…) 就少了一次网络请求;需要更通用的 base64 处理可以用 base64 编码工具。如果发现某个 SVG 大得离谱,十有八九是不小心把位图当 SVG 导出了,每个像素被画成一个 <rect>,这种情况下 SVG 优化救不了,应该用图片格式转换把它转成 PNG 或 WebP,体积会小好几个数量级。

SVG 优化不是什么高深的活,本质就是把工具替你塞进去的废料清出来。花十秒钟把一个图标从 1.8 KB 压到 410 B,提交进仓库,页面体积往下走,画面没变化,这笔账永远划算。

Made by Toolora · Updated 2026-06-13