Figma导出SVG图标时文本未轮廓化会导致冗余代码,应勾选Outline Text导出、或用Ctrl+Shift+O手动转曲、再用SVGO移除font-family等残留属性。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

如果您在Figma中导出SVG图标后发现代码中包含大量冗余文本信息(如
一、启用Outline Text选项导出SVG
该方法通过在导出前将所有文本图层强制转换为矢量路径,彻底消除依赖系统字体、font-family、font-size等CSS属性的文本节点,从而避免生成冗余的XML文本结构和样式声明。
1、在Figma中选中包含文本的图层或组件。
2、确保该图层处于可编辑状态(非实例嵌套,已解构)。
3、在右侧属性检查器(Properties Panel)中滚动至“Export”区域。
4、点击“+”号添加导出设置,格式选择“SVG”。
5、勾选下方出现的Outline Text复选框。
6、点击右键图层,选择“Export selection”,下载SVG文件。
二、手动预处理文本图层再导出
当Outline Text选项不可用(如使用旧版Figma或受限插件环境)时,可通过提前将文本转为轮廓路径的方式规避冗余。此操作直接修改图层结构,导出时无需依赖导出设置。
1、在图层面板中单击选中目标文本图层。
2、按下快捷键Cmd + Shift + O(macOS)或Ctrl + Shift + O(Windows)。
3、确认文本已变为不可编辑的矢量路径(图层缩略图显示为路径形状,名称后缀变为“Outline”)。
4、右键该图层,在上下文菜单中选择“Export selection”,导出为SVG。
三、导出后使用SVGO移除残留文本节点
即使启用了Outline Text,部分Figma版本仍可能残留空
1、安装Node.js环境并全局安装SVGO:npm install -g svgo。
2、创建自定义配置文件svgo.config.mjs,加入以下插件:
3、在plugins数组中添加removeText和removeAttrs(配置attrs: ["font-family", "font-size", "text-anchor"])。
4、执行命令:svgo input.svg -o output.svg --config=svgo.config.mjs。


















