Question 78996 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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(),
    ),

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search