Repository: flutter
Issue: [flutter_svg] Svgs with colorFilter applied are not rendering correctly with Impeller
Labels: package,P1,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/927_

Original report by @adigladi on May 23, 2023

Updated Flutter in our project and noticed that some svgs weren't rendering correctly with impeller now enabled. It seems like it is the svgs with a colorFilter applied that look weird.
```dart
SvgPicture.asset(
      'assets/svgs/flutter-icon.svg',
      colorFilter: const ColorFilter.mode(
        Colors.black,
        BlendMode.srcIn,
      ),
    );
```
See image below (with the flutter logo used, the svgs in our project looks worse but I can't share them unfortunately):

The icon on top uses a color filter and looking at the left edges there seems to be some aliasing. The lower icon has no color filter and is rendering correctly.
![IMG_23BC34A9564E-1](https://github.com/dnfield/flutter_svg/assets/35582133/67131287-a4fe-4f82-be1b-306d7af75647)


Here's also a sample which shows the issue (a svg path needs to be provided though):
```dart
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

void main() async {
  runApp(const MaterialApp(home: MyHomePage()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final defaultSvg = SvgPicture.asset('assets/svgs/flutter-icon.svg');

    final svgWithFilter = SvgPicture.asset(
      'assets/svgs/flutter-icon.svg',
      colorFilter: const ColorFilter.mode(
        Colors.black,
        BlendMode.srcIn,
      ),
    );

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            svgWithFilter,
            const SizedBox(height: 20),
            defaultSvg,
          ],
        ),
      ),
    );
  }
}
```

---
Comment by @dnfield on May 24, 2023
Can you share flutter-icon.svg as well?

---
Comment by @leredirect on May 24, 2023
same issue for me, using impeller too.
without colorFilter:
<img width="49" alt="image" src="https://github.com/dnfield/flutter_svg/assets/71591796/b0c79c02-0cc8-49e4-9f3a-c35a20965a9d">
with colorFilter (blendMode - srcIn)
<img width="49" alt="image" src="https://github.com/dnfield/flutter_svg/assets/71591796/8b136a1c-cc66-45e3-a68d-5430d17c2801">
right fringe of icon is cutted a lil bit
used file: 
![ic_favourites_active](https://github.com/dnfield/flutter_svg/assets/71591796/f60f1fb3-ce41-4f84-9022-b1799f0aff1b)


---
Comment by @Venusdjinni on May 26, 2023
Same issue here. NOt sure its an Impeller issue though, since i'm running on Android (Flutter 3.10.1). Here is my svg:

```
<svg width="25" height="24" viewBox="0.5 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1_922_5843" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.2818 12H14.5C13.3954 12 12.5 12.8954 12.5 14V20.3739L6.74175 23.805C6.52085 23.9405 6.26455 24.0081 6.00507 23.9992C5.7456 23.9904 5.49453 23.9056 5.2835 23.7554C5.07247 23.6052 4.91088 23.3963 4.81907 23.1551C4.72726 22.9139 4.70933 22.6512 4.76754 22.3999L6.38247 15.0256L0.986284 10.5699C0.784114 10.4068 0.635205 10.1878 0.558442 9.94057C0.481678 9.69339 0.480519 9.42916 0.555068 9.18131C0.629616 8.93346 0.776544 8.71313 0.977246 8.54825C1.17795 8.38337 1.42338 8.28138 1.68251 8.25512L8.51854 7.48396L11.8089 0.743523C11.8839 0.587706 11.9892 0.448195 12.1188 0.333037C12.2484 0.21788 12.3997 0.129366 12.5639 0.07261C12.7281 0.0158538 12.9021 -0.0080221 13.0756 0.00236753C13.2492 0.0127572 13.419 0.057185 13.5752 0.13312C13.8443 0.260806 14.0612 0.476253 14.1898 0.743523L17.4801 7.48396L24.3175 8.25512C24.5766 8.28138 24.8221 8.38337 25.0228 8.54825C25.2235 8.71313 25.3704 8.93346 25.4449 9.18131C25.5195 9.42916 25.5183 9.69339 25.4416 9.94057C25.3648 10.1878 25.2159 10.4068 25.0137 10.5699L23.2818 12Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.2818 12H14.5C13.3954 12 12.5 12.8954 12.5 14V20.3739L6.74175 23.805C6.52085 23.9405 6.26455 24.0081 6.00507 23.9992C5.7456 23.9904 5.49453 23.9056 5.2835 23.7554C5.07247 23.6052 4.91088 23.3963 4.81907 23.1551C4.72726 22.9139 4.70933 22.6512 4.76754 22.3999L6.38247 15.0256L0.986284 10.5699C0.784114 10.4068 0.635205 10.1878 0.558442 9.94057C0.481678 9.69339 0.480519 9.42916 0.555068 9.18131C0.629616 8.93346 0.776544 8.71313 0.977246 8.54825C1.17795 8.38337 1.42338 8.28138 1.68251 8.25512L8.51854 7.48396L11.8089 0.743523C11.8839 0.587706 11.9892 0.448195 12.1188 0.333037C12.2484 0.21788 12.3997 0.129366 12.5639 0.07261C12.7281 0.0158538 12.9021 -0.0080221 13.0756 0.00236753C13.2492 0.0127572 13.419 0.057185 13.5752 0.13312C13.8443 0.260806 14.0612 0.476253 14.1898 0.743523L17.4801 7.48396L24.3175 8.25512C24.5766 8.28138 24.8221 8.38337 25.0228 8.54825C25.2235 8.71313 25.3704 8.93346 25.4449 9.18131C25.5195 9.42916 25.5183 9.69339 25.4416 9.94057C25.3648 10.1878 25.2159 10.4068 25.0137 10.5699L23.2818 12Z" fill="black"/>
<path d="M23.2818 12V13H23.6413L23.9185 12.7711L23.2818 12ZM12.5 20.3739L13.0119 21.233L13.5 20.9422V20.3739H12.5ZM6.74175 23.805L6.22984 22.9458L6.21893 22.9525L6.74175 23.805ZM5.2835 23.7554L5.86335 22.9406L5.86335 22.9406L5.2835 23.7554ZM4.76754 22.3999L5.74181 22.6256L5.74439 22.6138L4.76754 22.3999ZM6.38247 15.0256L7.35932 15.2395L7.48991 14.6432L7.01918 14.2545L6.38247 15.0256ZM0.986284 10.5699L1.62304 9.79873L1.61417 9.79158L0.986284 10.5699ZM0.558442 9.94057L1.51345 9.644L1.51345 9.64399L0.558442 9.94057ZM0.555068 9.18131L-0.402552 8.89328L-0.402553 8.89328L0.555068 9.18131ZM0.977246 8.54825L1.61202 9.32095L0.977246 8.54825ZM1.68251 8.25512L1.78335 9.25008L1.79461 9.24881L1.68251 8.25512ZM8.51854 7.48396L8.63064 8.47766L9.1763 8.41611L9.41719 7.92264L8.51854 7.48396ZM11.8089 0.743523L12.7076 1.1822L12.71 1.1771L11.8089 0.743523ZM12.1188 0.333037L11.4545 -0.414456L11.4545 -0.414453L12.1188 0.333037ZM12.5639 0.07261L12.2373 -0.872543L12.5639 0.07261ZM13.0756 0.00236753L13.0159 1.00058L13.0159 1.00058L13.0756 0.00236753ZM13.5752 0.13312L13.1379 1.0325L13.1465 1.03659L13.5752 0.13312ZM14.1898 0.743523L13.2886 1.17704L13.2911 1.1822L14.1898 0.743523ZM17.4801 7.48396L16.5815 7.92264L16.8224 8.41612L17.3681 8.47766L17.4801 7.48396ZM24.3175 8.25512L24.2054 9.24888L24.2167 9.25002L24.3175 8.25512ZM25.4449 9.18131L26.4026 8.89328V8.89328L25.4449 9.18131ZM25.4416 9.94057L24.4865 9.64399V9.644L25.4416 9.94057ZM25.0137 10.5699L24.3858 9.79153L24.377 9.79878L25.0137 10.5699ZM14.5 13H23.2818V11H14.5V13ZM13.5 14C13.5 13.4477 13.9477 13 14.5 13V11C12.8431 11 11.5 12.3431 11.5 14H13.5ZM13.5 20.3739V14H11.5V20.3739H13.5ZM11.9881 19.5149L6.22988 22.9459L7.25362 24.664L13.0119 21.233L11.9881 19.5149ZM6.21893 22.9525C6.16546 22.9853 6.10286 23.002 6.03912 22.9998L5.97103 24.9987C6.42624 25.0142 6.87623 24.8956 7.26456 24.6574L6.21893 22.9525ZM6.03912 22.9998C5.97522 22.9976 5.91407 22.9767 5.86335 22.9406L4.70365 24.5701C5.07499 24.8344 5.51597 24.9832 5.97103 24.9987L6.03912 22.9998ZM5.86335 22.9406C5.81271 22.9046 5.77489 22.8552 5.75364 22.7994L3.88449 23.5109C4.04686 23.9374 4.33223 24.3057 4.70365 24.5701L5.86335 22.9406ZM5.75364 22.7994C5.73245 22.7437 5.72837 22.6833 5.74174 22.6255L3.79333 22.1742C3.6903 22.619 3.72207 23.0842 3.88449 23.5109L5.75364 22.7994ZM5.74439 22.6138L7.35932 15.2395L5.40562 14.8117L3.79069 22.186L5.74439 22.6138ZM7.01918 14.2545L1.62299 9.79878L0.349573 11.341L5.74576 15.7967L7.01918 14.2545ZM1.61417 9.79158C1.56582 9.75257 1.53115 9.70098 1.51345 9.644L-0.396567 10.2372C-0.260737 10.6745 0.00241023 11.061 0.358393 11.3482L1.61417 9.79158ZM1.51345 9.64399C1.49579 9.58712 1.49551 9.52647 1.51269 9.46934L-0.402553 8.89328C-0.534469 9.33186 -0.532431 9.79966 -0.396567 10.2372L1.51345 9.64399ZM1.51269 9.46934C1.52988 9.41219 1.56407 9.36034 1.61202 9.32095L0.342475 7.77555C-0.0109843 8.06592 -0.270645 8.45473 -0.402552 8.89328L1.51269 9.46934ZM1.61202 9.32095C1.66002 9.28152 1.71956 9.25648 1.78334 9.25002L1.58168 7.26021C1.12721 7.30627 0.695881 7.48523 0.342475 7.77555L1.61202 9.32095ZM1.79461 9.24881L8.63064 8.47766L8.40645 6.49027L1.57042 7.26142L1.79461 9.24881ZM9.41719 7.92264L12.7075 1.1822L10.9102 0.304848L7.6199 7.04529L9.41719 7.92264ZM12.71 1.1771C12.7274 1.14089 12.7521 1.108 12.783 1.08053L11.4545 -0.414453C11.2262 -0.211606 11.0403 0.0345199 10.9078 0.309946L12.71 1.1771ZM12.783 1.08053C12.8139 1.05308 12.8504 1.03162 12.8905 1.01776L12.2373 -0.872543C11.9489 -0.772887 11.6828 -0.617317 11.4545 -0.414456L12.783 1.08053ZM12.8905 1.01776C12.9306 1.00391 12.9732 0.998029 13.0159 1.00058L13.1354 -0.995846C12.8309 -1.01407 12.5256 -0.972202 12.2373 -0.872543L12.8905 1.01776ZM13.0159 1.00058C13.0586 1.00314 13.1001 1.01406 13.1379 1.03246L14.0124 -0.766216C13.7379 -0.899688 13.4398 -0.977623 13.1354 -0.995846L13.0159 1.00058ZM13.1465 1.03659C13.21 1.0667 13.2596 1.11676 13.2886 1.17703L15.0909 0.310012C14.8628 -0.16425 14.4786 -0.545085 14.0038 -0.770354L13.1465 1.03659ZM13.2911 1.1822L16.5815 7.92264L18.3788 7.04529L15.0884 0.304848L13.2911 1.1822ZM17.3681 8.47766L24.2054 9.24881L24.4296 7.26142L17.5922 6.49026L17.3681 8.47766ZM24.2167 9.25002C24.2804 9.25648 24.34 9.28152 24.388 9.32095L25.6575 7.77555C25.3041 7.48523 24.8728 7.30627 24.4183 7.26021L24.2167 9.25002ZM24.388 9.32095C24.4359 9.36034 24.4701 9.41219 24.4873 9.46934L26.4026 8.89328C26.2706 8.45473 26.011 8.06592 25.6575 7.77555L24.388 9.32095ZM24.4873 9.46934C24.5045 9.52647 24.5042 9.58712 24.4865 9.64399L26.3966 10.2372C26.5324 9.79966 26.5345 9.33186 26.4026 8.89328L24.4873 9.46934ZM24.4865 9.644C24.4689 9.70098 24.4342 9.75257 24.3858 9.79158L25.6416 11.3482C25.9976 11.061 26.2607 10.6745 26.3966 10.2372L24.4865 9.644ZM24.377 9.79878L22.645 11.2289L23.9185 12.7711L25.6504 11.341L24.377 9.79878Z" fill="#FFFF40" mask="url(#path-1-inside-1_922_5843)"/>
<rect x="14" y="14.5" width="10" height="1" rx="0.5" fill="black" stroke="#FFFF40"/>
<rect x="14" y="22.5" width="10" height="1" rx="0.5" fill="black" stroke="#FFFF40"/>
<rect x="14" y="18.5" width="10" height="1" rx="0.5" fill="black" stroke="#FFFF40"/>
</svg>
```


---
Comment by @dnfield on May 27, 2023
@jonahwilliams these appear to be the pipeline blends...?

---
Comment by @adigladi on May 29, 2023
> Can you share flutter-icon.svg as well?

Here you go:

![flutter-icon](https://github.com/dnfield/flutter_svg/assets/35582133/1d674e3b-821d-483a-9d15-b041663db6a9)


---
Comment by @bdero on May 30, 2023
This looks like another subpass UV mapping issue. There's another open UV mapping issue which may or may not wind up being the same codepath. We should keep this reproduction in mind when triaging it: https://github.com/flutter/flutter/issues/127386 

---
Comment by @chocokoko on Jun 14, 2023
> same issue for me, using impeller too. without colorFilter: <img alt="image" width="49" src="https://user-images.githubusercontent.com/71591796/240755452-b0c79c02-0cc8-49e4-9f3a-c35a20965a9d.png"> with colorFilter (blendMode - srcIn) <img alt="image" width="49" src="https://user-images.githubusercontent.com/71591796/240755593-8b136a1c-cc66-45e3-a68d-5430d17c2801.png"> right fringe of icon is cutted a lil bit used file: ![ic_favourites_active](https://user-images.githubusercontent.com/71591796/240755714-f60f1fb3-ce41-4f84-9022-b1799f0aff1b.svg)

the same icon, and the same bug here


---
Comment by @nileshrathore on Jun 15, 2023
facing the same issue!

---
Comment by @seferdemirci on Jul 20, 2023
same here! any idea or opinion?

---
Comment by @fatherOfLegends on Sep 14, 2023
Same issue

---
Comment by @Mo0Khaled on Sep 19, 2023
same issue

---
Comment by @dnfield on Sep 25, 2023
I have seen multiple reports of this issue, but I _cannot_ reproduce it on my iPhone or macOS desktop with Impeller enabled on a recent commit of Flutter.



---
Comment by @aytunch on Sep 26, 2023
@dnfield try different size values. In my case, for some int length values, I see artifacts, for some they render correctly.

---
Comment by @dnfield on Sep 26, 2023
If you could share a reproduction with the SVG and size values and device information that would be helpful.

---
Comment by @simonNEON on Oct 5, 2023
Any updates on this?

---
Comment by @okanulkr on Oct 17, 2023
It is rendering correctly only with the build argument `--no-enable-impeller`. Any updates?

---
Comment by @SivaramSS on Oct 26, 2023
facing same issue with flutter 3.13.9

---
Comment by @deniskrr on Dec 15, 2023
Any updates?

---
Comment by @sapar-io on Jan 7, 2024
any updates?

---
Comment by @simonNEON on Jan 8, 2024
My current hot fix is to wrap the child with a Transform.scale like shown below. I believe you can play around with the scale to get a better or worse result but this works for me for now. I hope this will be fixed soon.

`Transform.scale(
      scale: 0.999,
      child: child,
  )` 



---
Comment by @appinteractive on Feb 5, 2024
thanks, @simonNEON that actually helped 👍 

---
Comment by @bselwe on Jun 6, 2024
> If you could share a reproduction with the SVG and size values and device information that would be helpful.

@dnfield Try this icon:

```svg
<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.0195 24.3408C6.9502 24.3408 1.92285 19.3242 1.92285 13.2441C1.92285 7.1748 6.93945 2.14746 13.0088 2.14746C19.0889 2.14746 24.1162 7.1748 24.1162 13.2441C24.1162 19.3242 19.0889 24.3408 13.0195 24.3408ZM7.7666 13.2549C7.7666 13.8672 8.20703 14.2969 8.83008 14.2969H11.9668V17.4443C11.9668 18.0566 12.3965 18.4971 13.0088 18.4971C13.6318 18.4971 14.0723 18.0566 14.0723 17.4443V14.2969H17.2197C17.832 14.2969 18.2725 13.8672 18.2725 13.2549C18.2725 12.6318 17.832 12.1914 17.2197 12.1914H14.0723V9.04395C14.0723 8.43164 13.6318 7.98047 13.0088 7.98047C12.3965 7.98047 11.9668 8.43164 11.9668 9.04395V12.1914H8.83008C8.20703 12.1914 7.7666 12.6318 7.7666 13.2549Z" fill="white" style="fill:white;fill:white;fill-opacity:1;"/>
</svg>
```

With the following size and filter it gets clipped on the bottom/right corners:

```dart
Assets.icons.add.svg(
      width: 15,
      colorFilter: const ColorFilter.mode(
        Color.fromRGBO(255, 255, 255, 0.38),
        BlendMode.srcIn,
      ),
    )
```

Flutter: 3.19.4
Device: iPhone 15 Pro 17.4 Simulator
Xcode: 15.4