flutter_svg icon indicating copy to clipboard operation
flutter_svg copied to clipboard

Patterns with objectBoundingBox not rendering correctly

Open davidgtu opened this issue 3 years ago • 2 comments

I'm using flutter_svg on the latest version (1.1.6) as of writing.

I've been able to render SVGs with this library in the past, but I tried adding SVGs recently and I wasn't able to get it rendering.

I have it added in pubspec.yaml

 assets:
    - assets/svg/discover_more/

and it's generated using flutter pub run build_runner build.

when I try to render it, I see that it's returning the correct string, like "assets/svg/discover_more/discover_more_articles.svg"

However it just renders a white box:

enter image description here

and I'm using it like this:

SvgPicture.asset(image) // image = assets/svg/discover_more/discover_more_articles.svg

I've tried a combination of BoxFits and widths as well and it doesn't show anything besides that.

I remember reading somewhere in the library's repo that it doesn't handle SVGs with <image> tags in them.

For reference, my new SVGs look something like this with a base64 image:

<svg width="1410" height="1069" viewBox="0 0 1410 1069" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0.196289" y="0.604492" width="1408.96" height="1067.84" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_1181_25" transform="scale(0.00190857 0.00251825)"/>
</pattern>
<image id="image0_1181_25" width="541" height="404" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh0AAAGUCAYAAACRN5BqAAAMP2lDQ1BJQ0MgUHJvZmlsZQAASImVVwdYU8kWnltSIbQAAlJCb4KIlABSQmihdwRRCUmAUEIMBBV7WVRw7aICNnRVRLHT7IidRbFhXyyoKOtiwa68SQFd95XvzffNnf/+c+Y/Z86dufcOAOonuGJxLqoBQJ6oUBIb7M8Ym5zCID0BZKABUGAArLm8AjErOjocwDLY/r28uwEQWXvVQab1z/7/WjT5ggIeAEg0xOn8Al4exAcBwKt4YkkhAEQZbz65UCzDsAJtCQwQ4oUynKnAVTKcrsB75TbxsWyIWwEgq3K5kkwA1C5DnlHEy4Qaan0QO4n4QhEA6gyIffLy8vkQp0FsA23EEMv0mek/6GT+TTN9SJPLzRzCirnICzlAWCDO5U79P9Pxv0ternTQhxWsqlmSkFjZnGHebubkh8mwKsS9ovTIKIi1IP4g5MvtIUapWdKQBIU9asgrYMOcAV2InfjcgDCIDSEOEuVGhiv59AxhEAdiuELQKcJCTjzEehAvFBQExiltNknyY5W+0PoMCZul5M9x...."/>
</defs>
</svg>

davidgtu avatar Dec 19 '22 17:12 davidgtu

@davidgtu try to place the def element before the rect tag and check..

GSPrakashNaidu2 avatar Jan 30 '23 07:01 GSPrakashNaidu2

The same problem. I'm using the SvgPicture.network() instance, and my url is image. When I copy this url to browser and check the response, I found the <image /> tag in svg body. Maybe this is the problem.

p29hieu avatar May 09 '23 17:05 p29hieu