为什么描摹出来的 SVG 反而比 PNG 还大

你把 PNG 描摹成 SVG，期待得到一个小巧、干净、可以无限放大的文件。结果拿到的东西大了好几倍，看上去还有点不对。这不是出了错，描摹本来就是这样；弄懂原因只要两分钟，却能省下大量挫败感。

描摹不是栅格化的逆运算#

先把这一点讲清楚：把 PNG 转成 SVG，并不会找回它原本的那个矢量文件。 那个文件如果曾经存在，现在也已经没了。栅格化丢掉了形状，只留下一张颜色网格，没有任何东西能把它们重建出来。

描摹器做的是另一件事：从像素出发，凭空造出新的形状。它把颜色相近的像素归成一个个区域，再沿着每个区域画一圈轮廓并填色。结果是对画面的近似。它是一幅新的图，只是长得像旧的那幅。

这个区别可以解释后面的一切。

文件为什么变大了#

PNG 和 SVG 花钱买的完全是两样东西。

PNG 为像素买单，而且很便宜。 它靠寻找规律来压缩：一串相同的像素几乎不花钱，一段平滑渐变稍贵一点。

SVG 为边界买单，而且很贵。 每个区域都要把自己的轮廓写成坐标。一块平涂形状是几个数字；一千个小区域就是一千条轮廓。

所以 SVG 的代价随图像中不同区域的数量增长，而不是随像素数增长。一个徽标大约有六个区域，一张照片有几万个。

同样的关系，在三个真实文件上实测：

徽标反而变小了：四条路径就把它完整描述清楚，而且现在可以放大到任意尺寸。插画大约翻了三倍。照片则膨胀到原来的十倍以上，而且看着更差。

照片为什么没救#

照片里没有平坦区域。它的每一处都是平滑过渡：肤色、天空、阴影、虚化。描摹器必须用平涂形状去逼近这一切，于是要么用少数几块大形状（看起来像海报），要么用成千上万块小形状（文件随之爆炸）。没有哪个设置能绕开这个取舍。

与此同时，JPEG 恰恰在这件事上极其擅长。它靠丢弃没人会注意的细节，把平滑的颜色变化存得很便宜。要求 SVG 与它竞争，等于让错误的格式去做它最不擅长的那一件事。

这个差距其实很容易提前看出来，因为照片和图画在"含有多少种不同颜色"上差得极远。在我们的三个测试文件上实测：黑色徽标有 244 种不同颜色，平涂插画 150 种，照片则是 59,629 种。相差三个数量级。我们的 PNG 转 SVG 和 JPG 转 SVG 工具会先数一遍，在你白等之前就提醒你。

颜色数量才是那个关键旋钮#

如果你只打算调一个设置，就调这个。在同一张平涂插画上：

两种颜色产出的文件，比十六种小了三十倍。另外请注意那一行不单调的数据：六种颜色产出的文件反而比八种更大，因为略差的调色板把一个区域拆成了好几个。量化过程并不整齐，这也是另一个理由：与其假定越高越好，不如多试几个设置然后用眼睛看。

从低往上调。只在预览确实变好时才继续加——对多数平涂图稿来说，这个点比你以为的来得早得多。

描摹在什么时候真正管用#

当来源确实由平涂形状构成时，它就管用：

• 徽标和文字商标，尤其是黑白两色的
• 线稿和扫描的图画
• 签名和印章
• 任何要驱动切割设备的东西：刻字机、激光雕刻机和刺绣软件需要的是路径而不是像素，所以这里描摹不是优化，而是唯一的入口
• 供手工细修的粗略起点，在 Illustrator 或 Inkscape 里继续加工

而它对照片、渐变、投影、柔焦和文字截图都不管用。这些全都依赖平滑过渡，而平涂区域要表达平滑过渡，只能靠色带，或者靠数量惊人的形状。

让糟糕来源变好的两件事#

如果你描摹的是扫描件或经过 JPEG 压缩的图，两个设置能完成大部分工作：

调高最小面积。 JPEG 压缩会在看似纯白纸面的地方留下淡淡的块状瑕疵，而描摹器会忠实地把每一个都勾出轮廓。丢弃小于 16 或 32 像素的区域，通常能大幅削减路径数，而且看不出损失。

描摹之前先提高对比度。 如果墨迹足够黑、纸面足够白，中间灰阶就更少，于是区域更少、路径更少、文件更小。在任何图像编辑器里花五秒钟，胜过事后在描摹器参数上反复折腾。

一句话版本#

• 描摹是从像素里造出新形状，它不会找回原始的矢量文件。
• SVG 的体积随颜色区域数量增长，而不是随像素数增长——这就是徽标缩小、照片爆炸的原因。
• 一张照片描摹成 SVG，通常大十倍且更难看。留着原图。
• 颜色数量是那个真正重要的设置。从 2 开始，逐步往上试。
• 对平涂图稿来说效果确实出色：我们的测试徽标从 7.7 KB 降到 1.9 KB、四条路径，而且现在可以放大到任意尺寸。