Improved the SVG to CSS converter

By Matt Visiwig Jan 17, 2023

When I launched SVGBackgrounds.com 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