SVG to Base64 Converter — Free SVG Data URI Generator
Paste SVG markup or upload a .svg file to get an inline data:image/svg+xml URI for your HTML, CSS, or JS. You get both the URL-encoded form (usually smaller for SVG) and the Base64 form, with byte sizes side by side. Free and 100% in your browser.
Why Use This SVG to Base64 Converter?
Instant, Offline
The data URI rebuilds the moment you edit the markup. No network call, no signup, no wait.
URL-encoded & Base64
Get both forms with live byte sizes, so you can pick the smaller one — usually URL-encoding for SVG.
Ready-to-Paste CSS
A full background-image: url(...) declaration is generated for you, no manual wrapping needed.
Paste or Upload
Type markup directly or drop in an .svg file up to 2MB. Either way the bytes stay on your device.
UTF-8 Safe
Emoji, accents, and CJK text in your SVG encode correctly via a UTF-8-aware wrapper around btoa.
100% Private
Everything runs locally in your browser. Your SVG is never uploaded, logged, or tracked.
SVG to Base64: Inline Any SVG as a Data URI
An SVG to Base64 converter takes SVG markup and wraps it in a data:image/svg+xml URI so you can embed the graphic directly in HTML, CSS, or JavaScript with no separate file request. Because SVG is plain text, this tool gives you two forms: a URL-encoded data URI (data:image/svg+xml,…) that is usually smaller, and a Base64 data URI (data:image/svg+xml;base64,…) for maximum compatibility — plus a copy-paste CSS snippet. It runs 100% in your browser: free, no upload.
How to convert an SVG to a Base64 data URI
- Paste your SVG markup into the input, or click Upload .svg to load a file up to 2MB.
- The tool validates that the markup contains a closed
<svg>…</svg>element and shows a clear error if not. - Read the three outputs: URL-encoded, Base64, and a ready-made CSS background-image rule.
- Compare the byte sizes under each panel; the smaller form is tagged Smaller (usually the URL-encoded one).
- Press Copy on the form you want and paste it into your
imgsrc, CSSurl(), or JS string.
What is an SVG data URI and how does it work?
A data URI (data URL) inlines a resource directly inside a URL using the form data:[<mediatype>][;base64],<data>. For SVG the mediatype is image/svg+xml. You can encode the payload one of two ways, both documented in the MDN data URIs reference: Base64 (binary-safe but always larger) or percent-encoded text.
Base64 reads 3 bytes at a time and emits 4 ASCII characters, padding the tail with =. That 4:3 ratio is exactly why Base64 output is about 33% larger than the source. SVG, however, is already text, so it does not need binary-safe encoding. Per MDN, URL-encoding an SVG is the recommended approach because escaping only the reserved characters typically yields a shorter string than Base64. This tool builds the Base64 form with the browser's non-secure btoa function, wrapped so UTF-8 text (emoji, accents, CJK) encodes without error.
"If your SVG file is large, you might consider linking to it directly… If the SVG is small, encoding it as a data URL using URL-encoding rather than Base64 will usually result in a smaller file."— paraphrasing the MDN Web Docs guidance on data URIs
Worked examples: SVG → data URI
Source SVG (a 24×24 checkmark icon)
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
URL-encoded data URI (recommended)
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E
Base64 data URI (more compatible, larger)
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+…
Edge case · URL-encoded beats Base64 for SVG
For a typical icon, the URL-encoded URI runs roughly 15–30% shorter than the Base64 URI. The trick is quoting: inside CSS url("…") the double quotes collide with attribute quotes, so this tool rewrites attribute " to ' and escapes # (which would otherwise start a URL fragment). Skip that and a fill="#fff" silently truncates the image. Always confirm by comparing the two byte counts the tool prints.
SVG data URI reference: forms and size
All three outputs share the image/svg+xml mediatype; they differ only in how the payload is encoded and how much it grows. Use this to pick a form at a glance.
| Form | Prefix | Typical size vs source | Best for |
|---|---|---|---|
| URL-encoded | data:image/svg+xml, | Slightly larger to similar | SVG in CSS / HTML (recommended) |
| Base64 | data:image/svg+xml;base64, | ~+33% fixed | Binary-safe transport, legacy tools |
| CSS snippet | background-image: url("…") | Wraps the URL-encoded form | Pasting straight into a stylesheet |
The one character that breaks inline SVG: #
The most common reason an inlined SVG renders blank is an unescaped #. In a URI, # begins the fragment identifier, so fill="#3b82f6" truncates the data at the hash and the browser silently drops the rest of the image. This tool escapes # to %23 for you, but if you hand-encode, that single substitution is the fix.
A second gotcha is caching. An SVG inlined in CSS caches together with the stylesheet and is reused across pages. An SVG inlined in HTML is re-downloaded with the markup on every uncached page view. Under HTTP/2 and HTTP/3, where many small files are multiplexed over one connection, the request-saving argument for inlining is weak — inline only tiny, site-wide icons (roughly under 1–2KB) and link everything larger.
Runs 100% in your browser
Your SVG never leaves your device. Markup is encoded locally with the browser's btoa and TextEncoder APIs and copied with the native clipboard — no uploads, nothing leaves your device. I tested single-path icons, multi-element illustrations, SVGs containing #hex fills, and <text> with emoji from a few hundred bytes up to the 2MB ceiling. The three outputs and the live byte-size comparison appear instantly, invalid markup is rejected with a clear message instead of a crash, and the output panels reserve their height so the layout never jumps.
Frequently asked questions
Is this SVG to Base64 converter free?
Yes — 100% free with no signup and no daily limit. Paste or upload an SVG up to 2MB, then copy the data URI or the CSS snippet.
Does my SVG get uploaded to a server?
No. The markup is encoded entirely in your browser, so no bytes are sent anywhere and the tool works offline once loaded.
Should I use Base64 or URL-encoding for my SVG?
Prefer URL-encoding. Since SVG is text, escaping only reserved characters is usually smaller than Base64's fixed 33% growth. Compare the byte counts the tool shows.
How do I use the result in CSS?
Copy the CSS background-image output: background-image: url("data:image/svg+xml,…");. Inside a stylesheet it caches with the CSS for reuse.
Can I turn the data URI back into a file?
Yes. Paste it into our Base64 to Image decoder to rebuild and download the original SVG, fully client-side.
Related encoding & asset tools
Decode a data URI back to an SVG file
Image to Base64Encode PNG, JPG, WebP, or GIF files
Base64 EncoderEncode plain text or data to Base64
Base64 DecoderDecode a Base64 string back to text
URL EncoderPercent-encode strings for safe URLs
Image CompressorShrink raster images before encoding
Favicon GeneratorBuild favicons from one source image
CSS MinifierShrink stylesheets that carry data URIs
HTML FormatterTidy markup that embeds inline SVGs
JSON FormatterEmbed data URIs in JSON payloads
Guide: Base64 EncodingHow Base64 and data URIs work
All ToolsBrowse the full Toolk hub
Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.
Need a different tool?
Browse all 89 free, in-browser tools — or tell us what we should build next.