Data URIs are a wildly underused website speed optimization

By Matt Visiwig May 22, 2023

One of the biggest perks of SVG is its small file size. Even so, PNG can be comparable for icons and other small graphics, it’s not too uncommon for PNGs still to be used on webpages. What’s the big deal if both the PNG and SVG are about the same in file size?

Overlooking the other benefits to inline SVG, such as the ability to dynamically style and avoid pixelation, there is still one big difference between the SVG and PNG icons in this situation.

You see, if you have 10 icons on the page, you’re making 10 extra HTTP requests with the PNG version. A common issue that website speed tests identify is an excessive number of requests, which can significantly slow your load times.

Finding inline SVG in the wild is pretty common, but if you placed you’re logo in the HTML… that’s extra markup that loads on every single page, where the image file could have been cached.

The workaround? Place the inline SVG in your CSS using what’s called a Data URI.

What is a Data URI?

A Data URI (Uniform Resource Identifier) is a string of characters that represents data, such as an image or a file, embedded directly into your web document. This technique is especially beneficial for small files like SVGs because it can eliminate the need for the browser to make a separate server request each time it needs the data.

Why would you want to use Data URIs for SVGs?

Reduced HTTP Requests:
Every external resource linked in a webpage, such as an image or a CSS file, requires a separate HTTP request to fetch from the server. These requests can add up, slowing down the webpage’s load time. Using Data URIs, you can embed small files directly into your HTML, CSS, or JavaScript, reducing the number of HTTP requests.

Speed and Performance:
Because the data is embedded directly within the web document, the browser doesn’t have to fetch it from an external source, which can speed up load times.

Elimination of Dependency on External Resources:
If you’re linking to external resources, there’s always a risk that the file might be moved or deleted, resulting in a broken link. Data URIs remove this risk because the data is embedded directly into the document. I also find pasting the SVG in CSS is a much quicker workflow dealing with uploads and reference paths.

Dynamic SVG Manipulation:
Utilizing a Data URI enables a greater degree of interactivity and control over SVG elements on your webpage. Unlike loading an SVG file directly, where dynamic modifications are limited, embedding an SVG within a Data URI allows for more extensive manipulations via CSS and classes.

How to create a Data URI

Creating a Data URI might seem complex, but my SVG to CSS conversion tool does all the work. I literally paste my SVG code and copy the Data URI output.

Here’s an example of a Data URI used as a CSS background-image:

background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23808"><path d="M18 4c-4-1-6 3-6 3s-2-4-6-3-4 6-2 8l8 8 8-8c2-2 2-7-2-8z"></path></svg>');

Don’t use Base64 for SVG Data URIs

If your graphic is a vector graphic, there’s no reason to use Base64. Base64 uses 50% more markup then using an SVG in your Data URI—simply put, it’s bloated.

The Base64 version isn’t human-readable unlike the SVG version which contains literal SVG code. In fact, you no longer even need to encode the special characters in SVG because old browser like Internet Explorer are behind us. The only exceptions are the # pound symbol which is used for hex colors or IDs and the ? question mark which is rarely used.

The SVG Data URI, therefore, looks almost indistinguishable from an inline SVG.

Don’t upload images, put them in your CSS