Base64 to SVG
Decode a Base64 SVG string, preview the SVG image, and download it as a .svg file. Supports raw Base64 and data:image/svg+xml;base64, Data URLs.
Paste a Base64 string or SVG Data URL above, then click Decode SVG
Have an SVG to encode?
Encode an SVG file to Base64, Data URL, HTML img tag, or CSS background-image.
How to Decode Base64 to SVG
Paste Base64
Paste a raw Base64 string or a full Data URL starting with data:image/svg+xml;base64, into the text box.
Decode SVG
Click Decode SVG. The tool decodes the Base64, validates the SVG structure, and renders a live preview.
Copy or Download
Copy the SVG source code to the clipboard or download it as a .svg file, ready to use anywhere.
How to Preview a Base64 SVG
Once decoded, the tool renders the SVG in an <img> tag using the Base64 Data URI. The checkerboard background makes transparent areas visible.
You can also paste the following into your browser address bar to preview any Base64 SVG directly:
Browser address bar
data:image/svg+xml;base64,<your-base64>Where Does Base64 SVG Come From?
You may encounter Base64 SVG in the following situations:
- CSS background-image — SVG icons inlined as url("data:image/svg+xml;base64,…")
- HTML img src — SVG embedded directly in HTML without a separate file request
- JSON / API responses — SVG icons or logos returned as Base64 strings in API payloads
- Font files and design tokens — SVG assets exported as Base64 for use in design systems
Base64 vs URL-Encoded SVG
SVG can also be embedded without Base64, using URL encoding — data:image/svg+xml,…. Learn which approach produces smaller output and better compatibility.
Frequently Asked Questions
What is a Base64 SVG?
A Base64 SVG is an SVG file encoded as Base64 text so it can be embedded in HTML, CSS, JSON, or API payloads without a separate file. It commonly appears as a Data URL: data:image/svg+xml;base64,PHN2Zy4uLg==.
How do I decode a Base64 SVG?
Paste the Base64 string into the tool above and click Decode SVG. The tool handles both raw Base64 and Data URL formats automatically, with no library or command-line tools required.
Can I preview the SVG before downloading?
Yes. The tool shows a live checkerboard-background preview of the decoded SVG so you can verify it looks correct before copying or downloading.
What validation does the tool perform?
The tool checks that the decoded text contains both <svg and </svg> tags. If neither is found, it shows a warning. When a Data URL prefix is present, the MIME type is also validated.
Does the tool support URL-encoded SVG (not Base64)?
This tool specifically decodes Base64-encoded SVG. For URL-encoded SVG (data:image/svg+xml,%3Csvg…), URL-decode it first. To encode an SVG to Base64 or URL format, use our SVG to Base64 tool.
Where is my SVG processed?
Entirely in your browser. The Base64 string is never sent to any server. Decoding, validation, preview, and download all happen locally using the browser's built-in Web APIs.