Improved the SVG to CSS converter

By Matt Visiwig Matt Visiwig Portrait Jan 17, 2023

When I launched in 2018, supporting browsers like Internet Explorer was more important. For compatibility, we had to URL encode most of the special characters inside the SVG. For instance, the < and > were converted to %3C and %3E respectively.

This makes the code blob longer and harder to sift through if you want to make a change by hand.

The need to do that is over, now we really only need to URL encode a single character, the pound symbol (#) also known these days as the hashtag. The question mark (?) is also one of these characters, but I can’t think of a place you’d see a question mark in SVG code, unless you add text to it.

All this to say, by default the modern approach is used for export, but I did leave a legacy option for encoding the SVG with the old method.

But that’s not all. I also added a few options to output the code as

  • a plain data URI simply wrapped in the url('');
  • a background image
  • a background image, but with all the other background related properties
  • a list-item-style, the property that allows you to create custom CSS bullets
  • a background image wrapped in a class
Matt Visiwig Headshot

Hey, I'm Matt , the creator behind SVG Backgrounds. I produce free and paid resources every month, sign up for alerts.

Get freebies See latest releases