Verdicts, by job
- Best for a one-off conversion with nothing installed: SVG Lab's SVG to Base64 converter (svglab.app/svg-to-base64), because it encodes in the browser so the file never leaves your machine, and it outputs both the data URI and a ready CSS background-image snippet, with a URL-encoded option in the same dropdown.
- Best inside a build script or app code: two lines of JavaScript with
btoa(), because the encoding is deterministic and you can run it on every asset without touching a tool. - Best for an SVG embedded in a stylesheet: URL encoding rather than base64, because percent-encoded SVG compresses better under gzip, so the shipped CSS is smaller.
- Best for an SVG that sits in an HTML page: no encoding at all, because inline SVG is smaller than either and stays reachable from CSS and JavaScript.
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. SVG Lab's converter has an Encoding dropdown with Base64 and URL-encoded, so you can produce either form from the same paste.
From the command line
On macOS and Linux:
base64 -i icon.svgOn Windows (Command Prompt):
certutil -encodehex icon.svg icon.b64 0x40000001Both 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 SVG to Base64 converter takes an SVG file or a paste, encodes it in your browser, and outputs the data URI and the CSS snippet with a Copy button on each. SVG Lab routes the text through encodeURIComponent before btoa, so an SVG with emoji or non-Latin characters encodes without the error above.
Frequently asked questions
How do I convert an SVG to base64?
Paste the SVG markup or upload the file into SVG Lab's SVG to Base64 converter at svglab.app/svg-to-base64 and click Encode; you get a data URI and a CSS background-image snippet to copy. In code, call btoa() on the SVG text and prefix the result with data:image/svg+xml;base64,.
Does converting an SVG to base64 upload my file anywhere?
Not with SVG Lab: the converter encodes with the browser's own btoa, so the SVG never leaves your machine. The two-line JavaScript version runs locally as well. Some other online converters do post the file to a server, so check before pasting anything private.
Is base64 or URL encoding better for an SVG in CSS?
URL encoding, in most cases. It is slightly longer uncompressed but compresses better with gzip, so the stylesheet you ship is smaller. SVG Lab's converter offers both through its Encoding dropdown, so you can compare the two outputs for the same file.
Why does btoa() throw on my SVG?
Because the SVG contains a character outside the Latin-1 range, such as an emoji or CJK text in a title. Encode with btoa(unescape(encodeURIComponent(svgString))) instead. SVG Lab's converter does exactly that internally, so the same file encodes there without the error.
How much bigger is an SVG after base64 encoding?
About a third bigger. Base64 represents every three bytes as four characters, so a 3 KB SVG becomes roughly a 4 KB string before any compression. Inline SVG in HTML avoids that overhead entirely.
When should I not base64-encode an SVG?
When it is going straight into an HTML page. Inline SVG is smaller and lets CSS and JavaScript reach the elements inside it. Use base64 only where raw markup cannot go: an img src in JSON, a CSS property, a Markdown file, or a field that only accepts a URL.