Svgs with colorFilter applied are not rendering correctly with Impeller

[adigladi]

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.

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.

Here's also a sample which shows the issue (a svg path needs to be provided though):

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,
          ],
        ),
      ),
    );
  }
}

[dnfield]

Can you share flutter-icon.svg as well?

[leredirect]

same issue for me, using impeller too. without colorFilter:

with colorFilter (blendMode - srcIn)

right fringe of icon is cutted a lil bit used file:

[Venusdjinni]

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>

[dnfield]

@jonahwilliams these appear to be the pipeline blends...?

[adigladi]

Can you share flutter-icon.svg as well?

Here you go:

[bdero]

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

[chocokoko]

same issue for me, using impeller too. without colorFilter: with colorFilter (blendMode - srcIn) right fringe of icon is cutted a lil bit used file:

the same icon, and the same bug here

[nileshrathore]

facing the same issue!

[seferdemirci]

same here! any idea or opinion?

[fatherOfLegends]

Same issue

[Mo0Khaled]

same issue

[dnfield]

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.

[aytunch]

@dnfield try different size values. In my case, for some int length values, I see artifacts, for some they render correctly.

[dnfield]

If you could share a reproduction with the SVG and size values and device information that would be helpful.

[simonNEON]

Any updates on this?

[okanulkr]

It is rendering correctly only with the build argument --no-enable-impeller. Any updates?

[SivaramSS]

facing same issue with flutter 3.13.9

[deniskrr]

Any updates?

[sapar-io]

any updates?

[simonNEON]

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, )

[appinteractive]

thanks, @simonNEON that actually helped 👍

[bselwe]

If you could share a reproduction with the SVG and size values and device information that would be helpful.

@dnfield Try this icon:

<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:

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