优化 Figma SVG 的最佳时机，其实是在点击 Export 之前。优化器可以删除注释和编辑器残留，却无法判断一个隐藏图层是否已经废弃、转曲文字是否仍需编辑，也无法知道三个重叠蒙版是不是设计的一部分。这些选择必须回到设计源文件完成。
下面以一张产品插画为例，从专用导出 Frame 的整理一直走到浏览器交付。Figma 文件是可编辑源，刚导出的 SVG 是中间产物，经过检查的优化文件才是交付副本。这样下周设计更新时，团队可以重复流程，而不是拿压缩文件继续修补。
建立专用导出 Frame
新建一个只负责导出的 Frame 或 Component，让边界与网页实际需要的素材完全一致。检查边界外的对象：散落矢量、设计注释、旧方案和画布外形状，即使最终画面里不明显，也可能参与导出。
在可编辑阶段保留有意义的图层名称。名称不一定进入生产文件，但审核者能快速区分背景、图标、标签和装饰细节，也更容易找到意外蒙版、混合模式或不该存在的效果。
再检查背景。如果网页素材应透明，不要因为 Figma 画布是白色就保留白色矩形；如果背景确实属于作品，把它作为明确形状，并放到真实页面颜色上验证。透明问题经常在设计稿里看不出来，切换深色主题后才暴露。
删除不应交付的内容
废弃方案应删除或移出导出组件，而不是只点隐藏。探索阶段的隐藏图层很方便，但正式导出不应依赖所有工具对 visibility 都做出同样解释。旧分支可以归档在组件外，保持来源可追溯。
寻找透明度为零的对象、意外小点、重复描边和被其他形状完全覆盖的图层。有些不会影响结果，有些却会生成额外路径、clip path 或 paint 定义。利用 Outline 视图和图层面板，查看正常画布遮住的结构。
不要为了“层数少”就全部 Flatten。扁平化可能把简单可编辑图元变成长路径，丢失语义分组，也让以后修改困难。只有在交付几何明显更好、且源文件仍被保留时，才应有目的地 Flatten。
用设计意图简化节点
反复执行布尔运算和矢量编辑后，Vector Network 可能留下多余节点。放大轮廓，删除不改变曲线的点。由设计师确认的少量节点，通常比让优化器猜测哪些坐标冗余更稳定。
Logo 和小图标尤其要谨慎。不到一个像素的差异，在 16 或 24 像素下可能改变视觉重量，即使大图预览完全一样。必须用产品真实尺寸比较，并保留为了光学校正而有意设置的不对称。
插画里若有重复元素，也要决定是否保持独立。相同圆点可通过复用减少标记，但 Figma 可能导出多个节点。开发者后续改成 symbol 属于结构重写，应该像代码变更一样审核，而不能当作无风险精简。
有意识地选择边界与比例
SVG 不依赖像素分辨率，因此导出 2x 不会像 PNG 那样带来清晰度收益。真正重要的是坐标系统、viewBox 与物理边界。没有其他平台合同要求时，按预期逻辑尺寸导出。
检查 Frame 是否出现 23.999 之类小数尺寸。一个明确的 24 像素图标通常会得到更干净坐标；但曲线若依赖平滑几何，也不要强行把每个点贴到像素网格。目标是减少无意精度，而不是抹掉设计细节。
导出后核对 viewBox 与 Frame 边界。是否保留 width 和 height 也由集成方式决定：图片标签可以借它们提前保留布局空间，响应式内联组件可能交给 CSS。不要让通用清理规则替代组件合同。
审核 clipPath 与 mask
Figma 常用 clip path 实现 Frame 裁切，用 mask 制作效果。每个定义都会产生 ID 和内部引用。与 Frame 完全相同的矩形裁切看起来可能多余，但手动删除前必须检查是否有溢出图形，否则原本隐藏的内容会被暴露。
列出导出文件里的每一个 clipPath 和 mask，找到对应消费者。优化后确认定义和 url(#id) 引用同时存在。若定义没有消费者，应回到 Figma 判断是否由旧图层产生，从源头清理比依赖优化器猜测更可靠。
柔和蒙版和透明效果若是视觉核心，还要在多个浏览器中验证。滤镜区域、光栅化和颜色插值会让一个原始体积不大的效果仍然渲染昂贵。有时简化视觉处理才是更好的网页优化。
检查渐变与 paint ID
渐变会生成定义，并由路径通过 ID 引用。外观看似相同的渐变，其坐标、transform、spread method 与透明 stop 可能不同，不能只看缩略图就合并。
同一页面内联多个 Figma 图标时，paint0_linear 这类通用 ID 容易冲突，后面的组件可能误用前一个组件的渐变。交付前选择一种策略：在组件构建时加确定前缀、隔离生成 ID，或让每个文件通过 <img> 独立加载。
这里使用的优化器默认保留 ID，避免静默破坏引用；但保留 ID 并不会自动解决多个独立导出在同一 DOM 中的碰撞，仍需要集成测试。
决定文字如何交付
保留 live text 通常体积更小，在某些场景也更易访问，但依赖字体是否存在，不同系统可能排版不同。文字转曲能稳定外观，却会把每个字形变成几何，复制修改也必须重新导出，没有一种方案永远正确。
UI 标签优先考虑放在 SVG 外用真实 HTML 文本。它更自然地支持本地化、选择、无障碍和响应式布局。Logo 字标本身就是视觉形状时，可以转曲，但必须保存品牌源文件。
文字留在 SVG 内时，要测试 fallback font、行高、字距与可访问名称；若转成轮廓，应删除 Figma 遗留的隐藏重复文字，除非它承担明确的无障碍功能。
检查描边、效果与浏览器表现
可变描边、内外对齐、混合模式、滤镜和阴影，可能导出成非常复杂的结构。最终消费者是浏览器，因此必须直接在浏览器打开，而不是只重新导入 Figma 看效果。
只有接收环境无法稳定还原描边时才 Expand Stroke。展开可能把一条路径加 stroke 变成更大的填充轮廓。模糊阴影也会带来 filter，区域设置还可能造成裁切。应先在源 Frame 中把效果边界调整好。
若效果只是装饰且代价较大，可考虑在 SVG 外用 CSS 重建，便于主题和复用。但这会把视觉所有权从设计稿移动到前端代码，交付说明必须记录。
导出可控的中间文件
只导出专用 Frame，然后用文本编辑器和浏览器分别打开。确认根节点、viewBox、尺寸、paint 定义、蒙版和路径，搜索意外嵌入位图与外部引用，并记录原始 UTF-8 字节。
中间文件应保留到优化对比结束。它能帮助判断问题来自 Figma 还是优化步骤。未来设计更新时，应从 Figma 重新导出，而不是把优化文件当作新的源文件继续编辑。
文件名保持稳定、描述性强且不带空格。版本历史放在版本控制中；公共 URL 是否稳定，则应与缓存失效和视觉变更策略一起决定。
先选安全预设，再评估平衡预设
安全预设删除注释、编辑器元数据和格式残留，同时保留 ID、class、title、description、样式、渐变、蒙版、动画和代码钩子。面对陌生 Figma 导出，它是更合理的第一步。
平衡预设进一步整理数字、颜色、路径和 transform，可能节省更多字节，但审核成本更高。只有安全结果已经通过，素材已经定稿，团队能在真实尺寸比较几何时，再尝试平衡预设。
可以使用本地处理的 SVG 压缩工具运行两档预设。文件只在浏览器会话中处理，页面显示实际字节，不会套用假定比例。预览和结构检查通过后再保存交付副本。
Figma 与 Illustrator fixture 实测
仓库的 figma-illustrator.svg fixture 包含 XML 声明、注释、编辑器命名空间、metadata、格式空白、viewBox 与简单图形。用生产安全预设实际运行，原始 374 字节，优化后 199 字节，减少 175 字节，约 46.79%，没有警告。
风险检查确认输出仍为有效 SVG，矢量结构与 viewBox 得到保留。这个比例来自一个很小、且编辑器残留占比集中的 fixture。真实插画若主要由路径几何组成，结果会完全不同。
这组数据的价值在于可以复现。它没有宣称所有 Figma 文件都能减半，也不是模拟界面数字；实时页面使用的就是同一优化器与字节算法。
真实安全预设：figma-illustrator.svg 从 374 B 减至 199 B。
在真实页面测试 ID 冲突
建立一个小型集成页面，放入两个优化后实例，再加入至少一个同设计系统导出的 SVG。如果生产会内联，就按内联方式测试，逐项观察渐变、蒙版、clip path、ARIA 引用与 CSS 选择器。
若发生碰撞，应在构建或组件边界解决。基于组件名的确定前缀比每次构建变化的随机值更好调试。所有定义与引用必须一起更新，并保留 DOM 合同或渲染回归测试。
若文件通过图片方式加载，则改为检查缓存、固有尺寸与主题行为。深色模式图标可能需要 currentColor、两份文件或 CSS mask，这属于交付架构，不是优化器能自动选择的答案。
同时做视觉与语义对比
在预期像素尺寸、浅色与深色背景下比较原文件和结果，并放大查看边缘。重点观察细描边、小间隙、渐变边界、裁切边缘和阴影范围。差异图能帮助定位，但关键光学细节仍需要人工确认。
接着检查语义。文件需要可访问名称还是纯装饰？title 和 description ID 是否能解析？class 和 data hook 是否存在？hover 样式是否工作？蒙版和渐变是否指向现有定义？只有第一帧相似，无法回答这些问题。
最后在真实交付环境比较原始体积与 Brotli 体积。源码减少有价值，但网络传输、缓存策略和跨页面复用才决定页面性能。
写一份开发者能执行的交付说明
交付说明应包含 Figma 源链接、导出 Frame、嵌入方式、预期尺寸、主题假设、无障碍行为、优化预设和实测字节。说明文字是 live text 还是 outline，以及 ID 是否需要构建时加前缀。
再附短风险清单：已检查 clip path、mask 与渐变，没有意外位图，没有外部资源，viewBox 保留，双实例碰撞测试通过，并在目标尺寸批准预览。这样的信息比一句“已经优化”更有用。
在任务或资产记录中同时保存来源与交付文件。设计更新时，下一位同事可以复现流程，不需要猜测旧文件经历了哪些处理。
一页式 Figma 导出清单
导出前隔离 Frame、删除废弃隐藏层、使用 Outline 检查、简化有意几何、确认透明背景，并决定文字形式。导出时核对边界、viewBox、尺寸、clip path、mask、渐变、效果和嵌入数据。导出后记录字节、运行安全预设、比较画面和语义、测试多个实例，之后才考虑平衡预设。
不要只为减少层数就全部 Flatten 或转曲，不要在没有跟踪引用时删除 ID，也不要把一张静态预览当成可访问性与动画完整的证据。Figma 源文件始终是可编辑权威。
需要更通用的保护流程，可阅读安全减小 SVG 体积指南；素材来自生成器时，使用AI 生成 SVG 的生产审核；需要厘清交付术语，可参考compressor、optimizer 与 minifier 决策说明。