'ColorFilter' not working

[a-h-mzd]

Sometimes when rendering ~10 SVG files, the ColorFilter doesn't work! For example: Here, all the download SVGs must be green, but one stayed black. This issue happens randomly and can happen to any SVG file.

I'm using Chrome version 114 on iOS 16.5.1. but the issue also happens on all browser types on both Android and iOS.

flutter: 3.10.5 flutter_svg: 2.0.7

[a-h-mzd]

Update: Seems like this issue only happens when using the html renderer.

[icecandy]

I suspect this is a browser issue. I experienced problems tinting my SVG images with flutter web using the html renderer (the canvaskit renderer is fine, as one might expect). For sure there is not consistent browser support for this eg Firefox definitely does NOT work. It may be Chrome is buggy or is not consistent.

[a-h-mzd]

@icecandy I checked and the bug happens on all mobile browsers. Using canvaskit on mobile is not the best option. Would you happen to have any suggestions on how to fix this?

[SirBarksALot]

Have the same issue, I'm using

colorFilter: ColorFilter.mode(
  theme.colorScheme.primary.withOpacity(0.2),
  BlendMode.srcIn,
),

and sometimes it renders correctly and sometimes not, seems to be random. The problem occurs only on web from what I've tested so far.

[federicopolesello]

Any news about this issue? It's very urgent in my case where the SVGs color play a fundamental role in the UI where showing wrong color is a big problem.

[sapar-io]

same issue ((( any updates?

[icecandy]

This is most bizarre. I have returned to this problem just now, but it has changed. Flutter v3.22.3. flutter_svg version ^2.0.10+1. Testing in Chrome version 126.0.6478.183 on Mac OS Sonoma 14.5 from Android Studio (I haven't uploaded to my webserver to see if there is a difference but I doubt there will be). Now tinting only works with the html web renderer. Previously it only worked with canvaskit and not the html renderer - see comments above. Now it does not work with canvaskit or the wasm renderer. I hope to god that the Flutter team don't stop supporting the html renderer, because I really need it and have found it to be the most useful to me.