[FEATURE REQUEST] Removing `style=""` in SVG files

[BenSouchet]

I have searched through the issues and didn't find my problem.

• [X] Confirm

Problem

Currently there is more than 100 SVG files that contains the syntax style="SOME_STYLING". This syntax can lead to errors, issues or buggy situations.

Why

Because the SVGs are used to generate a font, to ensure quality, reduce potential bugs on SVGs, I think configuration should be done only via HTML attributes.

For SVG files, only HTML Presentation Attributes ( list here ) should be used.

So instead of this:

style="fill-rule:evenodd;clip-rule:evenodd;"

we should have that:

fill-rule="evenodd" clip-rule="evenodd"

Possible Solution

Following this issue : #1277 there is possibility to convert the style="" syntax to attributes via a convertStyleToAttrs.js script.

Maybe also in guidelines ( https://github.com/devicons/devicon/wiki/SVG-Standards ) it's needed to add a line to specifically tell that inline style (style="") on elements are not the best pratice and link / display a list of Presentation Attributes that can be set / used. Here a list of safe attributes that will be correctly interpreted by icomoon for the font and of course web browsers.

clip-path
clip-rule
fill
fill-opacity
fill-rule
opacity
stop-color
stop-opacity
stroke
stroke-dasharray
stroke-dashoffset
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-opacity
stroke-width

Additional information

No response

[Snailedlt]

+1 @devicons/maintainer What do you guys think?

[lunatic-fox]

I'm not sure, but I think SVGO can already solve it. 🤔

[Snailedlt]

@lunatic-fox You're absolutely right! In fact, if you take a look at the comments in the linked issue (#1277), and search for SVGO, you will find a few references to it :)

So pretty much we can use one of these scripts depending on what it is we want to do:

1. Convert style tags into inline style attributes -> inlineStyles.js
2. Remove style elements -> removeStyleElement.js
3. Convert styles inside the style attribute into distinct attributes -> convertStyleToAttrs.js

I think what we want here is inlineStyles.js to convert the style element into style attributes, possibly followed up by convertStyleToAttrs.js to convert style attributes into an attribute for each style.

[Snailedlt]

Maybe we can go a few steps further, and just automate the whole optimization process so that contributors no longer need to use SVGOMG for that :)