CODEWITHSUNDEEP
imagesvgflutter
john
john

Reputation: 439

SVG picture is returning black image in flutter inspite of giving a color image from assests

here is the code where i m going to add the svgpicture but i m getting black image new Container child: new SvgPicture.asset('assets/camera.svg') ),

this is mine camera.svg file

<svg xmlns="http://www.w3.org/2000/svg" width="13.607" height="13.608" viewBox="0 0 13.607 13.608">
    <defs>
        <style>
            .cls-1{}
        </style>
    </defs>
    <g id="Group_5" data-name="Group 5" transform="translate(-57.8 -130.498)">
        <g id="Group_4" data-name="Group 4">
            <g id="Group_3" data-name="Group 3">
                <path id="Path_2" d="M69.415 139.294a6.792 6.792 0 0 0-2.586-1.621 3.933 3.933 0 1 0-4.452 0 6.814 6.814 0 0 0-4.577 6.433h1.063a5.741 5.741 0 1 1 11.481 0h1.063a6.763 6.763 0 0 0-1.992-4.812zM64.6 137.3a2.87 2.87 0 1 1 2.87-2.87 2.874 2.874 0 0 1-2.87 2.87z" class="cls-1" data-name="Path 2"/>
            </g>
        </g>
    </g>
</svg>

Upvotes: 43

Views: 42530

Answers (12)

Florian K
Florian K

Reputation: 2148

If you export your SVG from Adobe Illustrator, it will by default have CSS style which is not supported by flutter_svg

here are the step to follow to have SVG working for this package :

  • Click on image to export, then "export selection"
  • Click on settingsenter image description here
  • Select SVG and choose "inline style" enter image description here

Upvotes: 0

Ryadh Hanafi
Ryadh Hanafi

Reputation: 331

I Solve this problem by removing this part : 
 <defs>
    <style>
        .cls-1{}
    </style>
</defs>

and add fill:"#hexColor" inside path for example :

   <path id="Path_2"fill="#17be78"

Upvotes: 0

Ledjon
Ledjon

Reputation: 123

After trying a lot of options resizing using this site https://www.iloveimg.com/resize-image/resize-svg solved the issue. It will generate the new svg and style is all inline.

Upvotes: 0

Parth Panchal
Parth Panchal

Reputation: 487

Please follow below steps to resolve this error:

  1. copy your svg picture code.
  2. convert your svg code to inline CSS using this tool css-inliner
  3. paste your new svg code to the existing svg file
  4. restart the app, this will resolve your problem.

This is because the flutter_svg package does not render the internal CSS of your svg code.

Upvotes: 2

Sangeetha Sakthivel
Sangeetha Sakthivel

Reputation: 439

Even I faced this problem in flutter, the problem is with the SVG file and I cleaned the SVG file using this website https://jakearchibald.github.io/svgomg/ and it worked well then.

Upvotes: 3

Ait Bri
Ait Bri

Reputation: 587

Use https://vecta.io/nano It can remove the unsupported tags such as and compress the svg file at certain level

Upvotes: 20

Varun Rajput
Varun Rajput

Reputation: 346

Nothing you have to do buddy! just open that svg file in your android studio. and remove style attribute from there.

Upvotes: 0

Aravind Siruvuru
Aravind Siruvuru

Reputation: 1079

this is cause of inline css .....

 <style>
        .cls-1{}
    </style>

remove this lines and try ... your problem will be solved... flutter svg cant read inline CSS

Upvotes: 6

foolishRobot
foolishRobot

Reputation: 379

flutter_svg can not understand Internal or Embedded CSS.

Hence you need to remove the internal css and write inline css.

Example:- <path style="fill:#566e83;" ...

Upvotes: 27

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 for me.

enter image description here

Upvotes: 47

Hosar
Hosar

Reputation: 5292

First using the svg image you have provided I'm getting the following an error on the console

I/flutter ( 7705): ══╡ EXCEPTION CAUGHT BY SVG ╞═══════════════════════════════════════════════════════════════════════ I/flutter ( 7705): The following UnimplementedError was thrown in parseSvgElement: I/flutter ( 7705): The element is not implemented in this library.

You can remove this section on the image to resolve that issue:

.cls-1{}

Second, the image is being displayed properly, just verify you have added the proper assets registration on pubspec.yaml file, as follow.

assets: - assets/camera.svg

Which means you have a folder called assets at a root level.

Third the image is not a camera picture is just like a person icon.
Use as follow and you will see:

Container(
        height: 120.0,
        width: 120.0,
        color: Colors.yellow,
        child: SvgPicture.asset('assets/camera.svg'),
      )

I put a Yellow color background to show a better result.
Hope this help.

Upvotes: 3

Jonathan Gagne
Jonathan Gagne

Reputation: 4379

Edit the style like I did below in order to change the color:

<svg xmlns="http://www.w3.org/2000/svg" width="13.607" height="13.608" viewBox="0 0 13.607 13.608" style="fill: #ff0000;">
    <defs>
        <style>
            .cls-1{}
        </style>
    </defs>
    <g id="Group_5" data-name="Group 5" transform="translate(-57.8 -130.498)">
        <g id="Group_4" data-name="Group 4">
            <g id="Group_3" data-name="Group 3">
                <path id="Path_2" d="M69.415 139.294a6.792 6.792 0 0 0-2.586-1.621 3.933 3.933 0 1 0-4.452 0 6.814 6.814 0 0 0-4.577 6.433h1.063a5.741 5.741 0 1 1 11.481 0h1.063a6.763 6.763 0 0 0-1.992-4.812zM64.6 137.3a2.87 2.87 0 1 1 2.87-2.87 2.874 2.874 0 0 1-2.87 2.87z" class="cls-1" data-name="Path 2"/>
            </g>
        </g>
    </g>
</svg>

Upvotes: 3

Related Questions