使用flutter_svg: ^1.1.6时SVG显示异常，颜色褪色

问题说明 #

使用flutter_svg: ^1.1.6加载SVG时出现颜色完全褪色的异常，已尝试清理SVG文件但无效。

代码示例 #

SvgPicture.asset(
  ImageConstant.imgGroup1207,
)

对比图 #

• 原始图片：
• 应用内显示的图片：

解决方法 #

• 检查并移除SVG中的透明/滤镜属性：打开SVG文件，查找是否存在opacity属性（如opacity="0.5"）或<filter>标签，直接删除这些可能导致颜色变淡的代码。
• 添加colorFilter强制渲染原始颜色：修改代码，通过颜色滤镜强制使用SVG本身的颜色定义：

SvgPicture.asset(
  ImageConstant.imgGroup1207,
  colorFilter: const ColorFilter.mode(Colors.transparent, BlendMode.srcIn),
)

• 升级flutter_svg版本：1.1.6版本存在较多颜色渲染bug，建议升级至最新稳定版，修改pubspec.yaml依赖后执行flutter pub get：

flutter_svg: ^2.0.7

• 硬编码SVG颜色值：打开SVG文件，将所有fill或stroke的动态颜色（如currentColor）替换为绝对十六进制颜色值（如fill="#FF5733"）。

内容的提问来源于stack exchange，提问作者Sarthak Parajuli