SVG to Base64 Converter
Convert SVG files or raw SVG code to Base64 — and get a ready-to-use Data URI, HTML embed, CSS background-image, or JSON payload. Includes live preview and size comparison between Base64 and URL-encoded output.
Drop SVG here or click to select
SVG files only · max 10 MB
Upload an SVG file to see the Base64 output
How to Convert SVG to Base64
Upload or Paste
Drop an SVG file onto the upload zone, or switch to "Paste SVG Code" and paste raw SVG markup directly. Both methods produce identical output.
Choose Output Format
Select from Data URI, HTML <img>, CSS background-image (shown in both Base64 and URL-encoded forms), Markdown, Raw Base64, or JSON.
Copy or Download
Click Copy to send the result to your clipboard. The tool also shows a live preview and a size comparison between Base64 and URL-encoded output.
SVG Base64 vs. URL-Encoded SVG
SVG is one of the few formats where URL encoding often beats Base64.
Base64 Data URI
data:image/svg+xml;base64,…
<img src="data:image/svg+xml;base64,PHN2Zy..." />
URL-encoded SVG
data:image/svg+xml,…
background: url("data:image/svg+xml,%3Csvg...");Base64 vs. URL Encoding — Which Is Better for Your SVG?
Detailed comparison with size benchmarks and browser support notes.
SVG Base64 Output Formats
Six formats — all ready to paste directly into your code.
A complete URI with MIME type prefix — usable anywhere a URL is accepted.
data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...
A ready-to-paste <img> tag with the Base64 Data URI as src, with optional alt text.
<img src="data:image/svg+xml;base64,..." alt="icon" />
Both Base64 and URL-encoded forms of the background-image rule, side by side.
.el { background-image: url("data:image/svg+xml;base64,..."); }Inline image syntax for GitHub READMEs, Notion, and other Markdown renderers.
Just the encoded string — for systems that expect plain Base64 without a URI prefix.
PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcv...
A structured payload with filename, MIME type, and Base64 data — for API integration.
{ "mime": "image/svg+xml", "data": "PHN2Zy..." }When to Use Base64 SVG
Best for small SVGs where eliminating an HTTP request matters more than file size.
Inline Icons in CSS
Embed UI icons directly in a stylesheet — no icon font, no sprite, no extra request. Use the URL-encoded format for best size.
Self-Contained HTML Emails
Email clients block external images but render inline Data URIs. Embed SVG logos and icons to ensure they always display.
Critical-Path Logo Rendering
Inline a site logo as a Base64 Data URI in the HTML <head> so it renders with the first byte, before CSS loads.
Component Library Icons
Bundle SVG icons as Base64 Data URI strings in JavaScript or TypeScript modules — no build-time SVG processing needed.
Frequently Asked Questions
Should I use Base64 or URL-encoded SVG?
For CSS background-image, URL-encoded SVG is usually smaller and parses slightly faster — the browser doesn't need to decode Base64. For HTML <img> src or embedding in JSON, Base64 Data URI is standard. The CSS tab shows both so you can compare sizes.
Does Base64 encoding preserve SVG animations?
Yes. Base64 is lossless — the decoded SVG is byte-for-byte identical to the original. SMIL animations, CSS animations inside <style> tags, and JavaScript-driven SVGs are all preserved.
Why is the URL-encoded version sometimes smaller?
Base64 inflates any input by about 33%. SVG is XML text, and many of its characters (letters, spaces, <, >) have compact URL-encoded representations or pass through unchanged. For a typical SVG icon, the URL-encoded string is usually 10-20% shorter than the Base64 equivalent.
Can I embed a Base64 SVG in a CSS file?
Yes — use background-image: url("data:image/svg+xml;base64,..."). Both Base64 and URL-encoded forms are supported in all modern browsers. Avoid embedding large SVGs in CSS, as it prevents the stylesheet from being cached independently.
What's the difference between pasting SVG code and uploading a file?
The output is identical. Pasting is more convenient when you already have the SVG markup from an icon library or design tool. Uploading is easier when you have a .svg file on disk.
Does the SVG file get uploaded to a server?
No. All encoding is done in the browser using the FileReader API and TextEncoder/btoa. Your SVG markup never leaves your device.