Feature Request: option to normalize CSS & IDs
drwpow opened this issue · comments
Problem
Many icons are optimized using SVGO which is very good at compression! But the side effect is that it will minify classes and IDs, like so:
<svg><style>.a{fill:#fc6d26}</style><path class="a" d="…
<svg><defs><linearGradient id="a">…Even if icons aren’t optimized with SVGO at all, there’s still a really good chance of class & ID conflicts if a sprite sheet is big enough (id="Layer_1" is suspect). Any conflict at all will likely mean the icon displays incorrectly.
API
Unsure about the API (should this be default behavior? configurable? dunno!)
Solution A
One solution would be to inline <style>s, e.g. (which is an SVGO setting, I believe):
- <svg><style>.a{fill:#fc6d26}</style><path class="a" d="…
+ <svg><path fill="#fc6d26" d="…">But that still leaves IDs!
Solution B
Probably a better solution is to not transform anything, but simply prefix all classes and IDs within an SVG, e.g.:
<svg><style>.astroicon-icon-github-a{fill:#fc6d26}</style><path class="a" d="…
<svg><defs><linearGradient id="astroicon-icon-github-a">…(prefix can match the SVG IDs; not important)
Other
- I am willing to create a PR for this
Yeah I like this idea a lot, I'm also bitten by this frequently!
For reference if you end up digging into this, we already have a preprocess function that could be extended with this behavior.
It currently only parses the top-level svg element, but it could be refactored to not return early and instead update any id attributes down the tree.
Actually, I did a lil digging and svgo already has this feature built-in! I just don't think many other tools have use for it, but we sure do.
Will be adding this in a patch release.
itshappening.gif