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

Question

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>

Answer 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,
import your SVG.
Click run.
Success! Here you can see your SVGs' cleaned successfully.
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.

Answer 2

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;" ...

Answer 3

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

Answer 4

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

Answer 5

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>

Answer 6

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.

Answer 7

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.

Answer 8

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

Answer 9

Please follow below steps to resolve this error:
copy your svg picture code.
convert your svg code to inline CSS using this tool css-inliner
paste your new svg code to the existing svg file
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.