SVG to Base64: Embed Icons Without an Extra HTTP Request
Encoding an SVG as a data URI lets you embed it directly inside CSS or HTML — no separate file, no extra network request. This tool converts pasted or uploaded SVG markup into both a base64 data URI and the smaller URL-encoded alternative, with a live preview and a ready-to-paste CSS background-image declaration.
URL-encoded is usually smaller than base64 for SVG specifically, since SVG is already text.
Why URL-Encoding Beats Base64 for SVG
Base64 encoding is designed for arbitrary binary data and has a fixed ~33% size overhead regardless of content. SVG is plain text (XML), so URL-encoding — which only escapes the specific characters that would otherwise break a data URI or CSS url() — is typically more compact than converting that same text through base64's binary-oriented scheme.
When Inlining Actually Helps
Inlining trades a network request for a larger inline payload. This is a clear win for small, frequently-reused icons (checkmarks, arrows, small logos) where the HTTP request overhead — even with caching — outweighs a few hundred bytes of inline data. For large or rarely-used SVGs, a regular file reference with proper caching is usually still better.
Escaping Characters for CSS url()
When an SVG data URI is used inside CSS's url("..."), any unescaped quote or parenthesis in the URL-encoded string would prematurely close the url() function or the surrounding quotes. This tool escapes those specific characters (', ", (, )) in the URL-encoded output so it's safe to drop directly into a background-image declaration.
Practical Examples
Inlining a Small Icon
Avoiding a separate icon file request.
- 1.Paste SVG markup for a checkmark icon
- 2.Copy the URL-encoded data URI
- 3.Use as background-image in a .icon-check class
Comparing Encoding Sizes
Choosing the more compact option.
- 1.Base64 output: ~450 characters
- 2.URL-encoded output: ~340 characters
- 3.URL-encoded wins for this SVG
What You Get
- Base64 data URI: universally compatible
- URL-encoded data URI: usually smaller
- Ready-to-use CSS: background-image declaration
- Live preview on a checkerboard (transparency-aware) background
Good Use Cases
- Inlining small, reusable icons directly in CSS
- Avoiding an extra HTTP request for a tiny logo
- Embedding an SVG in an email template (which often can't reference external files)
- Quickly checking a data URI's actual rendered output
Frequently Asked Questions
Why convert an SVG to a data URI instead of linking to a file?
A data URI embeds the image directly in your CSS or HTML, eliminating a separate HTTP request. This is useful for small, frequently-used icons where the request overhead outweighs the (small) size cost of inlining.
Base64 or URL-encoded — which should I use?
URL-encoded is typically 20-30% smaller than base64 for SVG specifically (since SVG is text, and base64 adds ~33% overhead encoding text as if it were arbitrary binary). Use URL-encoded when you can, and base64 when a tool or system specifically expects it.
Why does the URL-encoded version escape quotes and parentheses?
Those characters have special meaning inside a CSS url(...) function. Encoding them as %27, %22, %28, %29 avoids breaking the surrounding CSS syntax, since a raw quote or parenthesis in the data URI could prematurely terminate the url() value.
Does this work for any SVG, including ones with embedded fonts or scripts?
It encodes whatever SVG markup you provide, but SVGs embedded via CSS background-image or img src have some restrictions — scripts inside them typically don't execute, and external resource references (fonts, other images) may not resolve depending on the embedding context.
Is my SVG uploaded anywhere?
No, encoding happens entirely in your browser using the native btoa/TextEncoder and encodeURIComponent APIs — no upload, whether you paste markup or select a local file.
Why does my SVG file upload work but pasting the same content sometimes look different?
File upload reads the file's raw bytes as text, which is identical to pasting the same content — if the preview differs, check for a UTF-8 BOM or encoding declaration mismatch in the original file that could affect how special characters are interpreted.