Repository: flutter
Issue: [flutter_svg] The <style> element is not implemented in this library
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/105_

Original report by @ScrivNetwork on Jan 24, 2019

Need implement <style>

---
Comment by @dnfield on Jan 24, 2019
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.

---
Comment by @unschool on Apr 4, 2019
This tool worked in my case, https://github.com/RazrFalcon/svgcleaner

---
Comment by @kaige-cai on Nov 22, 2019
No, Just modify the fill of attr to label
like \<svg>\<path fill="#fff" xxx="0000"/>\</svg>

---
Comment by @sahiljangra on Dec 28, 2019
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
![corelDraw capture](https://user-images.githubusercontent.com/34799233/71539342-00310300-2961-11ea-817c-fd170787dcf4.JPG)


And for **Adobe Illustrator**
**Styling** : Presentation Attributors
![illustrator capture](https://user-images.githubusercontent.com/34799233/71539344-07f0a780-2961-11ea-95c9-755a84aa7087.JPG)



---
Comment by @piuskamil on Apr 20, 2020
this tool works for me https://jakearchibald.github.io/svgomg/

---
Comment by @masfranzhuo on May 11, 2020
> 
> 
> This tool worked in my case, https://github.com/RazrFalcon/svgcleaner

thanks, it works on my case

---
Comment by @ShadyBoshra2012 on May 24, 2020
> 
> 
> This tool worked in my case, https://github.com/RazrFalcon/svgcleaner

Thanks, that worked for me too.

---
Comment by @aawizard on May 28, 2020
Thanks :)

> this tool works for me https://jakearchibald.github.io/svgomg/



---
Comment by @thealiflab on Jul 6, 2020
You can watch this answer from StackOverflow

https://stackoverflow.com/a/62748066/11681472

---
Comment by @yourshinsuke on Aug 20, 2020
@piuskamil 
Did you use default settings and pushed `[RESET ALL]` button?

---
Comment by @piuskamil on Aug 20, 2020
@yourshinsuke yes i used default setting.


---
Comment by @erickfiori on Aug 22, 2020
> This tool worked in my case, https://github.com/RazrFalcon/svgcleaner

It worked!
Thank You! 

---
Comment by @msgtobala on Dec 4, 2020
> > This tool worked in my case, https://github.com/RazrFalcon/svgcleaner
> 
> It worked!
> Thank You!

?? what we have to do?

---
Comment by @cdmunoz on Dec 26, 2020
Even using an external tool such as [Jake Archibald's](https://jakearchibald.github.io/svgomg/), 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" ...... />```

---
Comment by @kadnan0900 on Dec 29, 2020
> > This tool worked in my case, https://github.com/RazrFalcon/svgcleaner
> 
> It worked!
> Thank You!

Can you please explain how you solved this issue ?

---
Comment by @hadasacwebit on Dec 29, 2020





> > > 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..
<img width="539" alt="Screen Shot 2020-12-29 at 18 30 40" src="https://user-images.githubusercontent.com/34736340/103298891-f7578f00-4a03-11eb-9d2e-05d5935fe016.png">


---
Comment by @Saransh-cpp on Feb 11, 2021
> Even using an external tool such as [Jake Archibald's](https://jakearchibald.github.io/svgomg/), 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>
```

---
Comment by @dnfield on Feb 11, 2021
The easiest way is to have your design tool not use CSS if possible.

Alternatively, using [`svgcleaner`](https://github.com/razrfalcon/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>
```

---
Comment by @Saransh-cpp on Feb 12, 2021
> The easiest way is to have your design tool not use CSS if possible.
> 
> Alternatively, using [`svgcleaner`](https://github.com/razrfalcon/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:)!

---
Comment by @fricred on May 9, 2021
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?

---
Comment by @JanDrabik on May 14, 2021
@fricred 
Having exactly same issue; network load seems impossible to fix on the run, Im also looking for solution to this problem.

---
Comment by @fricred on May 14, 2021
> @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*

---
Comment by @Mr-Akki-Jangir on May 16, 2021
> 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
> ![corelDraw capture](https://user-images.githubusercontent.com/34799233/71539342-00310300-2961-11ea-817c-fd170787dcf4.JPG)
> 
> And for **Adobe Illustrator**
> **Styling** : Presentation Attributors
> ![illustrator capture](https://user-images.githubusercontent.com/34799233/71539344-07f0a780-2961-11ea-95c9-755a84aa7087.JPG)

The illustrator Configuration works for me 

---
Comment by @agnamc9 on Jun 15, 2021
This works for me ! https://github.com/dnfield/flutter_svg/issues/105#issuecomment-479724077
Thanks @unschool

---
Comment by @SawWebFuture on Jul 12, 2021
You can just go into the svg file and remove the <style> tag. Worked for me:

//remove this and save
<style type="text/css">
	.st0{fill:#3A3A3A;}
</style>

---
Comment by @alarkirikal on Oct 14, 2021
How have peopl handled this with `SvgPicture.network(...)` cases?

---
Comment by @edex96 on Jan 4, 2022
@alarkirikal 
If your svg links are externally sourced and no way to edit them you can edit the parser to skip the <style> tag. 

```dart
 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_
```dart
/// 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 

```dart
 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();
        },
      );
```

---
Comment by @TjayAmit on Jan 16, 2022
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 <style> that is mostly use in css, so I tried to open my svg file and delete the attribute <style> and the exception has gone. It may also cause a downside of deleting it directly but I still don't know if it really cause a problem. but it works for me.

---
Comment by @abegehr on Feb 19, 2022



> 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!

---
Comment by @Mahani9271 on May 10, 2022
Hi every body , we solved this problem, check this url 
https://pub.dev/packages/flutter_svg_with_style_tag

---
Comment by @mikealfandre on May 31, 2022
You need to remove the style tag if you will be changing the style dynamically like fill for example

---
Comment by @Illangovan2022 on Jun 7, 2022
> 
Do we need to consider the units, while exporting SVG's from Coreldraw and Adobe Illustrator? If yes, please guide how to proceed further. (ex. pixels, mm, cm, inches etc.,)

---
Comment by @Malomalote on Aug 30, 2022
There are a not elegant solution:

You can parse svg string before render.

I explain:

add the following function and auxiliary class:


```dart
// ignore_for_file: public_member_api_docs, always_specify_types

///replace style element in svg String
String replaceStyleElement(String input) {
  String transformsvg = input;
  if (input.contains('<style')) {
    final int posInit = input.indexOf('<style');
    final int posEnd = input.indexOf('</style>');
    final String styleString = input
        .substring(posInit, posEnd + '</style>'.length)
        .replaceAllMapped(RegExp('<style.*'), (Match match) => '')
        .replaceAll('</style>', '');
    final List<String> stylesRaw = styleString.split('.');
    final List<Pair<String, String>> styles = [];
    for (String l in stylesRaw) {
      final String first = l.split('{').first;
      final String second = l.split('{').last.split('}').first;
      styles.add(Pair(first, second));
    }
    for (Pair<String, String> j in styles) {
      transformsvg =
          transformsvg.replaceAll('class="${j.first}"', 'style="${j.second}"');
    }
  }
  return transformsvg;
}

//from https://stackoverflow.com/questions/64282563/list-of-tuples-in-flutter-dart
///Simple aux Class Pair
class Pair<T1, T2> {

  Pair(this.first, this.second);
  final T1 first;
  final T2 second;

  @override
  String toString() => 'Pair(a: $first, b: $second)';
}
```

Then modify the parser.dart file as follow:

line 27.

```dart
 SvgParserState(xml.parseEvents(replaceStyleElement(str)), theme, key, warningsAsErrors);
```

I tried several files and works for my.

Additionally I code a simple app in flutter that allows save the file without the style element:
repository:
[https://github.com/Malomalote/svg-replace-style-element](url)




---
Comment by @Malomalote on Aug 30, 2022
I'm sorry the link don't work.
Here the correct link.

https://github.com/Malomalote/svg-replace-style-element

---
Comment by @PureTryOut on Oct 6, 2022
Sadly in my case I have no control over the vector images I'm loading and can thus not rely on removing the `<style>` tag in advance. This library works and loads the images just fine, they even look fine, but it spits out this warning per image loaded.

I can understand making an entire CSS parser is too much, but can not existing packages like https://pub.dev/packages/csslib be used to accomplish it instead?
If only Flutter had built-in SVG support instead :cry: 

---
Comment by @Sergio55Veliz on Dec 29, 2022
Just have to export your designs like in the image. The documentation has this section [documentation](https://pub.dev/packages/flutter_svg#recommended-adobe-illustrator-svg-configuration) that tells you how to export your design, but the SVG Options windows wasn't the same for me.

![image](https://user-images.githubusercontent.com/58049244/210008066-1187a921-cf4b-41e4-ac14-fce27ef3ac93.png)


---
Comment by @Toothgip on Feb 16, 2023
> How have peopl handled this with `SvgPicture.network(...)` cases?

I found [this library](https://pub.dev/packages/jovial_svg) for handle network SVG