跳到正文

SVG 优化压缩

SVG Optimiser

清掉编辑器留下的冗余、合并变换、缩减路径精度,并把渲染结果并排对比。

从设计工具存出来的 SVG 带着编辑器元数据、没人展开过的变换列表,以及写到小数点后七位的坐标。去掉这些很容易;知道它有没有改变画面才是难的部分,所以这里显示差异视图,而不只是一个字节数。

🔒 完全在你的浏览器里运行svgoptimizevectorweb

把 SVG 放到这里

也可以直接改下面的标记。什么都不会上传。

编辑标记

怎么用

  1. 拖入 SVG,或粘贴标记

    它随输入实时优化,所以粘一个文件和就地编辑都行。

  2. 设精度

    在 24 单位的 viewBox 上,两位小数在 100 倍缩放下是百分之一像素。低于一位,图标开始明显移位。

  3. 看差异视图

    它用差值模式把优化后的文件叠在原文件上:纯黑说明两者渲染完全一致,任何亮起来的地方都是移动过的像素。

  4. 复制 SVG 或 data URI

    这里的 data URI 是 URL 编码而不是 Base64,比原文件大约多 10% 而不是 33%。

常见问题

为什么“移除 title”默认关闭?

因为 `<title>` 是内联 SVG 的可访问名称。去掉它省大约三十个字节,并让一个有标签的图标对屏幕阅读器用户变成没标签的。

优化后我的图标稍微移位了。

精度对它的 viewBox 来说太低。viewBox 小意味着每个单位是画面的一大部分,舍入到一位小数就会明显移动。把精度调高,直到差异视图变黑。

它会压缩路径数据吗?

它舍入数字并把纯平移烘焙进去,并报告省了多少字节。它不把命令改写成更短的等价形式——那会改变曲线族,路径优化器真正的 bug 就出在那里。

可以从这些接进来

接下来

这些工具吃得下当前工具的产出,结果可以直接送过去。