Wrong coloring on iOS with Impeller

[Ronan-V]

First of all, I'd like to thank you for your work on this package !

I have some SVGs which are rendered differently when Impeller is running on iOS.
Here are the screenshots:

SVG without Impeller and opacity to 1

SVG with Impeller and opacity to 1

SVG with Impeller and opacity to 0.6

Unfortunately my knowledge of SVGs is limited, so I can't help you much. There seems to be a problem with the coloring of some shapes, which are colored when they shouldn't be. I can't share the SVG code, so please let me know if I can help with more information.

[dnfield]

Can you share the SVGs that fail to render correctly, as well as the exact code you're using to do the rendering?

Can you also share whether this reproduces on simulator only or on physical device as well? Simulators have some different rendering characteristics and sometimes the Metal emulation doesn't really work quite correctly (as in, it works more like Metal on desktop than Metal on iOS, but also not quite like Metal on desktop).

[Ronan-V]

I tried on both simulator and physical device and the result is the same.

Here is the SVG I used:

Details

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve"> <path d="M361.187 88.16h-1.002a7.514 7.514 0 1 0 0 15.028h1.002c4.151 0 7.514-3.364 7.514-7.514s-3.363-7.514-7.514-7.514zm32.058 0h-1.002a7.514 7.514 0 1 0 0 15.028h1.002c4.151 0 7.514-3.364 7.514-7.514s-3.363-7.514-7.514-7.514zm32.058 0h-1.002a7.514 7.514 0 1 0 0 15.028h1.002c4.151 0 7.514-3.364 7.514-7.514s-3.363-7.514-7.514-7.514zm-32.058-24.044h-1.002a7.514 7.514 0 1 0 0 15.028h1.002a7.513 7.513 0 0 0 7.514-7.514 7.513 7.513 0 0 0-7.514-7.514zm-32.058 48.088h-1.002a7.514 7.514 0 1 0 0 15.028h1.002c4.151 0 7.514-3.364 7.514-7.514s-3.363-7.514-7.514-7.514zm32.058 0h-1.002a7.514 7.514 0 1 0 0 15.028h1.002c4.151 0 7.514-3.364 7.514-7.514s-3.363-7.514-7.514-7.514zm32.058 0h-1.002a7.514 7.514 0 1 0 0 15.028h1.002c4.151 0 7.514-3.364 7.514-7.514s-3.363-7.514-7.514-7.514zm-64.116 24.043h-1.002a7.514 7.514 0 0 0 0 15.028h1.002a7.513 7.513 0 0 0 7.514-7.514 7.513 7.513 0 0 0-7.514-7.514zm32.058 0h-1.002a7.514 7.514 0 0 0 0 15.028h1.002a7.513 7.513 0 0 0 7.514-7.514 7.513 7.513 0 0 0-7.514-7.514zm32.058 0h-1.002a7.514 7.514 0 0 0 0 15.028h1.002a7.513 7.513 0 0 0 7.514-7.514 7.513 7.513 0 0 0-7.514-7.514zm-32.058 24.044h-1.002a7.514 7.514 0 1 0 0 15.028h1.002a7.513 7.513 0 0 0 7.514-7.514 7.513 7.513 0 0 0-7.514-7.514zm113.326 281.374c-6.114-32.552-20.473-78.429-54.165-112.122-10.545-10.545-22.971-19.894-36.929-27.787a7.513 7.513 0 1 0-7.397 13.08c12.776 7.225 24.115 15.749 33.699 25.333 24.703 24.702 38.386 56.973 45.942 86.333a78.725 78.725 0 0 0-34.242 16.529l-23.632-23.632 6.022-6.022a7.513 7.513 0 1 0-10.626-10.625l-6.021 6.021-17.71-17.709 6.021-6.021a7.513 7.513 0 1 0-10.626-10.625l-6.021 6.021-17.709-17.709 6.021-6.021a7.513 7.513 0 1 0-10.626-10.625l-6.021 6.021-23.633-23.633a78.702 78.702 0 0 0 16.547-34.323c9.047 2.328 18.366 5.236 27.656 8.88a7.515 7.515 0 0 0 5.489-13.99C333.857 267.555 279.559 270 277.272 270.112a7.512 7.512 0 0 0-7.127 7.128c-.057 1.127-1.308 28.003 5.266 63.01 6.114 32.552 20.473 78.429 54.166 112.122 33.694 33.694 79.57 48.053 112.122 54.166 24.97 4.69 45.801 5.397 56.104 5.397 2.617 0 5.559.27 8.146-.297 3.27-.716 5.722-3.62 5.89-6.962.055-1.126 1.306-28.002-5.268-63.011zm-221.502-156.64c10.405.059 31.303.903 55.743 5.781-2.535 12.372-8.557 23.585-17.58 32.606-8.922 8.923-20.035 14.936-32.286 17.513-4.92-24.52-5.799-45.481-5.877-55.9zm55.132 156.719c-24.658-24.656-38.336-56.856-45.902-86.173a78.854 78.854 0 0 0 33.99-16.477l23.634 23.634-6.021 6.021a7.513 7.513 0 0 0 0 10.625c2.895 2.894 7.731 2.894 10.626 0l6.021-6.021 17.709 17.709-6.021 6.021a7.513 7.513 0 0 0 0 10.625c2.895 2.894 7.731 2.894 10.626 0l6.021-6.021 17.709 17.709-6.021 6.021a7.513 7.513 0 0 0 0 10.625c2.895 2.895 7.731 2.894 10.626 0l6.021-6.021 23.632 23.632a78.697 78.697 0 0 0-16.481 34.025c-29.298-7.562-61.481-21.246-86.169-45.934zm100.821 49.29c2.568-12.261 8.564-23.367 17.515-32.319 9-9 20.186-15.018 32.528-17.563 4.892 24.446 5.766 45.334 5.845 55.733-10.426-.071-31.377-.935-55.888-5.851zM119.749 320.582c-39.497 0-71.63 32.133-71.63 71.63s32.133 71.63 71.63 71.63 71.63-32.133 71.63-71.63-32.133-71.63-71.63-71.63zM77.823 430.199c-9.115-10.051-14.677-23.381-14.677-37.987a56.243 56.243 0 0 1 7.972-28.922c10.757 9.19 17.073 22.672 17.073 36.937 0 10.982-3.654 21.444-10.368 29.972zm41.926 18.615c-11.197 0-21.636-3.282-30.431-8.914 9.003-11.241 13.901-25.11 13.901-39.674 0-18.86-8.409-36.691-22.737-48.724 10.186-9.829 24.029-15.893 39.267-15.893s29.081 6.064 39.267 15.893c-14.328 12.034-22.737 29.864-22.737 48.724 0 14.564 4.898 28.433 13.901 39.675a56.25 56.25 0 0 1-30.431 8.913zm41.926-18.616c-6.714-8.529-10.369-18.989-10.369-29.971 0-14.264 6.316-27.747 17.073-36.937a56.246 56.246 0 0 1 7.972 28.922c.001 14.605-5.56 27.935-14.676 37.986zM135.778 0C60.927 0 .032 60.896.032 135.746s60.896 135.746 135.746 135.746 135.746-60.896 135.746-135.746S210.629 0 135.778 0zm111.108 88.552a119.699 119.699 0 0 1 6.541 20.086l-9.971-7.877 3.43-12.209zM236.66 69.524a7.598 7.598 0 0 0-.234.697l-7.704 27.426-43.309 14.072-42.12-28.081V35.579l24.394-16.263c28.626 7.853 53.032 26.005 68.973 50.208zm-61.888 54.662-12.318 43.123a7.457 7.457 0 0 0-2.418.996h-48.514a7.48 7.48 0 0 0-2.418-.996l-12.32-43.123c.153-.315.297-.636.408-.979.102-.316.175-.632.234-.95l38.353-25.569 38.353 25.569c.059.318.132.634.234.95.109.343.253.665.406.979zM135.779 15.027c3.554 0 7.072.163 10.55.467l-10.55 7.034-10.55-7.034a121.91 121.91 0 0 1 10.55-.467zm-31.854 4.274c.202.167.414.328.637.477l23.702 15.801v48.06l-42.12 28.081-43.31-14.073-7.911-28.164c15.952-24.198 40.368-42.341 69.002-50.182zM24.67 88.552l3.43 12.208-9.971 7.877a119.72 119.72 0 0 1 6.541-20.085zm-9.612 47.194a123.6 123.6 0 0 1 .14-5.726c.215-.137.436-.261.64-.423l22.352-17.659 43.501 14.134 14.629 51.2-25.498 35.095-29.212-1.178c-16.603-20.682-26.552-46.92-26.552-75.443zm41.584 91.089 12.587.508 4.385 11.85a121.53 121.53 0 0 1-16.972-12.358zm121.76 21.851c-13.261 5.021-27.626 7.779-42.625 7.779-15.017 0-29.4-2.765-42.676-7.799a7.446 7.446 0 0 0-.233-.75L82.98 221.2l27.512-37.867h50.573l27.512 37.867-10.175 27.486zm19.539-9.493 4.385-11.85 12.587-.507a121.442 121.442 0 0 1-16.972 12.357zm31.974-27.967a7.44 7.44 0 0 0-.717-.007l-28.464 1.148-25.498-35.095 14.629-51.2 43.501-14.134 22.996 18.168c.086 1.869.136 3.749.136 5.64-.001 28.54-9.962 54.794-26.583 75.48z" fill="#5d2bff" data-original="#000000" opacity="1"/> </svg>

For the code, we can simplify by using the package's example svg_string.dart and only replacing the content of the _flutterLogoString with the svg code.

svg_string example

[dnfield]

Great, thanks! This is a bug in Impeller's path rendering code.

[Ronan-V]

You're welcome ! Ok, should I post an issue somewhere else then ?