SVG 压缩:它压的不是画质,是代码

SVG 和前面几个格式完全是两回事。它不是像素图,而是一段描述图形的代码,所以它的体积问题本质上是代码问题。压缩 SVG 不会让画面变模糊——矢量缩放永远清晰——但确实会改掉一些代码,这部分值得先讲清楚。

也可以把图片直接拖到这一块 · 图片不上传,处理在本机完成

SVG 的体积问题从哪来

一个从 Figma、Sketch 或 Illustrator 导出的 SVG,里面往往带着大量和画面无关的东西:图层名、编组结构、编辑器标记、设计稿的坐标偏移、被展开但没人看的样式声明。这些内容对渲染结果没有任何影响,却实实在在占着字节。

另一部分来自数值精度。设计工具导出路径时经常保留四五位小数,而屏幕上根本分辨不出这个量级的差别,把这些数字截短能省下相当可观的体积,尤其是路径节点很多的小图标。

常规优化不会。去掉的是不影响渲染的信息,截短的精度也控制在肉眼无法分辨的范围内。优化后的文件用浏览器打开应该和原文件一模一样,而且缩放任意倍数依然清晰,这是矢量格式的基本特性。

需要留心的是优化力度。如果一路把精度压到极限、并且开启了合并路径之类的激进选项,复杂的小尺寸图标可能出现肉眼可见的变形,精细的曲线会变得有棱角。这类问题只在两种情况下值得冒险:图标准备在极小尺寸下使用,或者体积有硬性上限。

对位图来说,设定尺寸意味着重采样像素;对 SVG 来说,改尺寸是在改 viewBox——也就是告诉渲染器这段图形的坐标系有多大,图形本身仍然是矢量描述。所以 SVG 放大到任意尺寸都不会糊,这一点和其他所有格式都不同。

也正因为如此,SVG 很少需要为了体积而缩小尺寸。如果一张 SVG 体积偏大,原因几乎总是路径节点太多或者带了大面积渐变和滤镜,而不是它的显示尺寸太大。

把输出格式设成 PNG 或 JPG,SVG 会被渲染成位图。这等于放弃了矢量的所有优势,只在几种情况下值得做。

SVG 出问题通常不是压缩造成的,而是它本身就依赖一些压缩后可能变化的东西。

矢量内容不会。常规优化删除的是编辑器元数据和冗余代码,图形本身仍是矢量描述,缩放任意倍数依然清晰。只有在把路径精度压到极限、甚至截断曲线控制点时,复杂图标才可能出现可见变形。

默认就是。不选择输出格式时,结果是优化过的 SVG 文件本体,扩展名和矢量特性都保持不变。只有主动把输出格式选成 PNG 或 JPG,才会被渲染成位图,那时才失去可缩放的特性和透明以外的矢量优势。

因为各家的设计工具为了可编辑性,会把图层结构、命名、坐标偏移、样式声明和精度极高的路径数据全都写进去。这些内容对浏览器渲染没有影响,却常常占了整个文件七成以上的体积,去除后通常能省三到七成。

通常是路径精度被截得太短导致的,调回更保守的精度档位一般就能恢复。此外把多个图形合并成单一路径、开启曲线简化这类激进选项也可能改变形状,精细小图标建议逐个放大确认,不要批量一路压到底。