SVG in Flutter Exception caught by SVG

Question

I am using the latest library update

dependencies:
  flutter_svg: ^0.17.4

Container( height: 150, //color: Colors.blue, width: screenWidth * 0.80, child: SvgPicture.asset( "assets/logo-violeta-NVIAME-login.svg", color: Color(0xFF6327f8), ), ),
------------------------------------------------------------------------

My code worked but I did Hot Restart .. and well I get the following exception

The <style> 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.


Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#60537(), name: "assets/logo-violeta-NVIAME-login.svg", colorFilter: ColorFilter.mode(Color(0xff6327f8), BlendMode.srcIn))
════════════════════════════════════════════════════════════════════════════════
I/flutter (26058): unhandled element metadata; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#60537(), name: "assets/logo-violeta-NVIAME-login.svg", colorFilter: ColorFilter.mode(Color(0xff6327f8), BlendMode.srcIn))

Answer 1

My workaround: drag and drop the svg files to the Figma design tool and then export all of them to get the standard error-free svg files.

Answer 2

I faced this issue too, then I used 'SVG Cleaner' app to clean and inline SVG code. By the end it worked properly ^_*

Answer 3

It is actually the SVG image that you've used.

As mentioned in the error:

The <style> 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.

flutter_svg package does not support svg with internal css like:

 <style>
       .....
  </style>

Here is an open GitHub issue that indicates it is not yet supported.

Some of the options that you can actually try:

• Remove the internal css and write inline css
• Use different svg picture
• Use a preprocessing utility such as svgcleaner to inline the styles for you. Which is exactly the one you've found as mentioned in the comments. See also this SO post.
• Use this tool https://jakearchibald.github.io/svgomg/

But the easiest way is to have your design tool not use CSS if possible.