Issues with rendering SVG with colorFilter

[ajimal1992]

Overview

Flutter SVG renders correctly for version 3.10.6 but rendered differently/wrongly for version 3.16.5 when used with colorFilter.

Expected result (running with version 3.10.6)

Actual result (running with version 3.16.5)

flutter doctor -v (running with version 3.10.6)

[✓] Flutter (Channel stable, 3.10.6, on macOS 14.2.1 23C71 darwin-arm64 (Rosetta), locale en-US)
    • Flutter version 3.10.6 on channel stable at /Users/ajmohame/sdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f468f3366c (6 months ago), 2023-07-12 15:19:05 -0700
    • Engine revision cdbeda788a
    • Dart version 3.0.6
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/ajmohame/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/ajmohame/Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.14.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/ajmohame/Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.85.1)
    • VS Code at /Users/ajmohame/Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.80.0

[✓] Connected device (3 available)
    • iPhone 15 Pro Max (mobile) • AB39AAEC-B46A-4333-8BC6-EFC487072106 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-17-0 (simulator)
    • macOS (desktop)            • macos                                • darwin-arm64   • macOS 14.2.1 23C71 darwin-arm64 (Rosetta)
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 120.0.6099.199

[✓] Network resources
    • All expected network resources are available.

• No issues found!

flutter doctor -v (running with version 3.16.5)

[✓] Flutter (Channel stable, 3.16.5, on macOS 14.2.1 23C71 darwin-arm64, locale
    en-US)
    • Flutter version 3.16.5 on channel stable at /Users/ajmohame/sdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 78666c8dc5 (3 weeks ago), 2023-12-19 16:14:14 -0800
    • Engine revision 3f3e560236
    • Dart version 3.2.3
    • DevTools version 2.28.4

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/ajmohame/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/ajmohame/Applications/Android
      Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.14.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Users/ajmohame/Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      17.0.7+0-17.0.7b1000.6-10550314)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.85.1)
    • VS Code at /Users/ajmohame/Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.80.0

[✓] Connected device (3 available)
    • iPhone 15 Pro Max (mobile) • AB39AAEC-B46A-4333-8BC6-EFC487072106 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-17-0 (simulator)
    • macOS (desktop)            • macos                                • darwin-arm64   • macOS 14.2.1 23C71 darwin-arm64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 120.0.6099.199

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Sample code

class TestView extends StatelessWidget {
  const TestView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: SvgPicture.asset(
          "assets/images/sample.svg",
          colorFilter: const ColorFilter.mode(
            Colors.green,
            BlendMode.color,
          ),
        ),
      ),
    );
  }
}

Sample SVG

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="white" stroke="#0E50D0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="6" y="6" width="12" height="12" rx="6" fill="#0E50D0"/>
</svg>

[sejong2401]

Try use BlendMode.srcATop instead of BlendMode.color.

[3kdeveloper]

try this:
SvgPicture.asset('svg path',
colorFilter: const ColorFilter.mode(
AppColors.whiteColor, BlendMode.srcIn)),

[jonahwilliams]

Hi, Flutter team member here. If you're hitting Impeller specific rendering bugs you need to file them on the main flutter repo. We do not triage this repo, so these will be missed.