Figma导出SVG图标出错主因是居中描边与SVG标准冲突，需执行轮廓化（Cmd+Shift+O）、路径闭合、图层合并及Fill Rules Editor校验nonzero填充规则。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在Figma中导出SVG图标后发现路径错乱、边缘模糊或图标融合，很可能是由于描边未经过轮廓化处理，导致SVG标准无法正确解析居中描边的渲染逻辑。以下是解决此问题的步骤：
一、理解描边居中与SVG标准的冲突
Figma默认采用居中描边（stroke-align: center），即描边沿路径中心线向两侧等量延伸；而SVG规范仅支持内描边（inner）或外描边（outer），不原生支持居中计算。导出时Figma会尝试将1px居中描边拆分为0.5px内+0.5px外，引发半像素渲染、路径拓扑断裂及图层边界误判，最终表现为路径错乱或视觉偏移。
二、执行Outline Stroke轮廓化操作
轮廓化是将描边强制转换为独立闭合填充路径的过程，彻底消除描边属性依赖，确保导出后的SVG仅含标准<path></path>元素，完全兼容Iconfont、uniapp及所有前端环境。
1、在Figma中选中含描边的图层（单个图形、文字或组合组）。
2、确认该图层未被锁定、隐藏，且处于可编辑状态。
3、使用快捷键：Mac：Cmd + Shift + O；Windows：Ctrl + Shift + O。
4、若快捷键无效，右键图层 → 选择“Outline Stroke”选项。
5、检查图层是否已转为无描边、纯填充状态——右侧属性面板中“Stroke”设置应为空，且图层缩略图显示为实心色块而非空心轮廓。
三、配合路径闭合与合并操作
仅轮廓化不足以保证SVG稳定，因部分AI生成或导入图形存在开放锚点或多重嵌套路径。必须同步完成路径闭合与图层合并，使每个图标成为单一、封闭、无子组的矢量对象。
1、双击已轮廓化的图层，进入矢量编辑模式。
2、按住Shift点击所有松散锚点，或使用“Select All”（Cmd+A / Ctrl+A）全选路径节点。
3、右键 → 选择“Join Points”或点击顶部工具栏“Join”按钮，强制闭合所有开放路径。
4、退出矢量编辑（Esc），选中全部子图层，右键 → “Flatten Selection”或使用插件“Combine & Outline”一键合并为单一路经。
5、确认图层列表中该图标仅显示为一个图层，无嵌套箭头展开符号。
四、验证并导出SVG
轮廓化+闭合+合并后的图层已具备稳定导出前提，此时需启用Figma原生SVG导出配置，避免插件中间转换引入新偏差。
1、选中已处理完毕的图标图层。
2、在右侧属性面板中滚动至“Export”区域，点击“+”号添加导出设置。
3、格式下拉菜单中选择SVG，缩放保持“1x”，取消勾选“Include scale in filename”以防命名干扰。
4、右键图层 → 选择“Export [Layer Name]”，文件将直接下载为标准SVG，打开代码可见全为<path d="..."></path>结构，无stroke属性残留。
五、使用Fill Rules Editor插件校验填充规则
即使完成轮廓化，部分图标仍可能因原始路径方向（clockwise vs. counter-clockwise）错误，导致Iconfont识别为“挖空”而非“填充”，造成图标融合。Fill Rules Editor可强制统一非零填充规则（nonzero），修复路径布尔逻辑。
1、在Figma社区搜索并安装Fill Rules Editor插件。
2、选中已轮廓化的图标图层，运行插件。
3、插件界面中点击“Set Fill Rule” → 选择nonzero。
4、点击“Apply”，插件自动重写所有<path></path>的fill-rule属性值。
5、再次导出SVG，上传至Iconfont即可正常分离显示各图标。
