SVG 优化器到底改了什么（以及哪些该手动改）

从设计工具导出的 SVG，体积通常是需要值的二到五倍。它带着元数据、编辑器命名空间、隐藏图层、多余的分组嵌套，以及五位小数的坐标。优化器能自动去掉大部分。问题在于哪些删除总是安全、哪些取决于你怎么用这个 SVG、哪些永远不该自动化。

可以安全剥离的部分

编辑器元数据首当其冲。id="Layer_1" 属性、Illustrator 和 Sketch 的 xmlns 命名空间、<metadata> 块、inkscape 和 sodipodi 命名空间，在浏览器里什么都不做。删掉它们总是安全的，光这一步常常就把体积砍半。

注释和格式空白也可以删。SVG 支持为可读性留白，但生产 SVG 不需要可读。压缩标记、去掉缩进和换行，是白捡的好处。

多余的默认属性是第三类安全目标。一个本来就继承黑色的元素上的 fill="black"、stroke 已经是 none 时的 stroke="none"、没有文字的 path 上的 font-family，都只增字节不改渲染。好的优化器会删掉它们。

优化开始破坏东西的地方

路径简化是优化器最值钱、也最容易造成细微损伤的地方。把 12.34567 取整到 12.35 通常看不出来。取整到 12 可能让曲线在大尺寸下显得不对。大多数优化器让你控制精度，默认值是折中。如果图标优化后看起来有点歪，先查坐标取整，而不是查 path 命令本身。

合并路径更危险。把多个 <path> 合成一个省字节，但它也压平了结构。如果以后你想单独动画某条 path，或给某段重新上色，合并已经把这种能力拿掉了。路径合并是单向操作，只有确定不再需要单独路径时才做。

渐变和滤镜优化是渲染成空白最常见的原因。有些优化器会简化渐变停止点，或以改变输出的方式合并滤镜，有的甚至认为某滤镜没效果就整个删掉。如果带阴影或模糊的图形优化后变平了，关掉滤镜和渐变优化再试一次。

无障碍不是可选项

作为有意义图形使用的 SVG 需要 <title>，复杂图形还需要 <desc>。作为装饰使用的 SVG 需要 aria-hidden="true" 或 role="img" 加空标签。优化器不会添加这些。如果你配置激进，它还会满心以为没用而把已有的 <title> 删掉。

规则是：无障碍属性在优化之后设置，而不是之前，这样优化器就删不掉。对图标集来说，也是在这里决定每个图标是装饰性的（从周围文字继承标签），还是有意义的（需要自己的标签）。

把 SVG 变成图标组件

干净的 SVG 是图标组件的输入。组件包裹 SVG，接受尺寸和颜色，让 path 可复用。机械的部分是从 path 里提取 d 属性，放进组件模板。

容易漏的是 currentColor。一个应该继承文字颜色的图标需要 fill="currentColor" 或 stroke="currentColor"，而不是硬编码颜色。如果源 SVG 是 fill="#000"，即使周围文字是白色，组件也会渲染成黑色。在做组件前把硬编码颜色换成 currentColor，能避免出一套不适配暗色模式的图标。

本站 SVG 工具从 path 生成 React 和 Vue 组件模板，这样你不用手抄 d 字符串。输出是起点，不是成品。你仍要决定 prop 类型、默认尺寸，以及图标是受控还是非受控。

路径动画，以及为什么它比看起来难

用 SVG path 做动画，也就是线条像自己画出来的那种效果，用的是 stroke-dasharray 和 stroke-dashoffset。技法广为人知，但有两个坑。第一，它只对描边路径有效。一个有填充无描边的 path 没东西可 dash，动画毫无作用。第二，dash 长度要匹配 path 长度，而长度通常要用 JavaScript 的 getTotalLength() 算。

CSS 模板能给你关键帧，但长度是 path 专属的。把一条 path 换成另一条，动画就坏，除非重新计算。要把路径动画看作需要一点 JavaScript 来设长度的东西，而不是纯 CSS 效果。

什么时候该手动改

优化器擅长删东西，不擅长重构。如果一个 SVG 有二十条本该合成一条的 path，或一条本该拆成三条做独立动画的 path，优化器帮不上忙。如果某个分组被以破坏布局的方式变换了，优化器会保留这种破坏。

需要重构、需要为动画添加语义分组、或优化器输出渲染不对而你想一个个关特性又嫌麻烦时，手动改才是正解。优化器一遍能拿到 80% 的体积缩减。剩下那 20%，需要判断的部分，仍然是人的活。