ColorFilter make wrong shape

sinhpn92 commented 3 months ago

Hello, I upgraded to version 2.0.10+1 and used ColorFilter to make color for the image like that:

SvgPicture.asset(
              icon,
              width: 24,
              height: 24,
              colorFilter: ColorFilter.mode(iconColor ?? Colors.black, BlendMode.srcIn),
        )

But the image has wrong shape coloring. This renderer when used ColorFilter:

And this is without ColorFilter:

What's wrong there? Have any suggest to fix this issue?

Thank you so much for your time!

dnfield commented 3 months ago

What version of flutter? What platform?

sinhpn92 commented 3 months ago

Thank you @dnfield , Sorry for later. This is my doctor:

[✓] Flutter (Channel stable, 3.16.9, on macOS 14.3.1 23D60 darwin-arm64, locale en-VN)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2023.1)
[✓] VS Code (version 1.85.2)
[✓] Connected device (2 available)
[✓] Network resources

I run the app on ios device.

vanlooverenkoen commented 3 months ago

I have exactly the same issue and I am running on 3.19.2

lsaudon commented 2 months ago

I have exactly the same issue on iOS and latest version of flutter_svg: ^2.0.10+1

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.5, on macOS 14.4.1 23E224 darwin-x64, locale fr-FR)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.2)
[✓] VS Code (version 1.88.0)
[✓] Connected device (3 available)
[✓] Network resources

benja8151 commented 2 months ago

Another potentially related example where using color filter adds unwanted horizontal line:

Without color filter:

With color filter:

Cernius commented 3 weeks ago

Same issue 2.0.10+1

Ciock commented 2 weeks ago

Going back to flutter_svg: 1.1.6 seems to fix it. It could also help to add the property fit: BoxFit.scaleDown to avoid the icon being cropped.

dnfield / flutter_svg

ColorFilter make wrong shape #1047