Svgo: Plugin to apply the styles from a <style> block as inline on the shape

[ionutzp]

Is anybody interested in this?

[GreLI]

Well, we'll be always glad to review a pull request. Actually, svgo now do nothing with styles, and optimizations suffer from that. Not sure though that the plugin like this should be enabled by default.

[shooftie]

I'd be keen to see this. I'm struggling with the way in which Illustrator outputs SVGs. I can either have IDs on paths and inline styles or IDs and classes on paths with a <style> block... But not both.

This means that I duplicate IDs across the document when the same SVG is used or the <style> blocks leak and end up affecting paths in other SVGs on the page that have the same class.

It would be great if SVGO could inline the styles and then remove the <style> element altogether. On reading your comment on another issue, #399, this might not be possible?

[strarsis]

+1

Example file:

<svg id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>.st0{fill:red;}</style>
  <rect width="100" height="100" class="st0" style="stroke-width:3;stroke:blue" />
</svg>

With best regards

[Joeynoh]

+1

[strarsis]

PR has been prepared for a plugin: https://github.com/svg/svgo/pull/447

It doesn't support CSS selectors beyond class/id yet, but this isn't very usual with SVG yet
and it would propably require additions to the AST API passed to the plugins.

[strarsis]

How to handle styles and classes processed by this plugin? See PR discussion.

[chrisblakley]

Adding a +1 to this. I've got two SVGs from Illustrator that have conflicting classes/styles and would love an easy way to prevent this.

[strarsis]

@ionutzp, @shooftie, @Joeynoh, @chrisblakley: Plugin can be used now: https://github.com/svg/svgo/pull/592

[GreLI]

SVGO v1.0.0 with the plugin has been released.

[foxyblocks]

Is the usage of this plugin documented anywhere?

[GreLI]

I guess only in the plugin itself.
https://github.com/svg/svgo/blob/ceccf1ffdcdcba0f422a49685c2f60520579e46a/plugins/inlineStyles.js#L20-L38

[strarsis]

Also https://github.com/svg/svgo/pull/592#issuecomment-251956973

[foxyblocks]

Thanks for the help. For future searchers this is the usage I was looking for:

svgo path/to/file.svg --enable=inlineStyles  --config '{ "plugins": [ { "inlineStyles": { "onlyMatchedOnce": false } }] }' --pretty

which will inline the style rules even if they are used multiple times.

[tarunmangukiya]

@wordofchristian Thanks man! Helped a lot!

[vcoppolecchia]

Thanks @foxyblocks! This really helped me, in particular the options part! 😊 Documentation is close to non-existent and I spent too much time on this trifle already!

I decided to help too…

How to use svgo inlineStyles in gulp

…
function optimizeSvg() {
    return gulp
        .src('icons/path/*')
        .pipe(svgo({
            "plugins":[{
                "inlineStyles":{
                    "onlyMatchedOnce":false
                }}]
            })
        )
        .pipe(gulp.dest(iconsOptimizedPath));
}
…

I hope this is useful for other people.

[strarsis]

Hmm, maybe onlyMatchedOnce should be false by default? On the other hand the main purpose of svgo is to optimize/minimize SVGs, and onlyMatchedOnce: true often yields smaller SVGs.

[mauriciabad]

That the plugin is called "inlineStyles" and it does not get rid of all style tags is a bit confusing.

I wouldn't make onlyMatchedOnce: false by default (for what @strarsis said), instead I'd add to the documentation the plugin options explaining this behavior.

My specific case

I'm using svgo to inline several svgs in the same page. And the styles are being applied to other svgs and a lot of colors are replaced. So I was expecting inlineStyles to fix it, but nope. And I didn't notice that the onlyMatchedOnce option existed until I saw this comment. It's not straight forward in the documentation.

[skylarmb]

for future googlers: if you are using svgo in code rather than using the CLI, the config would look like this

const svgo = new SVGO({
  plugins: [
    {
      inlineStyles: {
        onlyMatchedOnce: false,
      },
    },
  ],
});