SVG to CSS convertor

Why do we need this? 🤔

We know we can use SVGs in CSS with data URIs. The problem is, they only work on Webkit based browsers. But if we use the handy dandy encodeURIComponent() we can use it safely on all browsers!

What is a data URI?

Rather than linking to an external resource, data: URI is a handy way to embed items right into a URL that contains the encoded data. The fact that our resource is embeded directly into our code means we don’t have to make external requests and slow down our website.

Data URIs can actually take many different types on data, but they are most commonly used on the web for images. Data URIs follow a scheme that includes information about the encoded file — such as the mime type — along with the encoded data itself.

data:[<MIME-type>][;charset=<encoding>][;base64],<data>
    

Why should I use data: URIs?

The main reason: performance. Each time you reference another html, css or js file in your code, it’s another HTTP request. When you use data: URIs, the information is embedded right in your page so no HTTP request is needed.

One thing to note is data: URI file size can be around a third bigger as the information is embedded within, but it’s still better performance-wise to download a slightly bigger file than to make lots of HTTP requests and then download content.