flatten classes into attributes

[erazor83]

Hi there.

I need a SVG without any classes. The reason for this is that I'd like to change for example colors (stroke) of some elements via JavaScript (snap.svg). However when a stroke is defined via a class for this element it has a higher priority than the elements attribute.

So the best way would be if I can somehow apply the class attributes to the corresponding element and delete the class completely.

Does something like this exists for svgo already? I've had a look at "inlineStyles" and tried with the inlineStyles branch but it's probably not doing exactly what I need.

Thanks for any help.

[GreLI]

Unfortunately, svgo doesn't parse styles for now (except inlining style attribute).

[strarsis]

Related PR: #592

[mdeweerd]

Up!
Qt5 can't work with classes - after flattening the styles set by the CSS selectors into attributes, SVGs show correctly.

[strarsis]

@mdeweerd: This is already possible since a long time with the inlineStyles plugin
(together with the convertStyleToAttrs plugin).

[mdeweerd]

That's what I discovered in the mean time, but it dos not seem to work with my file - it only does the first level (?).
WN__PICTO_Luminaire.zip
Tried it on https://jakearchibald.github.io/svgomg/ - not sure if that is the latest version.

[strarsis]

@mdeweerd: You probably have to set the inlineStyles plugin option onlyMatchedOnce to false.

[mdeweerd]

I installed 1.2.0-1-gaa0df73 on Ubuntu 16.04.

Settings the option "onlyMatchedOnce" option to false helps a lot, thanks.
The result is not perfect yet - I'll check why.

Here is the command (--pretty and --indent to help with debugging):

#!/bin/bash
OPTIONS='{ "plugins": [ { "inlineStyles": { "onlyMatchedOnce": false } }] }'
svgo --pretty --indent=2 --enable="inlineStyles,convertStyleToAttrs,sortAttrs" --config "$OPTIONS" *.svg

Most of the SVGs are perfect in Qt5 now - I still have to fix some that have a pattern with patternTransform and fills ...

So as far as I understand this issue from the end of 2016, it can be closed ;-).

@strarsis 👍 Thanks you for your help.

[strarsis]

@mdeweerd: Sure. If you find an SVG that defies the optimizations, it would be nice to create an issue with a minimal SVG example so a test can be written against it. Indeed some SVG parts may not be completely optimized yet like patterns because it requires a deeper understanding (parsing and then formatting back).

[TrySound]

convertStyleToAttrs will be disabled by default in the next release
#1365

[TrySound]

https://github.com/svg/svgo/releases/tag/v2.1.0