SVG with nested <svg> elements isn't rendering

[bbedward]

Hi,

I have an SVG that is only partially rendering - I'm not sure why. In this case, only the feet of the monkey in the image are rendering with flutter_svg 0.12.0

Problematic SVG: https://www.dropbox.com/s/f5krj9osezwp0sg/test.svg?dl=0

Thanks for the help!

[dnfield]

Can you just paste the content of the SVG here directly? I can't seem to access that link properly.

[bbedward]

Oh sorry, it's quite large so better to not paste it I think.

Try this one: https://cdn.discordapp.com/attachments/490551255727603733/553284336527605770/test.svg

[dnfield]

Your SVG has multiple nested SVG elements. that's not supported at this time.

You could probably get away with just changing all the nested <svg> tags to <g>s. None of them are actually changing the viewBox.

[dnfield]

Ah, no you can't just do a new , but unfortunately this kind of SVG isn't supported. I haven't seen a lot of demand for it, but if you want to create a PR to make it work I'd review it.

[bbedward]

Thanks for the response, I was able to change the format of the SVGs as you suggested and they work without nested

[dnfield]

I'll keep this open to track nested <svg> elements. Right now it's lower priority for me because I'm not sure how many people really want it compared to, say, filter effects. But If it gets enough upvotes here I'll rethink that :)

[ikbendewilliam]

@bbedward I've added your svg to the example project and as golden in https://github.com/dnfield/flutter_svg/pull/754 if this is an issue please let me know and I'll search for another test image 😁

[0xmove]

@ikbendewilliam This SVG ipfs://bafkreidj2yju4jmrzxw4dkzcsxgyfhzwywumxwoqntcpkabjli4njy6lky still doesn't display properly.

[ikbendewilliam]

@0xmove My PR didn't merge as @dnfield moved away from the implementation in favour of the new (and better) vector_graphics package, which is now used behind the scenes AFAIK.

[phamconganh]

@ikbendewilliam i tried you PR to vector_graphics with some small fixes, it shows the nested svgs but in the wrong position (child svg not in the right position) original svg

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="50" height="50" fill="blue" />
  <svg x="70" y="70" width="50" height="50">
    <circle cx="25" cy="25" r="20" fill="red" />
  </svg>
</svg>