《SVG 不挨踢》第 9 集：导出技巧——从 Figma/AI 到 SVG 不踩坑

本期目标：一键导出、路径瘦身、代码祛魅，让设计师开心、重构更开心，老板以为你偷偷修了图。

1. 先吐槽：导出一时爽，填坑火葬场

很多小伙伴兴冲冲从 Figma/AI 点「Export SVG」，结果：

• 文件 200 KB，一行路径 3 万字符，微信传输失败
• 自带冗余分组、空 <g>、无用 <clipPath>，代码比简历还长
• 渐变命名 linearGradient1234，重构看不懂，翻译累成狗

今天教你 “导出三步走”，包瘦、包懂、包适配。

2. 第一步：Figma 导出前——“三删一合”

① 删隐藏图层

侧边栏小眼睛关闭的 = 无效元素，全选 → Delete，减少导出噪音。

② 删无用分组

Ctrl + Alt + G 一路解组，能合并的矢量就合并，别留嵌套空 <g>。

③ 删复杂滤镜

高斯模糊、投影 = 大段 <filter>，非必要不加，真要特效回手写更轻。

④ 路径简化

选中路径 → 右上角 Fill 区域 → Vector → Simplify，节点立刻 -50%，肉眼无损。

3. 第二步：导出面板——选对设置

点 Export → 得到 icon.svg，基础瘦身完成。

4. 第三步：在线瘦身——“SVGOMG” 一键抽脂

打开 https://jakearchibald.github.io/svgomg/

1. 左侧上传刚导出的文件
2. 右侧 "PRETTY PRINT" 打开，代码缩进可读

3. 打开开关：

   • Remove metadata ✔
   • Remove viewBox (re-enable when needed) ✘ （留 viewBox 才能缩放）
   • Round/rewrite paths ✔ （小数位 1 位即可）
4. 底部看 压缩率 70%+ → 点 Download
   200 KB → 6 KB 常见操作，微信秒发。

5. AI（Illustrator）用户专属——“保存为 SVG” 正确姿势

1. 文件 → 另存为 → SVG (svg) 不是 SVGZ

2. 弹窗选：

   • SVG Profiles → SVG 1.1
   • Images → Embed（避免外部引用）
   • Decimal → 1（足够精度，太大=废话）
   • 勾 ☑ Minify + ☑ Responsive（去宽高，留 viewBox）
3. 确定 → 用 SVGOMG 再压一次，AI 废话比 Figma 还多。

6. 代码美化——可读性改造（示例）

AI 原始导出

<linearGradient id="a" x1="0.156" y1="0.852" x2="0.852" y2="0.156">

人工改造后

<linearGradient id="logoGradient" x1="15.6%" y1="85.2%" x2="85.2%" y2="15.6%">

• ID 用业务语义，重构一眼懂
• 小数变百分比，同样精度，字符更少

7. 自动化进阶——“导出即瘦”脚本

Figma Plugin 搜 "SVG Export" or "Vector Slim" → 一键完成简化 + 压缩，
适合 组件库大批量 导出，设计师 0 学习成本。

8. 立刻装×——3 种社交姿势

1. “体积对比图”
   截图 200 KB → 6 KB，发群里：“SVG 减肥成功，流量省 97%。”
2. “代码可读图”
   把 id="a" vs id="logoGradient" 并排贴，开发同事给你点赞 +1。
3. “性能报告”
   首页图标总大小从 1.8 MB → 120 KB，Lighthouse 性能分 +15，老板开心请奶茶。

9. 课后作业（任选）

A. 任导 1 个 >100 KB 的 SVG，走 SVGOMG 三步，贴前后体积截图。
B. 把 渐变 ID 改成业务语义，贴代码对比图。
我抽 5 人送「第 10 集 SVG 画二维码源码」。

10. 下集预告（终极装逼）

第 10 集《终极装逼：用 SVG 画二维码，扫描能跳到你朋友圈》
纯路径，可换色，可动画，还能被微信扫出来，
一节课把“代码即艺术”推到天花板。
想继续？评论区敲 1，我连夜把二维码塞进你的记事本！