I 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!
Top comments (0)