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.
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.
Reduced 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.
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>');
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.
There you have it. Incorporating SVGs with Data URIs into your CSS provides advantages to your web development workflow. This approach also reduces HTTP requests, boosts load speed, and allows for dynamic SVG manipulation. You can ditch having to upload images with the more efficient technique of embedding images directly in CSS. Consider reaching for Data URIs on your next web project—you might just realize you have been missing out.
Visiwig LLC © 2017 - 2024