Easily convert your SVG into CSS ready Data URI code that works on all browsers.🙂 Check out examples of how you can use encoded SVGs here.
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.
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.