SVG to Data URI

How to use it

1. Paste a complete SVG document into the input box.
2. Leave the whitespace option ticked to strip comments and collapse extra spaces before encoding.
3. Press Convert. Both outputs appear at once and update on every edit.
4. Compare the sizes shown under the input box, then copy the form that suits your situation.
5. Copy the CSS block if you need a background-image rule with sizing already set.

Common use cases

• Inlining small icons - avoid an extra request for a handful of tiny graphics.
• Email and single file pages - keep an image working where external files cannot be loaded.
• CSS masks and cursors - supply an image value that has no path to resolve.
• Size budgeting - decide between the readable and the compact form with real numbers.

Why it stays private

Encoding uses the browser encodeURIComponent and btoa functions on the text you paste. There is no upload, no account and no network request.

FAQ

Q: Which format is smaller? A: It depends on the source. Base64 grows every three bytes into four characters, while URL encoding only expands characters that are unsafe in a URL. The status line shows both sizes so you can pick by measurement rather than by habit.

Q: Why does the CSS block use the base64 form? A: Base64 uses no characters that need escaping inside a quoted CSS value, so it survives minifiers and preprocessors unchanged. The URL encoded form is fine too, but it contains percent signs that some tooling treats specially.

Q: Can I inline an SVG that contains a script? A: You can, but browsers do not run scripts inside an image context such as background-image or img. Scripts only run when the SVG is inline in the document, which is one reason to review any SVG you did not write yourself.