跳到正文
DevTools / SVG 压缩优化

SVG 压缩优化

从绘图工具导出的 SVG 携带的东西远不止图形本身。Illustrator、Inkscape、Sketch 和 Figma 都会写入自己的命名空间、图层名、编辑器状态和生成器注释，一个典型的图标因此会比它需要的体积大三到十倍。本压缩器清除这些开销——元数据、注释、未使用的 id、取默认值的属性、空白与坐标精度——并给出压缩前后的原始与 gzip 体积，因为对 SVG 而言，真正在网络上传输的是 gzip 后的那个数字。

完全在浏览器本地运行——不会上传任何内容。

或将文件拖到此处
输入 — 1.80 KB
优化结果 — 0 B

优化项

Generator banners and licensing blocks written as XML comments.

<metadata>, <title>, <desc> and <sodipodi:namedview>.

inkscape, sodipodi, sketch, figma, adobe, RDF and friends.

xml:space, enable-background, version, data-name.

fill-opacity="1", stroke-linecap="butt" and other no-ops.

Groups and defs with no geometry left inside.

Only runs when nothing in the file points at the id.

Whitespace between tags carries no meaning in SVG.

Trims 48.1234567 to the precision below.

Re-indents for reading. Adds bytes back.

预览

暂无内容

通过 img 元素渲染，内嵌脚本无法执行。

SVGZ 以及所有现代 HTTP 服务器都会对 SVG 做 gzip，gzip 后的数字才是实际传输量。

工作原理

SVG 是 XML，因此 XML 允许的一切在它里面都合法：注释、处理指令、命名空间声明、元数据元素以及外来命名空间中的任意属性。渲染器会忽略其中绝大部分。Inkscape 的命名空间声明、sodipodi 的 namedview 元素、Adobe 的生成器注释、图层标签和 RDF 元数据块，合起来占了典型导出文件的多数体积，却完全不影响绘制结果。移除它们是收益最大且完全安全的一步。

属性级清理是第二遍。许多属性被写成了默认值——fill-opacity 为 1、stroke-linecap 为 butt、stroke-width 为 1——而所谓默认值，定义上就是属性缺失时渲染器会采用的值，因此删除它什么都不会改变。xml:space、version、enable-background 之类的噪声属性要么已废弃，要么根本不会被读取。未引用的 id 只有在文件中确实没有任何东西指向它时才会被删除，因为 id 是 url(#)、clip-path、mask、filter 等引用的目标，删掉被引用的那个会破坏图形。

坐标精度是文件能在毫无视觉代价的情况下大幅减重的地方。矢量编辑器产出的路径经常带六位小数，于是坐标写成 48.1234567，而 48.12 在任何屏幕能呈现的尺寸下渲染结果都完全相同。保留两位小数通常能让路径的 data 属性长度减半。把精度降到两位以下也是可以的，对大型插画偶尔有用，但降到一位或更少时曲线上的伪影就会变得可见。

gzip 解释了为什么原始体积的变化幅度会低估真实收益。由于 SVG 是文本，HTTP 服务器会压缩它，而冗长形式中的冗余意味着压缩后的体积往往比原始数字所暗示的更接近优化后的体积——原始缩小 70% 的文件，在网络上可能只缩小 40%。两个数字都会给出，让实际收益可见而不是靠假设。唯一必须看原始体积的场景，是把 SVG 直接内联进 HTML 文档：那里没有单独的压缩步骤，原始体积的节省就是全部的节省。

常见应用场景

  • 在提交之前，清除从 Figma 或 Illustrator 导出的图标里的编辑器元数据。
  • 为处于页面加载关键路径上的内联 SVG 标志减重。
  • 在嵌入邮件模板或 PDF 流程之前清理 SVG。
  • 查看一个文件的体积里有多少是真实图形、多少是工具开销。
  • 对以过高精度程序化生成的地图或图表 SVG 做坐标取整。
  • 生成紧凑的 SVG，直接粘贴进 HTML 或 JSX 文件。

最后更新: 2026-10-14

常见问题解答

优化会破坏我的 SVG 吗？

默认设置会保留一切影响渲染的内容，有风险的操作都需要手动开启。未引用的 id 只会在全文扫描过 url(#)、href=# 和 aria-labelledby 之后才删除，因此渐变、裁剪路径或滤镜的目标绝不会被误删。坐标取整在两位小数下视觉上无损。唯一值得斟酌的是“美化输出”，它会把字节加回来而其他什么都不改；预览会通过 img 元素渲染优化后的结果，方便你与原始文件对比后再采用。

为什么 gzip 后的节省幅度看起来比原始小？

因为 gzip 已经去掉了优化器要去掉的大部分冗余。冗长标记中重复的属性名和长命名空间 URL 压缩率极高，因此未优化文件的压缩体积往往比原始体积所暗示的更接近优化后的压缩体积。既然 HTTP 服务器会自动压缩 SVG，那么对网络传输而言 gzip 对比才是诚实的。原始体积对比对直接内联进 HTML 的 SVG 才有意义，那里没有压缩环节。

删除 id 安全吗？

只有在没有任何东西引用它时才安全，而引用扫描正是检查这一点。SVG 里的 id 不只是标签：fill 中的 url(#gradient)、clip-path 中的 url(#clip)、use 元素的 href="#symbol" 以及无障碍用的 aria-labelledby 都指向 id，删掉被引用的那个会静默破坏图形或其无障碍树。本工具在决策前会收集所有这些引用，并且无论如何都会保留 g 和 defs 这类容器元素上的 id，因为生成代码经常以它们为目标。

预览会执行 SVG 里的脚本吗？

不会。优化后的输出通过 img 元素渲染，而浏览器刻意不会执行以这种方式引用的 SVG 中的脚本，也不会加载外部资源——它被当作静态图片处理。这使预览对来源不明的文件也是安全的。代价是预览无法展示可交互或带动画的 SVG 会做什么，如果文件确实含有脚本行为，这算是一个真实的局限，不过这类文件作为素材并不常见。

相关工具