Rendering issue with network svg

[rajeshzmoke]

the code used

                       ScalableImageWidget.fromSISource(
                              si: ScalableImageSource.fromSvgHttpUrl(Uri.parse(url)),
                              alignment: Alignment.center,
                            ),

the url is

https://cdn.shopify.com/s/files/1/0037/7690/5283/files/vpq-sweat-lot.svg?v=1622450612

the downloaded svg string looks like this

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 87.5 82.4" style="enable-background:new 0 0 87.5 82.4;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#9E6D44;stroke-width:2.5;}
    .st1{fill:none;stroke:#9E6D44;stroke-width:2.5;stroke-linecap:round;}
    .st2{fill:none;}
    .st3{fill:none;stroke:#9E6D44;}
    .st4{fill:none;stroke:#9E6D44;stroke-width:2;stroke-linecap:round;stroke-miterlimit:4.0005;}
    .st5{display:none;}
    .st6{display:inline;}
    .st7{fill:none;stroke:#9E6D44;stroke-width:3;}
</style>
<g id="Layer_1_00000093146647741713888140000015775606705556141209_">
    <g id="Group_694_3_">
        <path id="Path_719_3_" class="st0" d="M5.7,35h76.2"/>
        <polygon class="st0" points="13.3,79 3.1,62.2 9,62.2 9,41.9 17.7,41.9 17.7,62.2 23.4,62.2       "/>
        <path class="st0" d="M33.9,62.1h5.8V41.8h8.6v20.3h5.8L44,79.1L33.9,62.1z"/>
        <polygon class="st0" points="74.5,79 64.4,62.2 70.1,62.2 70.1,41.9 78.8,41.9 78.8,62.2 84.7,62.2        "/>
        <g id="Group_693_2_" transform="translate(18.726 0)">
            <path id="Path_774_2_" class="st1" d="M24.4,2.8c0.9,4.5,2.7,8.6,5.5,12.4c4.5,5.6-1,14.4-7.6,12.9c-3.7-0.7-6.6-3.7-7.1-7.6
                C15.2,20.4,13.7,11.5,24.4,2.8"/>
            <g id="Ellipse_128_2_" transform="translate(4.777 15.351)">
                <circle class="st2" cx="17.5" cy="8.6" r="0.9"/>
                <circle class="st3" cx="17.5" cy="8.6" r="0.1"/>
            </g>
            <path id="Path_775_2_" class="st4" d="M28.2,18.7c0,0-0.6,4.5-3.7,4.9"/>
        </g>
    </g>
</g>
<g id="Layer_2_00000114066021451201548530000010568757304227395741_" class="st5">
    <g class="st6">
        <g>
            <path id="Path_695_2_" class="st7" d="M43.9,37.7C55.3,37.7,64,38,64,38c3.3,1.1,6.1,3.7,7.2,7.1c1.9,4.7,1,14.1,1,33.2"/>
            <path id="Path_698_2_" class="st7" d="M43.9,37.7c-11.4,0-20.1,0.3-20.1,0.3c-3.3,1.1-6.1,3.7-7.2,7.1c-1.9,4.7-1,14.1-1,33.2"/>
        </g>
        <path id="Path_696" class="st7" d="M25.9,54.4v24.7"/>
        <path id="Path_697" class="st7" d="M61.2,54.4v24.7"/>
        <circle class="st7" cx="43.9" cy="17.7" r="14.1"/>
    </g>
</g>
</svg>

Issue: the svg is not rendering properly

i did go through the readme but i'm not an expert on svgs and styles

[zathras]

There's not enough here to conclude that this is a bug. You'll need to do some work on your side, and narrow it down. Based on what you've provided, it could be a bug, or it could be a feature that isn't implemented. Chances are quite high it's something that's not implemented, as described in the readme.

One starting point is to look at the error messages the library generates (the warnings); that might help to identify what part of your SVG is triggering this behavior. If it's not immediately obvious from that, standard debugging techniques apply.

Please re-submit when you've done enough investigation to say what part of the SVG spec is at issue, and when you can provide a reasonably minimal asset that shows the problem.

[rajeshzmoke]

I/flutter (23993):     Ignoring x attribute(s) in svg
I/flutter (23993):     Ignoring space attribute(s) in svg
I/flutter (23993):     Ignoring y attribute(s) in svg
I/flutter (23993):     Ignoring enable-background attribute(s) in svg
I/flutter (23993):     Ignoring x attribute(s) in svg
I/flutter (23993):     Ignoring space attribute(s) in svg
I/flutter (23993):     Ignoring y attribute(s) in svg
I/flutter (23993):     Ignoring enable-background attribute(s) in svg
I/flutter (23993):     Ignoring x attribute(s) in svg
I/flutter (23993):     Ignoring space attribute(s) in svg
I/flutter (23993):     Ignoring y attribute(s) in svg
I/flutter (23993):     Ignoring enable-background attribute(s) in svg

i get these log messages in console

so i'm guessing its related to this?

CSS attributes that don't have a corresponding SVG attribute generally are not supported, e.g. background and transform-origin are not.

[zathras]

Possibly. That's certainly something you can investigate. Feel free to open an issue if you're able to narrow it down to something specific.