SVG to CSS Data URL converter with maybe the smallest possible output.

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:

SVG to CSS converter

It converts SVG to a CSS compatible Data URL for use in attributes like background-im…


This content originally appeared on DEV Community and was authored by Nathaniel

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:

SVG to CSS converter

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!


This content originally appeared on DEV Community and was authored by Nathaniel


Print Share Comment Cite Upload Translate Updates
APA

Nathaniel | Sciencx (2023-06-03T16:12:13+00:00) SVG to CSS Data URL converter with maybe the smallest possible output.. Retrieved from https://www.scien.cx/2023/06/03/svg-to-css-data-url-converter-with-maybe-the-smallest-possible-output/

MLA
" » SVG to CSS Data URL converter with maybe the smallest possible output.." Nathaniel | Sciencx - Saturday June 3, 2023, https://www.scien.cx/2023/06/03/svg-to-css-data-url-converter-with-maybe-the-smallest-possible-output/
HARVARD
Nathaniel | Sciencx Saturday June 3, 2023 » SVG to CSS Data URL converter with maybe the smallest possible output.., viewed ,<https://www.scien.cx/2023/06/03/svg-to-css-data-url-converter-with-maybe-the-smallest-possible-output/>
VANCOUVER
Nathaniel | Sciencx - » SVG to CSS Data URL converter with maybe the smallest possible output.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/06/03/svg-to-css-data-url-converter-with-maybe-the-smallest-possible-output/
CHICAGO
" » SVG to CSS Data URL converter with maybe the smallest possible output.." Nathaniel | Sciencx - Accessed . https://www.scien.cx/2023/06/03/svg-to-css-data-url-converter-with-maybe-the-smallest-possible-output/
IEEE
" » SVG to CSS Data URL converter with maybe the smallest possible output.." Nathaniel | Sciencx [Online]. Available: https://www.scien.cx/2023/06/03/svg-to-css-data-url-converter-with-maybe-the-smallest-possible-output/. [Accessed: ]
rf:citation
» SVG to CSS Data URL converter with maybe the smallest possible output. | Nathaniel | Sciencx | https://www.scien.cx/2023/06/03/svg-to-css-data-url-converter-with-maybe-the-smallest-possible-output/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts