CODEWITHSUNDEEP
svgflutter
Lucas Buchalla Sesti
Lucas Buchalla Sesti

Reputation: 488

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

Upvotes: 14

Views: 23044

Answers (11)

Pranav N
Pranav N

Reputation: 1

delete your pubspec.lock file and do flutter clean -> flutter pub get-> run your application.

Upvotes: -1

Prawesh Panthi
Prawesh Panthi

Reputation: 348

The issue is that The flutter_svg is unable to load the css written inside style tag. flutter_svg only support inline css . Write inline css instead of inside the style tag

Upvotes: 1

Omar Essam El-Din
Omar Essam El-Din

Reputation: 1873

Instead of cleaning the SVG file , which is not acceptable for app client to clean every SVG he need it

  • Use this SVG Plugin it solve the problem

https://pub.dev/packages/jovial_svg

ScalableImageWidget.fromSISource(
              si: ScalableImageSource.fromSvgHttpUrl(
                Uri.parse(imgPath),
              ),
            ),

Upvotes: 1

abdulaziz alghaili
abdulaziz alghaili

Reputation: 131

Illustrator SVG Configuration

use this configuration in illustrator before you add it to your project.

https://user-images.githubusercontent.com/2842459/62599914-91de9c00-b8fe-11e9-8fb7-4af57d5100f7.png

Upvotes: 3

Waldson Fagundes
Waldson Fagundes

Reputation: 141

I found this site it solved my problem with the svg file that was out of color.

https://iconly.io/tools/svg-cleaner

Upvotes: 5

Sparks
Sparks

Reputation: 592

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.

Upvotes: 3

Bill Foote
Bill Foote

Reputation: 421

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!)

Upvotes: 1

VIjay J
VIjay J

Reputation: 766

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

Upvotes: 0

Alif
Alif

Reputation: 915

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

Upvotes: 29

Had lak
Had lak

Reputation: 1

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

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

Upvotes: 0

Gonzalo Lopez
Gonzalo Lopez

Reputation: 105

try this:

Container(
  child: SvgPicture.asset(
       'assets/images/image.svg',
        fit: BoxFit.contain,
  ),
)

Upvotes: -5

Related Questions