如何为网页优化 SVG 文件

网页上的大多数 SVG 比它们需要的体积大 2–4 倍。Figma、Illustrator 和 Inkscape 导出时都会塞入元数据、隐藏图层和冗长的路径数据，这些重量最终都要发给用户。好消息是：SVG 优化完全是机械的流程，在浏览器里就能搞定。

会被剥离的内容

一个典型的优化器会跑 30–40 条规则，每条做一件事。最大的几项收益来自：

• 元数据 —— <metadata>、<title>、<desc>、Inkscape 命名空间和 Figma 注释。对视觉没有任何影响。
• 注释与 CDATA —— 从不显示，生产环境不需要。
• 隐藏图层 —— 导出工具漏下的 display="none" 或透明度为 0 的元素。
• 冗余 transform —— 一个什么都不做的 translate(0,0) 或已合并的矩阵。
• 精度 —— 路径坐标从 6 位小数取整到整数像素。
• 默认属性 —— 一个本来就是黑色的元素上写着 fill="black"。
• ID —— 没被引用或自动生成的 ID。

要保留的内容

• viewBox —— 没有它，响应式缩放会失效。
• 无障碍标题 —— 如果 SVG 是内容（而不是装饰），要为屏幕阅读器保留 <title> 和 <desc>。
• 语义化类名 —— 如果你用 CSS 为 SVG 加动画或样式，不要让优化器重命名这些类。

运行优化器

把你的 SVG 粘贴进 SVG 优化器 然后点击优化。它在浏览器里运行（不会上传），并会显示优化前后的体积对比。

一个典型的 Figma 导出通常能瘦身 30–60%。手写的 SVG 瘦身幅度会小一些（一般 10–20%），因为本来就没什么可剥离的。

优化出问题时

激进的优化有时会打破几件具体的事：

• 用 ID 引用元素的动画 —— 如果 ID 被重命名，动画会失效。
• 查询特定类名的脚本 —— 如果类名被压缩，脚本会出错。
• 带稀有效果的滤镜 —— 如果数值精度压得太低，渲染结果会不一样。

如果优化后的 SVG 渲染异常，先把 cleanupIds: false 或 removeHiddenElems: false 作为起点，然后用二分法找到真正引发问题的那个插件。

自动化

对构建流程来说，用 npm 的 svgo 包加到资源管道里。对一次性的任务，浏览器里的工具更快。目标其实一样：只发送浏览器真正需要的内容。