如何减小 SVG 文件体积：拿一张真实图标做测试

上面这张图来自 VectorArtGen 现有的示例素材。六个黑色图标，配几行文字，白底，没有内嵌照片。文件里有 159 条路径，大小是 52,433 字节。

为了弄清楚 SVG 到底能压缩多少，我们拿它做了两次优化。一次只精简标记，省下 2,245 字节，测试中的像素完全一致；另一次用了优化器的默认设置，省下 24,474 字节，但像素有了变化。

如果你刚用 JPG 转 SVG 工具转换完 Logo，也可以先这样检查：文件占空间的部分，究竟是多余的标记，还是描摹出来的图形？两者能压缩的幅度不一样。

同一张图，两种结果

这次测试在 2026 年 9 月 14 日进行，使用 SVGO 4.0.0。两次优化都从原文件开始，没有叠加处理。

• 原文件： 52,433 字节，159 条路径。
• 只精简标记： 50,188 字节，159 条路径，缩小 4.28%。
• 默认优化： 27,959 字节，95 条路径，缩小 46.68%。

这里统计的是文件本身的字节数，没有计算 gzip 或 Brotli 压缩后的网络传输体积。

第一种方式只启用了 cleanupAttrs 和 convertColors，并使用紧凑格式输出。检查前后文件，每条路径的 d 属性都没变。它省下的空间来自更短的颜色值等写法，没有减少图形。

用到的完整配置很短：

export default {
  plugins: ['cleanupAttrs', 'convertColors'],
  js2svg: { pretty: false },
};

第二种方式使用 preset-default，处理范围更大，包含路径优化、编组调整和元数据移除等操作。具体插件可以查 SVGO 默认配置文档。因此，默认优化会做的不只是删空格。

你可以下载原始 SVG、只精简标记的版本和默认优化版本，自己打开比较。

肉眼看着一样，逐像素检查却有差别

下面两张预览都渲染成 512 像素宽。并排检查时，六个图标和文字都还在，没有看到明显缺失的形状。

原文件：

默认优化后：

再用程序比较，就能看到肉眼不容易发现的变化。我们通过 Sharp 0.34.5 及其 librsvg 渲染器生成图片，逐个比较 RGBA 像素，不设置容差。

只精简标记的版本，在 128、512 和 1,600 像素宽的三次测试中，都与原图完全一致。

默认优化的版本，在这三个宽度下分别出现了 32、207 和 891 个不同像素。以 512 像素宽为例，图片高 293 像素，共 150,016 个像素，其中约 0.14% 有变化。只要一个像素的任意颜色通道或透明度值变了，就计入差异；这个比例不等于肉眼感知的画质损失。

本次只测了一张静态 SVG，使用同一套渲染环境，不能据此保证它在所有浏览器、印刷软件或任意尺寸下都完全相同。完整测试记录保留了渲染器版本和各尺寸的数据。

对于这张用在网页里的图标，默认优化版本值得放进实际页面再检查。如果要求像素严格一致，本次测试更支持只精简标记的版本。两种结果都叫“无损压缩”，就会把这个差别藏掉。

为什么你的文件可能压不下来

第一轮优化后，这张图仍有 50 KB 左右。原因很直接：占据大量空间的路径字符串，一条都没动。光靠精简属性，能省的空间有限。

如果你手里是描摹出来的 Logo，放大看看边缘：一个本来应该是纯色的轮廓，旁边是不是多了细条和碎点？这些可能来自 JPG 的压缩噪点。可以换一张更干净的原图，或者在图片矢量化工具里减少颜色，再比较字母孔洞和窄缝是否完整。重新描摹，有时比继续压缩那堆碎路径更有效。

这次默认优化把路径从 159 条降到了 95 条，也不能直接理解成“删掉了 64 个细节”。优化器可能把多条路径合并。判断有没有丢内容，还是要看实际渲染结果。

还有一种文件，精简路径几乎帮不上忙：源码里出现 <image href="data:image/...">，说明 SVG 内嵌了位图。想减小这部分体积，需要处理里面那张图片的尺寸或压缩质量。把照片重新描摹成路径，反而可能越转越大。遇到这种情况，先看看什么时候该用 SVG，什么时候保留 JPG。

在自己的文件上试一次

先保留原稿。如果电脑装了 Node.js 和 npm，把上面的原文件和配置文件下载到同一个目录，执行下面两条命令，就能复现这两份 SVG 导出结果：

npx --yes svgo@4.0.0 --config markup.config.mjs -i original.svg -o markup.svg
npx --yes svgo@4.0.0 -i original.svg -o default.svg

SVGO 提供命令行工具，其他使用方式见官方文档。这里用的是独立优化器；VectorArtGen 的转换器负责生成起始 SVG，页面上没有这些 SVGO 配置选项。

拿到文件后，放到真正要用的地方看。如果是页头 Logo，就看手机上的页头尺寸；如果网页通过 ID 控制换色或动画，就实际操作一次。保留 viewBox，确认渐变和遮罩还在正常显示。素材要求保留的署名信息，也不能随着元数据清理一起丢掉。

这次测得的 4.28% 缩减，有三个尺寸下像素一致的结果支撑。46.68% 的版本更小，也确实存在细微变化。两份都留着，放进你的页面比较后再选。