flutter_svg is not rendering my assets. Is there something wrong with my SVG files?-CodePudding

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:

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>

CodePudding user response：

So what was not supported was the <pattern> tag in my SVGs.

Using this issue comment, I manually exported my assets to PNG, ran it through that tool, and replaced my SVGs in my project with that. It basically removed the <pattern> tag.

CodePudding user response：

When you have to add any changes in pubspec.yaml file you have to restart your app, there is a spacing issue in the YAML file also Do this type of Error if it's not working then you have to create an Image Constant and add an image path if images are present in the Asset folder. It will work fine.

*** Dependency ***

flutter_svg: ^1.1.6

**** Code **** SvgPicture.network( uriName, placeholderBuilder: (BuildContext context) => Container( padding: const EdgeInsets.all(30.0), child: const CircularProgressIndicator(), ),