SVG tool

SVG to Base64 & CSS Data URI Encoder / Decoder

Encode an icon as Base64 or a CSS data URI. Decode a data URI back to SVG. Upload and conversion stay on your device.

Like the tool? Find a bug?Share with us

Converter

Advanced

Paste SVG, a data URI, or base64. Convert in this tab. Files stay on this device.

SVG inputSupported files: .svg, .txt, .css, .html

0 / 50,000

Base64 output

Base64 will appear here.

Preview

SVG preview appears here.

Guide

How this SVG to Base64 converter works

SVG becomes Base64

To Base64 writes the raw encoded string. Use it when an API or a font-style embed wants bytes, not a URI.

SVG becomes a data URI

To Data URI prefixes data:image/svg+xml. Wrap as CSS url() or an img tag when you need copy-paste CSS or HTML.

Data URI becomes SVG

To SVG decodes Base64 or UTF-8 data URIs, url() wrappers, and raw Base64. The preview uses an image so scripts in the SVG do not run.

Use it

What converts well

Inline SVG with xmlns, nested groups, gradients, and paths. Minify strips comments and whitespace between tags before encoding. UTF-8 data URIs stay shorter for simple icons; Base64 is safer in older CSS. The 50,000 character cap still applies.

FAQ

Questions

Does this upload my SVG?

The file is read in this tab with FileReader. Encoding and decoding never leave the browser. There is no account and no API call.

Base64 or data URI?

Base64 is the encoded payload. A data URI is that payload with data:image/svg+xml;base64, in front, ready for img src or CSS url().

Can I paste a CSS url()?

Yes. Paste a url("data:image/svg+xml…") or an img tag and switch to To SVG.

Is there a size limit?

Paste is capped at 50,000 characters so a huge dump cannot freeze the tab.