SVG color not working on Safari iOS

[riccardoch]

Thanks for the great library! Everything works fine except tinting on Safari app on iOS (on Chrome app it works).

SvgPicture.asset(
        "assets/images/custom/${shortcut.iconName}.svg",
        color: contrastColor.withOpacity(0.8),
        width: 36,
        height: 36);

Here an example of SVG I'm using:

<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    id="vector">
    <path
        id="path_1"
        d="M 19 18 C 17.346 18 16 16.654 16 15 C 16 13.346 17.346 12 19 12 C 20.654 12 22 13.346 22 15 C 22 16.654 20.654 18 19 18 Z M 19 13 C 17.897 13 17 13.897 17 15 C 17 16.103 17.897 17 19 17 C 20.103 17 21 16.103 21 15 C 21 13.897 20.103 13 19 13 Z"
        fill="#000000"/>
    <path
        id="path_11"
        d="M 18.682 9.002 C 17.95 8.418 14.607 6 9.5 6 C 8.534 6 6.069 6.099 3.848 7 L 1.5 7 C 1.298 7 1.115 7.122 1.038 7.309 C 0.96 7.496 1.003 7.71 1.146 7.854 L 1.634 8.342 C 0.549 9.316 0 10.544 0 12 C 0 13.717 0.155 16 1.5 16 L 1.711 16 C 1.577 15.693 1.5 15.356 1.5 15 C 1.5 13.619 2.619 12.5 4 12.5 C 5.381 12.5 6.5 13.619 6.5 15 C 6.5 15.356 6.423 15.693 6.289 16 L 16.711 16 C 16.577 15.693 16.5 15.356 16.5 15 C 16.5 13.619 17.619 12.5 19 12.5 C 20.381 12.5 21.5 13.619 21.5 15 C 21.5 15.356 21.423 15.693 21.289 16 L 22.5 16 C 23.104 16 24 15.37 24 14.5 L 24 12.5 C 24 11.552 22.363 9.081 18.682 9.002 Z M 15.5 11 L 10.5 11 C 10.224 11 10 10.776 10 10.5 L 10 8.5 C 10 8.224 10.224 8 10.5 8 C 10.776 8 11 8.224 11 8.5 L 11 10 L 15.5 10 C 15.776 10 16 10.224 16 10.5 C 16 10.776 15.776 11 15.5 11 Z"
        fill="#000000"/>
    <path
        id="path_12"
        d="M 4 18 C 2.346 18 1 16.654 1 15 C 1 13.346 2.346 12 4 12 C 5.654 12 7 13.346 7 15 C 7 16.654 5.654 18 4 18 Z M 4 13 C 2.897 13 2 13.897 2 15 C 2 16.103 2.897 17 4 17 C 5.103 17 6 16.103 6 15 C 6 13.897 5.103 13 4 13 Z"
        fill="#000000"/>
</svg>

[dnfield]

This is almost certainly a bug in flutter web. Safari probably doesn't have color filtering enabled

[bardia-mhd]

Your color will work in Safari if you wrap a defs tag. It seems that wrapping your references in defs is encouraged but not obligatory. I think this is a bug in safari.

[riccardoch]

This is almost certainly a bug in flutter web. Safari probably doesn't have color filtering enabled

Thanks for the reply! A bug with SVG? Because with PNG it works.

[riccardoch]

@bardia-mhd do you mean this?

So using the SVG I've posted I need something like:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="vector">
    <defs>
        <path id="path_1"
            d="M 19 18 C 17.346 18 16 16.654 16 15 C 16 13.346 17.346 12 19 12 C 20.654 12 22 13.346 22 15 C 22 16.654 20.654 18 19 18 Z M 19 13 C 17.897 13 17 13.897 17 15 C 17 16.103 17.897 17 19 17 C 20.103 17 21 16.103 21 15 C 21 13.897 20.103 13 19 13 Z"
            fill="#000000" />
        <path id="path_11"
            d="M 18.682 9.002 C 17.95 8.418 14.607 6 9.5 6 C 8.534 6 6.069 6.099 3.848 7 L 1.5 7 C 1.298 7 1.115 7.122 1.038 7.309 C 0.96 7.496 1.003 7.71 1.146 7.854 L 1.634 8.342 C 0.549 9.316 0 10.544 0 12 C 0 13.717 0.155 16 1.5 16 L 1.711 16 C 1.577 15.693 1.5 15.356 1.5 15 C 1.5 13.619 2.619 12.5 4 12.5 C 5.381 12.5 6.5 13.619 6.5 15 C 6.5 15.356 6.423 15.693 6.289 16 L 16.711 16 C 16.577 15.693 16.5 15.356 16.5 15 C 16.5 13.619 17.619 12.5 19 12.5 C 20.381 12.5 21.5 13.619 21.5 15 C 21.5 15.356 21.423 15.693 21.289 16 L 22.5 16 C 23.104 16 24 15.37 24 14.5 L 24 12.5 C 24 11.552 22.363 9.081 18.682 9.002 Z M 15.5 11 L 10.5 11 C 10.224 11 10 10.776 10 10.5 L 10 8.5 C 10 8.224 10.224 8 10.5 8 C 10.776 8 11 8.224 11 8.5 L 11 10 L 15.5 10 C 15.776 10 16 10.224 16 10.5 C 16 10.776 15.776 11 15.5 11 Z"
            fill="#000000" />
        <path id="path_12"
            d="M 4 18 C 2.346 18 1 16.654 1 15 C 1 13.346 2.346 12 4 12 C 5.654 12 7 13.346 7 15 C 7 16.654 5.654 18 4 18 Z M 4 13 C 2.897 13 2 13.897 2 15 C 2 16.103 2.897 17 4 17 C 5.103 17 6 16.103 6 15 C 6 13.897 5.103 13 4 13 Z"
            fill="#000000" />
    </defs>

    <use x="0" y="0" xlink:href="#path_1"/>
    <use x="0" y="0" xlink:href="#path_11"/>
    <use x="0" y="0" xlink:href="#path_12"/>
</svg>

[dnfield]

Can you share a full working reproduction of this? I can probably test it out locally on Safari.

Also, are you seeing this on desktop or mobile? And are you using CanvasKit backend or HTML renering backend?

[riccardoch]

The issue is on Safari for iOS, like I wrote in the first post on Chrome iOS app everything works as expected. To reproduce the issue is enough creating a page with SvgPicture Widget.

I've built the app using auto setting, so it uses html for mobile and canvasKit for desktop

[riccardoch]

I've tried forcing canvasKit and now It's working also on Safari for iOS!

[dnfield]

Yeah. The html backend probably doesn't have color filters implemented for safari

[libeuk]

Any update on this stated issue ?