How to Encode SVG as Base64 (and When You Actually Need To)

What base64 encoding actually does

SVG files are XML: plain text. Base64 converts that text into a string that uses only characters safe to embed anywhere: letters, digits, +, /, and =. The resulting string is about 33% larger than the original, but it can sit directly inside a CSS property, a JSON value, or an HTML attribute without breaking the surrounding format.

A data URI wraps that string so a browser knows how to treat it:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5...

The browser reads everything after the comma as the image content.

How to do it in JavaScript

const svgString = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40"/></svg>';
const base64 = btoa(svgString);
const dataUri = `data:image/svg+xml;base64,${base64}`;

btoa() is available in all modern browsers. One limitation: it only handles characters in the Latin-1 range. If your SVG contains characters outside that range (emoji, Chinese characters, etc.), btoa() will throw. The fix:

const base64 = btoa(unescape(encodeURIComponent(svgString)));

encodeURIComponent percent-encodes the string first, and unescape converts those percent sequences back to Latin-1 bytes that btoa can handle.

Using it in CSS

A common reason to base64-encode an SVG is to use it as a CSS background image without a separate file request:

.icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
}

There is an alternative that avoids the base64 encoding entirely. URL-encode the SVG instead:

.icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");
}

URL encoding is slightly less compact than base64, but the resulting CSS is smaller overall because percent-encoded SVG compresses better with gzip. For most SVGs embedded in a stylesheet, URL encoding is the better choice.

From the command line

On macOS and Linux:

base64 -i icon.svg

On Windows (Command Prompt):

certutil -encodehex icon.svg icon.b64 0x40000001

Both write the base64 string. You can pipe the output or redirect it to a file.

When you do not need base64

If you are embedding the SVG directly in an HTML file, there is no reason to base64-encode it. Inline SVG is both smaller (no base64 overhead) and gives CSS and JavaScript direct access to the SVG's internal elements:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="currentColor"/>
</svg>

Use base64 when you need to reference the SVG from a context that cannot accept raw SVG markup: an img src attribute in a JSON payload, a CSS property, a Markdown file, or a third-party field that only accepts URLs.

If you want to skip the code entirely, SVG Lab's base64 converter takes an SVG file or paste and outputs the data URI ready to copy.