DEV Community

Cover image for SVG to CSS Data URL converter with maybe the smallest possible output.
Nathaniel
Nathaniel

Posted on

3 1 1 1 1

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-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!

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

If you found this article helpful, please give a ❤️ or share a friendly comment!

Got it