Base64 to SVG

Paste a Base64 string — or a full data:image/svg+xml;base64,… URI — and decode it back to SVG source, with a live preview. Everything runs in your browser — nothing is uploaded.

BASE64

Clear

Base64 input

SVG SOURCE

Download SVG Copy

SVG source output

Waiting for input

How to decode Base64 to SVG

Paste your Base64 into the input above. The tool Base64-decodes it to raw bytes locally, interprets those bytes as UTF-8 text, and shows the resulting SVG markup in the output box. A full data:image/svg+xml;base64,… URI works too — the data-URI prefix is stripped automatically. Click Download SVG to save an .svg file, or Copy to copy the source.

Displaying the decoded SVG

The live preview above the source box renders the decoded bytes as an image, so you can confirm the SVG is intact before you use it. Once you have the SVG, you have three easy ways to display it:

• Inline in HTML — paste the decoded <svg>…</svg> markup directly into your page. This gives you full control to style and animate it with CSS.
• As a data URI in CSS — background-image: url('data:image/svg+xml;base64,…'); keeps the original Base64 and avoids an extra network request.
• As a saved file — download the .svg and reference it with <img src="icon.svg"> or url('icon.svg').

Going the other direction? Use SVG to Base64 to encode an SVG into a data URI, and see Base64 image encoding for how images become Base64 in the first place.

Is this private?

Yes. The conversion runs fully in the browser with JavaScript — your Base64 is decoded and previewed locally and nothing is uploaded to any server. You can confirm in DevTools → Network: decoding fires no request.

Frequently asked questions

How do I convert Base64 to an SVG file?

Paste your Base64 (or a data:image/svg+xml;base64 URI) into the input above. The tool decodes it to the original SVG markup locally and shows a live preview. Click Download SVG to save it as an .svg file, or Copy to grab the source.

Why does my SVG not preview?

The preview only renders if the decoded bytes are valid SVG markup. If nothing appears, the Base64 likely decodes to something that isn't an SVG — a PNG, truncated data, or a non-image string. Check the output box: valid SVG should start with an <svg> tag.

How do I use the SVG as a CSS background?

Use the Base64 as a data URI: background-image: url('data:image/svg+xml;base64,PASTE_HERE');. You can also inline the decoded SVG markup directly in your HTML, or reference a saved .svg file with url('icon.svg').

How do I go from SVG back to Base64?

Use the SVG to Base64 tool, which reads your SVG file or markup and encodes it as Base64 or a ready-to-use data URI.