The <style> element is not implemented in this library

[ScrivNetwork]

Need implement

[dnfield]

I don't plan to do this, largely because it would require implementing the entire CSS spec to do so, and becuase the cascading rules would become even more complicated.

There are tools that can help with this, such as https://github.com/RazrFalcon/resvg/tree/master/usvg

All of that said, I'd entertain a patch for it if someone else wants to work on it.

[unschool]

This tool worked in my case, https://github.com/RazrFalcon/svgcleaner

[kaige-cai]

No, Just modify the fill of attr to label like <svg><path fill="#fff" xxx="0000"/></svg>

[sahiljangra]

If you are using CorelDRAW to Create SVG Image then Use these configuration:

CorelDRAW Configuration Compatibility : SVG1.0/1.1 Encoding Method : Unicode - UTF-8 Styling Option : Presentation Attributors Bitmap Export Type : Embeded

And for Adobe Illustrator Styling : Presentation Attributors

[piuskamil]

this tool works for me https://jakearchibald.github.io/svgomg/

[masfranzhuo]

This tool worked in my case, https://github.com/RazrFalcon/svgcleaner

thanks, it works on my case

[ShadyBoshra2012]

This tool worked in my case, https://github.com/RazrFalcon/svgcleaner

Thanks, that worked for me too.

[aawizard]

Thanks :)

this tool works for me https://jakearchibald.github.io/svgomg/

[thealiflab]

You can watch this answer from StackOverflow

https://stackoverflow.com/a/62748066/11681472

[yourshinsuke]

@piuskamil Did you use default settings and pushed [RESET ALL] button?

[piuskamil]

@yourshinsuke yes i used default setting.

[erickfiori]

This tool worked in my case, https://github.com/RazrFalcon/svgcleaner

It worked! Thank You!

[msgtobala]

This tool worked in my case, https://github.com/RazrFalcon/svgcleaner

It worked! Thank You!

?? what we have to do?

[cdmunoz]

Even using an external tool such as Jake Archibald's, if the svg is using a <style> it will fail. Usually style is written as follows:

<style>.st0{fill:#f47521}</style>

Then it's references from a path:

<path class="st0" ...... />

For this cases, you can just remove the style tag, the class within path and replace the latter fro a fill attribute with the proper color, and that is all:

<path fill="#f47521" ...... />

[kadnan0900]

This tool worked in my case, https://github.com/RazrFalcon/svgcleaner

It worked! Thank You!

Can you please explain how you solved this issue ?

[hadasacwebit]

This tool worked in my case, https://github.com/RazrFalcon/svgcleaner

It worked! Thank You!

Can you please explain how you solved this issue ?

Download and install the application to your computer. and then..

[Saransh-cpp]

Even using an external tool such as Jake Archibald's, if the svg is using a <style> it will fail. Usually style is written as follows:

<style>.st0{fill:#f47521}</style>

Then it's references from a path:

<path class="st0" ...... />

For this cases, you can just remove the style tag, the class within path and replace the latter fro a fill attribute with the proper color, and that is all:

<path fill="#f47521" ...... />

Good day Sir, can you please guid me as to how to fix my SVG's style? The SVG is as mentioned below:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.32 98.2">
    <defs>
        <style>.cls-1,.cls-2{fill:none;stroke:#1f9fff;stroke-miterlimit:10;stroke-width:11px;}.cls-2{stroke-linecap:round;}</style>
    </defs>
    <title>doclenselightsmall</title>
    <polyline class="cls-1" points="66.7 5.5 94.83 5.5 94.83 31.18"/>
    <polyline class="cls-1" points="33.63 92.7 5.5 92.7 5.5 67.02"/>
    <polyline class="cls-1" points="66.7 92.7 94.83 92.7 94.83 67.02"/>
    <polyline class="cls-1" points="33.63 5.5 5.5 5.5 5.5 31.18"/>
    <line class="cls-2" x1="22.37" y1="26.75" x2="78.32" y2="26.75"/>
    <line class="cls-2" x1="22.37" y1="48.72" x2="78.32" y2="48.72"/>
    <line class="cls-2" x1="22.37" y1="70.7" x2="78.32" y2="70.7"/>
</svg>

[dnfield]

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

Alternatively, using svgcleaner works on this, and produces:

<svg viewBox="0 0 100.32 98.2" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#1f9fff" stroke-miterlimit="10" stroke-width="11"><path d="m66.7 5.5h28.13v25.68"/><path d="m33.63 92.7h-28.13v-25.68"/><path d="m66.7 92.7h28.13v-25.68"/><path d="m33.63 5.5h-28.13v25.68"/><g stroke-linecap="round"><path d="m22.37 26.75h55.95"/><path d="m22.37 48.72h55.95"/><path d="m22.37 70.7h55.95"/></g></g></svg>

[Saransh-cpp]

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

Alternatively, using svgcleaner works on this, and produces:

<svg viewBox="0 0 100.32 98.2" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#1f9fff" stroke-miterlimit="10" stroke-width="11"><path d="m66.7 5.5h28.13v25.68"/><path d="m33.63 92.7h-28.13v-25.68"/><path d="m66.7 92.7h28.13v-25.68"/><path d="m33.63 5.5h-28.13v25.68"/><g stroke-linecap="round"><path d="m22.37 26.75h55.95"/><path d="m22.37 48.72h55.95"/><path d="m22.37 70.7h55.95"/></g></g></svg>

Okay! Thank you so much for the conversion and the tip:)!

[fricred]

well, now the problem is, network load, like "https://devdc.mycollab.co/jira/secure/projectavatar?avatarId=10324" for users, projects etc.... (dynamic) (jira server implementation), we. have no control of this svg images, so?? any ideas?

[JanDrabik]

@fricred Having exactly same issue; network load seems impossible to fix on the run, Im also looking for solution to this problem.

[fricred]

@fricred Having exactly same issue; network load seems impossible to fix on the run, Im also looking for solution to this problem.

had to download and clean the svg and make a component to check is in assets folder or try network load :( , like 50 avatars sigh

[Mr-Akki-Jangir]

If you are using CorelDRAW to Create SVG Image then Use these configuration:

CorelDRAW Configuration Compatibility : SVG1.0/1.1 Encoding Method : Unicode - UTF-8 Styling Option : Presentation Attributors Bitmap Export Type : Embeded

And for Adobe Illustrator Styling : Presentation Attributors

The illustrator Configuration works for me

[agnamc9]

This works for me ! https://github.com/dnfield/flutter_svg/issues/105#issuecomment-479724077 Thanks @unschool

[SawWebFuture]

You can just go into the svg file and remove the

//remove this and save

[alarkirikal]

How have peopl handled this with SvgPicture.network(...) cases?

[edex96]

@alarkirikal If your svg links are externally sourced and no way to edit them you can edit the parser to skip the

 if (event.name == 'style') {
    _discardSubtree();
    continue;
  }

path: %userprofile%\AppData\Local\Pub\Cache\hosted\pub.dartlang.org\flutter_svg-1.0.0\lib\src\svg\parser_state.dart line: 940

/// Drive the [XmlTextReader] to EOF and produce a [DrawableRoot].
  Future<DrawableRoot> parse() async {
    for (XmlEvent event in _readSubtree()) {
      if (event is XmlStartElementEvent) {
        if (event.name == 'style') {
          _discardSubtree();
          continue;
        }
        if (startElement(event)) {
          continue;
        }
        final _ParseFunc? parseFunc = _svgElementParsers[event.name];
        await parseFunc?.call(this, _warningsAsErrors);
        if (parseFunc == null) {
          if (!event.isSelfClosing) {
            _discardSubtree();
          }
          assert(() {
            unhandledElement(event);
            return true;
          }());
        }
      } else if (event is XmlEndElementEvent) {
        if (event.name == 'style') {
          continue;
        }
        endElement(event);
      }
    }
    if (_root == null) {
      throw StateError('Invalid SVG data');
    }
    return _root!;
  }

or better yet :D

 return FutureBuilder(
        future: get(Uri.parse(url)),
        builder: (context, AsyncSnapshot snap) {
          if (snap.hasData) {
            final svgStr = utf8.decode(snap.data.bodyBytes);
            final parser = SvgParser();
            try {
              parser.parse(svgStr, warningsAsErrors: true);
              return SvgPicture.string(svgStr);
            } catch (e) {
              print(e);
              return const Icon(Icons.info);
            }
          }
          return const SizedBox.shrink();
        },
      );

[TjayAmit]

I encounter this problem and I tried to look for possible solusyon, I found this link https://blog.logrocket.com/implement-svg-flutter-apps/ I found here that the problem because the package flutter_sgv is not supporting attribute

[abegehr]

this tool works for me https://jakearchibald.github.io/svgomg/

Or check out the command line tool here: https://github.com/svg/svgo – works like a charm!

[Mahani9271]

Hi every body , we solved this problem, check this url https://pub.dev/packages/flutter_svg_with_style_tag