Global styles from inlined svg conflicting

[michaeljonathanblack]

Is there a way to apply classes in a way that's scoped to the svg instead of as global classes, using this tool? The provided SVG files from our designers all have the same global classes, so they all conflict.

Or is this just an issue we should resolve by modifying the svg by hand? It seems like we'll inevitably run into this problem again.

Edit: It appears inlineStyles is the plugin necessary, but babel-plugin-inline-react-svg is using an old version of svgo which doesn't support it.

[ljharb]

Can you elaborate what you mean by "global classes"? Are you using css class names directly on your svg?

[michaeljonathanblack]

Our designer sent me files structured like so:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 18 30" style="enable-background:new 0 0 18 30;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M0,15l15,15l3-3L6,15L18,3l-3-3L0,15z"/>
</svg>

Those styles leak into the global scope and, given the generic nature of .st0 naming, the svg files begin to style one another.

I'm not sure if this is to be avoided by exporting in another way, or if I need to directly modify these files to scope the css myself (possibly through a plugin like this). Come to think of it, I'm not even certain of inlining creates this issue any more than referencing these files statically.

[backwardok]

Out of curiosity, is it possible for your designer to just apply the styles directly to the svg nodes instead of relying on global styles? Seems like it would be a bit unexpected for this plugin to do something that actually changes the default/original behavior of the given svg elements (though perhaps is an interesting idea for a different/new plugin).

[majapw]

I second what @backwardok is suggesting. I think a fill="#ffffff" would not only address this issue with the plugin, it would also be more performant.

You can see when you run your example code through https://jakearchibald.github.io/svgomg/, you actually get

<svg viewBox="0 0 18 30"><path d="M0 15l15 15 3-3L6 15 18 3l-3-3L0 15z" fill="#fff"/></svg>

automatically as output, so maybe it would just be better to update the svg. I'm not sure that what you're suggesting is within the scope (haha) of this plugin. :)

[michaeljonathanblack]

@majapw Oh interesting, is there a way to generate the svg output you shared through this plugin? I can pass svgo settings, but none I tried consolidated styles into attributes.

That'd fix the bug in the common case, and I can request that styles are inlined in the future (however that's done, I'll leave it up to our designers).

[majapw]

@mherodev it looks like the option required is convertStyleToAttrs. It seems like svgomg has this on by default. :)

[michaeljonathanblack]

I tried including that but it didn't have any effect.

Looking at the code, it's checking for the style attribute, but what I have on my svgs is a style element.

The next best lead I had was inlineStyles, but that doesn't seem to work as expected (at least with babel-plugin-inline-react-svg, but maybe that's why it's not documented):

<style>.st0<!-- -->{<!-- -->fill:#fff<!-- -->}</style>

It's altering my style elements to have a bunch of empty html comments, and that's it.

I imagine that's the plugin that's doing it with the gui, unless there's something else.

Thanks for digging in though, @majapw!

[majapw]

Weird that it seems to work for me with the GUI! D:

[michaeljonathanblack]

You're right, with only inlineStyles selected, I get what I'm looking for:

466 bytes → 411 bytes 88.2%
<?xml version="1.0" encoding="utf-8"?>
<!--Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)-->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18 30" style="enable-background:new 0 0 18 30" xml:space="preserve">
<path d="M0,15l15,15l3-3L6,15L18,3l-3-3L0,15z" style="fill:#FFFFFF"/>
</svg>

I wonder why the inlineStyles plugin not documented here and doesn't appear to work as it does in the gui.

[michaeljonathanblack]

My best guess is that it's because babel-plugin-inline-react-svg uses an old version of svgo:

"svgo": "^0.7.2"

vs the version used in that editor

"svgo": "^1.0.3",

[michaeljonathanblack]

Confirmed!

https://github.com/svg/svgo/releases/tag/v1.0.0

I wonder what the LOE is to update this plugin to support the latest version. I imagine this has been discussed in another issue.