How to convert SVG code to base64 encoded data URIs

In this article, we'll explain how to convert SVG icons to base64 string and use them with data URIs.

What is a base64 encoded Data URI #

A data URI is a way to include a resource, e.g., an SVG image, without needing to make an HTTP request.

For example, this is how you would use an SVG with data URI to set the background image of an element in CSS:

.my-element {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg stroke-width='1' fill='none' stroke='%23372929' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='15.5,13.5 8,1.5 0.5,13.5 '%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");
}

where the string "data:image/svg+xml,..." is the encoded SVG code with data URI.

Data URIs generally require the data to be converted to base64, which has the downside of increasing the size of the data itself.

Luckily, base64 encoding is not required for SVG, but you'll still need to make changes to the original SVG code to use it as data URI.

Create a data URI from a SVG #

Using an SVG as a data URI requires several steps to follow, for example: specify the data format (e.g., data:image/svg+xml), replace all double quotes (") with single quotes ('), replace special characters (e.g., replace '<' with '%3C').

Alternatively, you can use tools like Nucleo to automatically generate the data URI for you: import your SVG icons by dragging them over the app, then select an icon > right-click > Copy Data URI. This will copy the SVG icon as data URI to your clipboard.

By default, the app will copy the data URI ready to be used as CSS background-image:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg stroke-width='1' fill='none' stroke='%23372929' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='15.5,13.5 8,1.5 0.5,13.5 '%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");

If you only need the data URI, head over to the app Settings page (Account > Settings or press ⌘, on Mac or Ctrl, on Windows) and uncheck the 'Copy Data URI as CSS background' option:

Why use SVG with data URI #

Data URI allows you to include a resource without having to make an external HTTP request. For SVG icons, this is especially useful if you want to use the icon without having to create an actual .svg file to be hosted, for example, on a server.

When using icons as data URI, a nice trick is setting the CSS mask-image property (rather than background-image) and changing the color of the icon with the background-color property:

.my-element {
	background-color: red; // icon is red
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg stroke-width='1' fill='none' stroke='%23372929' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='15.5,13.5 8,1.5 0.5,13.5 '%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");
}

The end! Check our documentation tutorials page for more articles on working with icons.