SVG 优化：减小矢量图文件体积的几种方法

SVG 为什么会臃肿

SVG（Scalable Vector Graphics）是一种用 XML 描述矢量图形的格式。理论上 SVG 应该是很轻量的——毕竟只是一些数学公式和坐标点而已。但实际拿到的 SVG 文件往往比想象中大很多，原因主要有这么几个：

设计软件导出的冗余信息

用 Illustrator、Sketch、Figma 这类工具导出 SVG 时，它们倾向于把编辑过程中的各种信息都塞进去。包括但不限于：

元数据（metadata）：创作工具名称、版本号、创建时间、作者等信息，放在 <metadata> 标签里
注释：设计师留下的备注文字，用  包裹
无用属性：比如 xmlns 声明重复出现、默认值属性（fill="none" 其实本来就没填充）、多余的 id 属性
分组嵌套过深：设计软件自动生成的 <g> 分组层级，有时候五六层套在一起，每一层都可能带 transform 属性
高精度的小数：坐标值精确到小数点后七八位，比如 d="M123.45678901 234.56789012..."

一个简单的图标从 Figma 导出来可能有 5~10 KB，里面真正描述图形路径的部分可能只占不到一半。

SVG 优化具体能做什么

SVG 优化的核心思路就是去掉那些不影响最终渲染效果的冗余内容，同时在不破坏图形的前提下尽量缩短代码。常见的优化手段包括：

优化手段	说明
移除 metadata	删除 <metadata> 标签及内部所有内容
移除注释	删除所有 <!-- 注释 --> 内容
清理无用属性	去除默认值属性和重复声明
合并路径	将多个相邻的 path 合并为一条
简化小数精度	将 123.45678901 缩减为 123.457
简化颜色值	#ffffff 写成 #fff，rgb(255,0,0) 写成 red
移除隐藏元素	display:none 或 opacity:0 的元素直接删掉
合并分组	将无意义的嵌套 <g> 扁平化

优化前后的体积对比

用一个实际的图标文件来看看效果。下面是一个从设计软件导出的搜索图标 SVG，以及经过优化后的版本：

优化前（原始导出）— 约 2,847 字节

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" viewBox="0 0 24 24"
     xml:space="preserve">
<metadata>
  <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
    <cc:Work xmlns:cc="http://creativecommons.org/ns#">
      <dc:format>image/svg+xml</dc:format>
    </cc:Work>
  </rdf:RDF>
</metadata>
<g id="Search_Icon_Layer" stroke="none" stroke-width="1" fill="none"
   fill-rule="evenodd">
  <g id="search-circle-group" transform="translate(2, 2)">
    <circle id="search-circle" cx="9" cy="9" r="7"
            stroke="#333333" stroke-width="2" fill="none"/>
    <path id="search-handle" d="M14.5 14.5L20 20"
          stroke="#333333" stroke-width="2"
          stroke-linecap="round"/>
  </g>
</g>
</svg>

优化后 — 约 186 字节

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<circle cx="11" cy="11" r="7" fill="none" stroke="#333" stroke-width="2"/>
<path d="M16.5 16.5l4.5 4.5" fill="none" stroke="#333" stroke-width="2"
      stroke-linecap="round"/>
</svg>

从将近 3KB 缩减到了不到 200B，体积减少了大约 93%。图形的视觉效果没有任何区别，该圆的还是圆，该直的还是直。

当然这是单个图标的情况。如果一个页面用了几十个这样的图标，累积起来的节省就很可观了。对于移动端网页来说，每减少一个 KB 的资源大小都能加快一点首屏加载速度。

什么情况下不应该过度优化

也不是所有场景都需要把 SVG 压缩到极致，有些情况下保留一定的可读性和编辑能力更重要：

需要后续编辑的源文件：如果你还会回到设计软件里修改这个图标，那就保留一份带完整信息的原始 SVG 作为源文件，只对发布版本做优化
包含动画或交互逻辑的 SVG：有些 SVG 里面有 CSS 动画定义或 JavaScript 交互代码，过度优化可能会误删必要的样式和脚本
使用了外部引用的 SVG：如果 SVG 里引用了 <use href="#id"> 来复用内部定义，优化时要确保引用目标没有被删掉
作为组件库交付的 SVG：给其他开发者用的图标组件，保留适当的结构和命名有助于理解和定制

提示

建议的工作流程是：保留一份未优化的源文件用于编辑，另存一份优化后的文件用于线上部署。这样既能享受体积缩减带来的加载加速，又不影响日后的维护和修改。

常见问题

优化后 SVG 打不开怎么办？

可能是优化级别太高导致路径数据损坏。降低优化级别重试，或者对比优化前后的代码找出问题。部分优化工具会移除命名空间声明，导致在某些查看器中无法渲染。建议优化后先在浏览器中打开验证。

SVG 优化和压缩是一回事吗？

不是。优化是减少 SVG 代码中的冗余数据（比如精简小数位数、删除注释和空白）。压缩是用 gzip 算法对文件进行编码，需要服务器配置 Content-Encoding: gzip。两者可以叠加使用，优化后再压缩效果最好。

优化会影响动画吗？

如果优化工具保留 animate、animateTransform 等动画标签，就不会影响。但有些激进优化会移除它认为"无用"的元素。如果动画出问题，检查优化工具是否保留了 SMIL 动画标签，或者改用 CSS 动画。

SVG 有哪些常用优化方式

除了使用在线优化工具外，还有几种方式可以达到类似效果：

SVGO：Node.js 生态中最流行的 SVG 优化工具，可以通过配置文件精确控制哪些优化规则启用哪些关闭
构建插件：webpack 有 svg-loader / svgo-loader，vite 有 vite-plugin-svgr，可以在打包流程里自动优化所有 SVG 资源
设计软件设置Figma 导出时可以选择「精简 SVG」选项，Illustrator 也能在导出设置中去掉多余信息

根据你的工作流选择合适的方式就行。如果只是偶尔有一两个 SVG 要处理，在线工具是最快的途径；如果是项目级别的规范化管理，接入构建工具链会更省心。