Figma / Sketch / AI 里怎么用 SVG 图标

从 SVG 文件到设计稿，最常出问题的不是导入，而是导入后的「隐形变形」：多余分组、被展开的描边、丢失的 viewBox、以及被改成像素的尺寸。把导入后的三步清理做完，交开发时才不会返工。

本文目录

• 导入与清理
• 做成组件，而不是复制一堆图层
• 交给开发时给什么
• Illustrator 里特别注意
• 命名与交接：让开发不用猜

导入与清理

把 SVG 拖进 Figma / Sketch 后，先检查有没有多余的嵌套 group 和隐藏图层，删掉；再确认描边是否仍是可编辑的 stroke（有些导出会 outline 成填充形状，之后就改不了线宽了）。最后把画板对齐到 24×24 或你的网格，避免图标带着几分之一的偏移。

• 删掉 metadata、注释图层与空 group
• 确认描边仍是 stroke 而非已轮廓化的路径
• 对齐到统一网格，别留 0.5px 偏移

做成组件，而不是复制一堆图层

把清理后的图标转成 Component / Symbol，命名按「类别/名称/状态」，例如 nav/close/24。需要换色时用组件的变体或颜色样式，不要在每个实例里手动改填充——那正是后期风格散掉的起点。

• 统一 24 网格的组件画板
• 颜色走 Color Style / Variable，实例不写死色值
• 为选中 / 禁用 / 深色各留一个变体

交给开发时给什么

优先给已经压过路径的 SVG 文件，而不是从设计稿再导出一次（二次导出常带回冗余节点）。同时给出三件事：显示尺寸、线宽、颜色变量。开发用 currentColor 或 CSS 变量接上后，主题切换就不用再来要图。

Illustrator 里特别注意

AI 保存 SVG 时容易带上大量编辑信息与剪贴蒙版，导出前用「存储为 → SVG」并关掉「保留 Illustrator 编辑功能」，或导出后再用站内 SVG 瘦身工具清一遍。含文字的图形记得转曲，避免目标机器缺字体。

命名与交接：让开发不用猜

图标组件的命名直接影响交付效率。用「类别 / 名称 / 尺寸 / 状态」四段式，例如 nav / close / 24 / default，避免「关闭 2」「最终版」这类无法推断含义的名字。导出前把不用的变体、历史图层和注释删干净；交接时附一份简短清单，写明使用了哪几个尺寸、颜色对应哪个变量、是否有深色版本。开发拿到文件就能接上，不用回头逐个问。

• 命名：类别 / 名称 / 尺寸 / 状态
• 删掉历史变体与注释图层
• 交接附尺寸、色值与深色版清单
• 变更时同步更新组件，而不是另存新文件

常见问题

← 返回全部使用指南　·　许可与使用常见问题 →