Converting an SVG to base64 means encoding the file's text content as a base64 string, usually to embed it as a data URI in CSS or HTML. You can do it in JavaScript with two lines of code, or paste the SVG into a converter and copy the result.
The more useful question is whether you need base64 at all. Often you don't.
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), 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.
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.
