你的SVG比需要的大10倍

从Illustrator导出图标。检查文件大小。在文本编辑器中打开它。

你会发现：没人需要的元数据、15位小数点、空组、特定编辑器的废料，以及2019年的注释。一个简单的logo重50KB，而它可以是3KB。

SVG只是XML。每个不必要的字符都是你的用户下载的字节。

设计工具添加什么

Illustrator、Figma、Sketch——它们都嵌入额外数据：

<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100"
     style="enable-background:new 0 0 100 100;" xml:space="preserve">

渲染不需要这些。这是设计工具正确重新打开文件的元数据。

精度问题

设计工具使用高精度坐标：

<path d="M12.374892749237,45.293847293847 L67.293847293847,89.374892749237"/>

浏览器反正会四舍五入到大约1-2位小数。所有这些数字都是浪费的字节。

更好：

<path d="M12.37,45.29 L67.29,89.37"/>

相同的视觉效果，一小部分大小。

空组和ID

导出通常创建这样的结构：

<g id="Layer_1">
  <g id="icon">
    <g>
      <path d="..."/>
    </g>
  </g>
</g>

三个嵌套组来容纳一个路径。每个组添加字节。除非它们在做什么（如应用变换或样式），否则移除它们。

ID类似。每个元素上的id="XMLID_847_"累积起来。保留你在CSS或JavaScript中引用的ID。移除其余的。

要优化什么

移除元数据。 注释、编辑器信息、你不使用的命名空间。

减少精度。 2-3位小数通常足够。

扁平化组。 不必要的嵌套没有目的。

清理ID。 保留引用的，移除自动生成的垃圾。

合并路径。 可以是一个路径的多个路径应该合并。

移除隐藏元素。 你在设计工具中隐藏但没有删除的图层。

何时保持文件大小

有时更大是正确的：

动画。 ID和组通常作为动画目标。不要盲目移除它们。

CSS样式。 如果你用外部CSS样式化SVG，你需要那些ID和类。

未来编辑。 超优化的SVG难以编辑。保留源文件，优化生产版本。

比较

简单图标，优化前：

原始：24KB
移除元数据后：8KB
减少精度后：4KB
清理结构后：2KB

小了12倍。加载更快。解析更快。每次页面加载，每个用户。

内联 vs 外部

小SVG（优化后1KB以下）通常最适合直接内联在HTML中。没有额外的HTTP请求。

更大的SVG或重用的图标作为可以缓存的外部文件更好。

平衡点取决于你的情况。一般来说：如果你只用一次SVG且它很小，内联它。如果你反复使用它或它很复杂，外部文件。

---

SVG优化是免费的性能。发布前通过优化器运行你的图标。花几秒钟，在每次页面加载时永远节省字节。