SVG to Base64 Encode

Paste SVG markup (or drop an .svg file) and get four ready-to-paste results at once: the raw Base64 string, a data:image/svg+xml;base64,… data URI, an HTML <img> tag, and a CSS background-image rule. Everything is computed in your browser as you type.

Encoding an SVG as Base64 turns an image into a string you can inline directly in HTML, CSS, JSON, a Markdown file or a JavaScript bundle. That removes one HTTP request per icon, which is why small logos, spinners, chevrons and favicons are so often inlined.

How to use it

1. Paste your SVG source into the box, or upload an .svg file — the upload is read locally and dropped into the same field.
2. Copy whichever output you need:
   • Base64 string — the encoded payload on its own, for a JSON field or an API.
   • Data URI — paste it into a browser address bar to preview the image instantly.
   • HTML image — a complete <img src="data:…"> tag.
   • CSS background — a complete background-image: url('data:…'); declaration.

Does this work with non-English or emoji text inside the SVG?

Yes. The SVG is UTF-8 encoded before it is Base64-encoded, so accented characters, CJK glyphs and emoji inside <text> elements survive the round trip. (A naive btoa() call — which is what many older tools use — throws an error on exactly this input.)

Should I Base64-encode SVG, or use it raw?

Base64 is the safest choice for a data URI because it cannot break out of the surrounding quotes. It does, however, inflate the payload by roughly 33%. For CSS specifically, a URL-encoded (percent-encoded) SVG is smaller than a Base64 one — but Base64 is universally supported and is what most build tools emit. For anything larger than a few kilobytes, an external .svg file that the browser can cache is usually the better call.

Why is my data URI not rendering?

Three common causes: the markup is missing the xmlns="http://www.w3.org/2000/svg" namespace attribute (required in a data URI, even though it is optional when the SVG is inline in HTML); the SVG has no explicit width/height or viewBox, so it collapses to zero size; or the SVG references an external font or image that a data URI cannot resolve.

Can I use the CSS output with a content security policy?

A data: URI in background-image needs img-src data: (or default-src data:) in your CSP. If your policy blocks data: URIs, serve the SVG as a file instead.

Is my SVG uploaded anywhere?

No. The conversion runs entirely in your browser using the standard TextEncoder and btoa APIs. Nothing is sent to a server, so it is safe to paste proprietary artwork, internal logos or anything else you would not want to upload.

Related

Need to encode a PNG, PDF or any other file type? Use the File to Base64 Converter. Going the other way, from a Base64 string back to text, is Base64 Decode.