NathanielI use something like this all the time — but it was never clear if it produced the optimal output.
So i did a bunch of research and made this:
It converts SVG to a CSS compatible Data URL for use in attributes like background-image and mask-image.
As far as I'm aware it produces the smallest possible output without compromising backwards compatibility.
We're talking saving a few bytes here and there — but the compounded effect of using this sort of thing all the time should make a bigger difference in the grand scheme of things.
It…
- only encodes necessary characters
- changes attribute quotes to single quotes
- lowercases percent-encoding hex pairs
- swaps hex colors to their shorter named equivalents
- adds xlmns attribute if missing
- removes useless whitespace
There's more information below the tool on the page if you're interested in understanding why it does these things.
Let me know what you think,
enjoy!
