Base64 to SVG Decoder

Have a Base64 encoded SVG string? Decode it back into a standard SVG file. Preview the image and download it for editing or use.

Base64 to SVG Decoder

Convert Base64 data URI strings back to SVG files

Base64 Input

How it works

This tool handles two-way conversion between Base64-encoded SVG data URIs and plain SVG code. Choose Decode mode to convert Base64 strings back to readable SVG, or Encode mode to convert SVG to Base64.

For decoding, paste your "data:image/svg+xml;base64,..." string. The tool strips the data URI prefix, decodes the Base64 characters, and returns the original SVG markup. A preview shows the rendered image.

Base64 format explained:

Base64 encoding converts binary data to ASCII text. SVG in Base64 looks like:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIvPjwvc3ZnPg==

For encoding, paste regular SVG code. The tool converts it to Base64 and wraps it in a data URI format. This is useful for embedding SVG directly in CSS or HTML without external files.

When You'd Actually Use This

Extracting SVG from CSS files

Found a Base64 SVG in someone's CSS and need to edit it? Decode it to get the original SVG code. Make your changes, then re-encode if needed.

Embedding icons in HTML emails

Email clients block external images. Encode your SVG icons as Base64 data URIs to embed them directly in email HTML. Ensures icons display reliably.

Inlining SVG for performance

Reduce HTTP requests by embedding small SVGs as Base64 in CSS background-image properties. Critical for above-the-fold icons and UI elements.

Recovering lost SVG files

Only have the Base64 string from a database or API response? Decode it to recover the original SVG file for editing in Illustrator or Figma.

Debugging SVG issues

Base64-encoded SVGs are hard to read. Decode them to inspect the actual SVG code. Find errors, check attributes, or understand what's being rendered.

Creating data URI favicons

Encode your SVG favicon as Base64 for inline use in HTML. Useful for single-file demos, offline apps, or avoiding extra HTTP requests.

What to Know Before Using

Base64 increases file size.Encoded data is about 33% larger than the original. Only use Base64 for small SVGs where the HTTP request savings outweigh the size increase.

Data URI format includes the prefix.Full format: data:image/svg+xml;base64,{encoded-data}. The tool handles both with and without the prefix for convenience.

Special characters need URL encoding in CSS.When using Base64 SVG in CSS, some characters may need escaping. The raw Base64 output works in HTML src attributes directly.

Large files may cause issues.Very long Base64 strings can slow down browsers or hit input limits. This tool works best with icons and small graphics under 100KB.

Pro tip: For CSS background images, consider using plain SVG with URL encoding instead of Base64. It's often shorter: background-image: url("data:image/svg+xml,{encoded}").

Common Questions

What's the difference between encode and decode?

Encode converts SVG code to Base64. Decode converts Base64 back to SVG code. Use encode for embedding, decode for editing.

Can I decode Base64 from an API response?

Yes, paste the Base64 string directly. If it includes the data URI prefix, the tool strips it automatically. You'll get clean SVG code.

Why encode SVG instead of linking the file?

Inline SVG eliminates HTTP requests, works offline, and avoids CORS issues. Trade-off is larger HTML/CSS file size.

Does the preview work for all SVGs?

Most SVGs render correctly. Complex SVGs with external references or advanced features may not display fully in the preview.

Can I download the decoded SVG?

Yes, in decode mode there's a Download button that saves the SVG as a .svg file. Use it to recover files from Base64 strings.

Is Base64 encoding secure?

Base64 is encoding, not encryption. Anyone can decode it. Don't use Base64 to hide sensitive data in SVG.

What if I get an error decoding?

Check that the string is valid Base64. It should only contain A-Z, a-z, 0-9, +, /, and = padding. Remove any whitespace or line breaks.

Other Free Tools

Search tools

Base64 to SVG Decoder