压缩 SVG

什么会导致 SVG 臃肿

在文本编辑器中打开Figma导出的 SVG 时，通常会看到以下内容：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Generator: Figma ... -->
  <title>icon</title>
  <desc>Created with Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icon" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

几乎每一行都可以删除。渲染输出只需要 svg、viewBox 和 path。

优化器会移除的内容

注意事项

• 请勿移除 被 CSS 或填充、遮罩、滤镜中的 url(#...) 引用的 ID。激进模式可能会破坏渐变效果。
• 请保留 viewBox。若缺少它，SVG 将无法进行响应式缩放。
• 请保留 <title>，如果你依赖它来实现无障碍访问（屏幕阅读器会朗读它）。
• 避免折叠 <use> 实例。优化器可能会将其内联，从而丢失作为唯一来源的图案定义。

压缩何时能真正节省字节

SVG 是文本，这意味着服务器端的 gzip 压缩本身就已消除了大量冗余。一个未压缩时从 4KB 降到 1KB 的 SVG，经过传输后可能只从 1.2KB 降到 0.7KB。但这依然值得，而且更小的源文件也更易于阅读。