Figma导出的SVG无法在Flutter安卓应用中正常显示该如何解决

常见兼容问题原因 #

Figma默认导出的SVG会携带大量冗余图层信息、CSS类样式、特殊蒙版属性，flutter_svg库对部分非标准SVG属性支持不全，就会出现仅显示白色矩形的情况。

无需安装AI类桌面软件的修复方法 #

• 方案1：手动编辑SVG源文件
  用任意文本编辑器打开SVG文件，调整以下内容：
  • 删除所有<style>标签，将标签内的类样式直接内联到对应图形元素的属性中，例如把类对应的填充色直接写到<path>的fill属性里
  • 删除mask、clip-path相关的冗余定义，拆解无实际作用的嵌套<g>标签
  • 若SVG使用currentColor作为属性值，可先替换为具体色值测试，例如fill="#000000"
  • 检查根标签的viewBox属性是否完整，确保没有宽高设置为0的问题
• 方案2：使用在线SVG优化工具
  搜索公开的SVG优化服务，优化时勾选以下配置后导出新的SVG文件即可：
  • 内联CSS样式
  • 合并冗余路径
  • 删除元数据、图层备注信息
  • 删除不兼容的蒙版、裁剪属性
• 方案3：调整Figma导出参数重新导出
  回到Figma选中对应图标，调整导出配置后重新导出：
  • 导出格式选择SVG，点开高级设置
  • 勾选「Outline text」、「Simplify stroke」
  • 取消勾选「Include id attributes」、「Include Figma layer information」
  • 重新导出的SVG通常可直接被flutter_svg正常加载

加载验证代码 #

修复后可用以下代码测试加载效果：

import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/你的图标路径.svg',
  width: 24,
  height: 24,
  // 若颜色显示异常可手动指定颜色滤镜
  colorFilter: ColorFilter.mode(Colors.black, BlendMode.srcIn),
)

如果添加colorFilter后图标正常显示，说明仅原SVG的填充属性配置存在问题，调整对应属性即可。

内容的提问来源于stack exchange，提问作者La Pyae