SVG 优化 8 个常见烂坑:Figma / Illustrator 导出的 SVG 怎么压掉 80%

你从 Figma 导出一个 24x24 的图标,文件大小 3.2KB。丢到 Piick SVG 优化器跑一下,出来 480 字节,缩小了 85%。为什么?因为 Figma 默认导出的 SVG 含 metadata、注释、ID 默认值、路径 12 位小数精度,这些浏览器全都不需要。

本文给 8 个最常踩的膨胀模式,每个的可复制压缩方案。

30 秒总览

Figma / Illustrator / Sketch 默认导出的 SVG 含 60-80% 冗余,metadata + 注释 + 默认属性 + 路径精度
8 个常见烂坑:metadata / 注释 / 默认属性 / 路径精度 / 颜色冗长 / 重复 ID / 隐藏 layers / 编辑器前缀
浏览器内 SVG 优化能压 50-85%,不丢可视质量
用 Piick SVG 优化器 1 分钟测,粘贴 SVG + 选规则 + 出结果
想深度优化,集成到 build pipeline(Vite / webpack / Next.js),用 SVGO CLI 跑

8 个常见烂坑

烂坑 1:Figma 的 metadata 块

症状:导出 SVG 含 metadata 块,里面塞了应用 ID、组件 ID、节点 ID、Figma 版本号,几十 ~ 几百字节。metadata 块对浏览器渲染 0 作用。

每个 Figma 导出的 SVG 都有,纯 metadata 没用。

正解:

浏览器工具一键勾掉 metadata 规则就 strip 掉
Figma → Export → SVG → 取消勾选 Include metadata
命令行: 用 sed 配合范围匹配 strip 掉整块

回收:通常 5-30% 压缩。Figma 的 metadata 块每个文件 200-800 字节,看着不多但 hero illustrations 里常带大段 ID 描述。

烂坑 2:XML 注释

症状:Illustrator 导的 SVG 全是 XML 注释,带 Generator / Application / 版本号。Figma 有时候带 Group 描述。Inkscape 带 Created with 标记。这些注释对浏览器渲染 0 作用,但每个占 30-100 字节。

正解:工具一键勾掉,正则表达式删除整块。

回收:10-50 字节 / 文件,Illustrator 的大型 SVG 经常每个 layer 一个注释,加起来几百字节。

烂坑 3:默认属性

症状:SVG 规范定义了一些默认值,设计工具导出会把这些默认值显式写出来,全是冗余。

最常见的 5 个默认属性:

fill-opacity 等于 1 时可以删
stroke-linecap 等于 butt (默认) 时可以删
stroke-linejoin 等于 miter (默认) 时可以删
opacity 等于 1 时可以删
xml:space 等于 preserve 时可以删,文本不是的话

正解:工具勾掉 defaults 规则一键清。每个属性 15-30 字节,每个 SVG 有 5-15 个默认属性。

回收:200-800 字节 / 文件,看 attribute 复杂度。

烂坑 4:路径精度过度

症状:Illustrator 默认导出用 6 位小数 (十进制表示精确到微米),屏幕物理像素 0.26mm (常规 DPI),6 位小数是 0.000001mm 单位,屏幕根本看不到。

正解:

工具路径精度调到 2 (默认就是)
Illustrator → Export → Number Precision = 2
Figma 不暴露精度设置但可以 post-process

回收:最高,通常 30-60% 压缩。一个复杂 hero illustration 可以从 40KB 砍到 18KB,只动小数位。

烂坑 5:颜色冗长

症状:颜色有 3 种常见写法冗余。RGB 函数形式 rgb 3 个数字用逗号分隔。6 位 hex 表示法。命名颜色 red 是命名 CSS 颜色。

正解:工具勾掉 colors 规则一键转 hex。

rgb 转 #fff (3 字符 hex 而不是 7 字符 rgb 函数)
#ffffff 转 #fff (3 字符 hex 而不是 6 字符)
named 转 #f00 (red CSS 命名)

回收:每处颜色 5-10 字节。50 个颜色就是 250-500 字节。

烂坑 6:重复的 ID

症状:每个图层自动生成 id 等于 Frame 123 这种,一个 SVG 几十个 ID,引用却零次。浏览器留这些 ID 没用,但占字节。

正解:工具勾掉 unused-ids 规则,只保留 CSS 或 script 引用的 ID。

回收:100-500 字节,看图层数。

烂坑 7:隐藏 / 锁定的 layers

症状:Illustrator 和 Sketch 导出隐藏但没删的 layer,Figma 隐藏 frame。导出时设计师忘了清干净,0 像素但纯字节。

正解:

导出前清理,设计师习惯
已经导出的工具可以 strip display 等于 none 的元素和 visibility 等于 hidden 的

回收:几百 ~ 几 KB 看图层数。Illustrator 抠细节的 logo 经常有十几个隐藏 layer,加起来 1-2KB 纯浪费。

烂坑 8:编辑器 namespace 前缀

症状:Illustrator 导的带 sodipodi 和 inkscape 两个 namespace 一堆属性,Inkscape 导的带 sodipodi,Sketch 带 sketch 前缀,所有编辑器把内部的 namespace 全 dump 出来。Figma 干净一点但也有 xmlns:xlink 这种。

正解:工具勾掉 namespace 规则一键 strip。

回收:50-200 字节。50 个 namespace 属性可以堆到 200+ 字节。

工具选型决策

3 种主要 SVG 优化路径:

浏览器内 SVG 优化

优势:零安装、零数据上传、隐私安全(敏感 logo / 内部资产友好)
缺点:不如 SVGO CLI 强大(覆盖率 70-80% vs SVGO 的 100%)
适合:设计稿导出即时压缩、一次性文件、不愿装 npm

SVGO CLI

优势:100+ 规则,build pipeline 集成(Vite / webpack plugin),自动化
缺点:需要 Node.js + 配置文件 + local install
适合:production build,SVG 多的项目,长期流水线
装法: 用 npm 全局或项目装 svgo,然后写 svgo.config.js,跑 svgo —folder ./src/assets/icons

手工正则 / sed (一次性)

优势:零依赖、任何环境都能跑
缺点:边角 case 不如工具,容易破格式
适合:应急(CI 跑挂了,用 sed 抢救)

跨工具链:browser tool 测一次,看到底压缩多少,不够再用 SVGO 跑 CI。这是 piick 的推荐工作流。

5 个常见踩坑场景

场景 1:删错了 viewBox

真事:有人写工具把 viewBox 也当默认属性删了 → SVG 渲染就崩。viewBox 是 SVG 的坐标系定义,删了浏览器不知道怎么缩放。工具应该有白名单 rule,本博客提到的工具默认保留 viewBox。

场景 2:删了 currentColor

真事:CSS 主题色依赖 fill 等于 currentColor 这种用法,你把它转成 hex 实色删了,暗模式失效。工具不能动 currentColor 这种语义值。检查优化后 SVG 里有没有 currentColor,有没有删除 style block。

场景 3:路径精度砍太狠

真事:优化精度设到 0,放大看路径有锯齿。2 位小数已经够,再砍肉眼可见精度损失;3 位对超大 SVG 才考虑。

场景 4:改了 CSS animation 引用的 ID

真事:删了 id 等于 circle-spin 这种,CSS 里的 @keyframes 引用的 ID 失效。CSS 引用的 ID 必须保留,工具应该有保留被 CSS 引用的 ID 选项。

场景 5:删空 attributes 跑挂了 responsive logo

真事:width 等于 auto 被当 empty attribute 删了,响应式失效。删空前确认 attribute 不是 auto / inherit / currentColor 这种关键词。