'I'm trying use flutter svg, but load with black svg

I'm trying to use Flutter SVG dependency, i put in the svg in assets, set in pubspec.yaml, and set in my widget, but, the svg load with black container

I've already tried change the svg, and the another svg works fine, but the other not...

    final Widget svg = SvgPicture.asset(assetName, semanticsLabel: 'Acme Logo');

the svg in flutter

Here the svg

My expected response was colored svg like the link in codepen, but i got this

svgflutter


Solution 1:[1]

This is probably happened because of the corrupted SVG files from the internet. I faced this problem earlier and tried many ways to solve it. But finally, I solved it with the help of this software, svgcleaner.

Download the application into your OS, from here

After installation,

  1. import your SVG.

importsvg

  1. Click run.

run

  1. Success! Here you can see your SVGs' cleaned successfully.

success

After cleaning, you can grab those SVG files from the output folder location and add those files into your flutter app without seeing any black coloured SVG.

It works perfectly fine like this.

enter image description here

Solution 2:[2]

I think I am late but this might just help someone. Just make all the styles in your svg image use inline styling otherwise all colors and styling won't be rendered as the tag is not readable by the SvgPicture.

Solution 3:[3]

If You don't have solution try to convert your image from svg to png and use:

Image.asset('assets/images/image.png',)

Solution 4:[4]

Some SVG images uses style tag and if you try to load such image using flutter_svg, image won't render as expected. Currently flutter_svg supports styling through inline styles only and not the style tag that some of SVG files may contain (in my case, I exported image from Adobe XD and it has all styles in tag). When you try to load such SVG images, you will get below error:

======== Exception caught by SVG =================================================================== The following UnimplementedError was thrown in parseSvgElement: The

element is not implemented in this library. Style elements are not supported by this library and the requested SVG may not render as intended. If possible, ensure the SVG uses inline styles and/or attributes (which are supported), or use a preprocessing utility such as svgcleaner to inline the styles for you.

This error mentions to use inline style instead of style tag, you can use svgcleaner (as mentioned in @Alif's answer) or similar utility to convert SVG file with inline styling.

For more detials, refer this link to check SVG compatibility with flutter_svg and handling other use-cases

Solution 5:[5]

I tried this SVG asset with the latest version of jovial_svg, and it works great! Here's the result:

Screen Shot

This version of jovial_svg should be released in a couple of days, but for now it's 1.1.4-rc.4.

(This asset helped me flesh out stylesheet support - thanks!)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alif
Solution 2 Shawn Ashton
Solution 3
Solution 4 VIjay J
Solution 5 Bill Foote

Related Questions