Skip to content
SVG Encoder

Base64 to SVG — Decode data URIs back to markup

Paste a data:image/svg+xml URI and get the original SVG markup. Handles both base64 and URL-encoded payloads. Runs client-side — your data never leaves your browser.

Decode SVG Data URI
Paste a base64 or URL-encoded SVG data URI to recover the original markup.

What is an SVG data URI?

An SVG data URI embeds SVG markup directly into a string that browsers treat as an image source. Instead of linking to a separate .svg file, the image data rides inside the HTML or CSS:

<!-- External file (1 HTTP request) -->
<img src="/icon.svg" />

<!-- Same icon, inlined as a data URI (0 requests) -->
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...%3C/svg%3E" />

Data URIs come in two flavors. URL-encoded SVGs replace special characters like <, >, and # with percent-encoded sequences (%3C, %3E, %23). Base64 SVGs encode the entire markup as a single base64 blob. This tool decodes both.

When to decode an SVG data URI

  • Recover lost source files

    You have an encoded SVG in your CSS or HTML but can't find the original .svg file. Paste the data URI to recover the markup.

  • Debug rendering issues

    An inline SVG isn't rendering correctly. Decode it to inspect the markup, check for missing xmlns attributes, or spot encoding errors.

  • Modify and re-encode

    Need to tweak colors, sizes, or paths in an existing encoded SVG? Decode, edit, then feed the result back through the encoder.

  • Audit third-party code

    Found a suspicious data URI in a codebase or extension? Decode it to see exactly what SVG markup is being injected.

Base64 vs URL-encoded — which is which?

EncodingStarts withSize overhead
URL-encodeddata:image/svg+xml,%3Csvg...~3–12% (varies by content)
Base64data:image/svg+xml;base64,PHN2...~33% (fixed overhead)

Both formats decode to identical SVG markup. The tool auto-detects which encoding your input uses — just paste and the right decoder runs. Non-ASCII characters (emoji, CJK glyphs in <text> elements) round-trip correctly through the base64 path.

Round-trip: encode → decode → encode

The decoder is the exact inverse of the encoder. If you encode an SVG to base64 and immediately decode it, you get the original markup back — byte-for-byte identical. This makes it safe to use in build pipelines that need to extract and process inline SVGs.

// Encode
const encoded = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0i..."

// Decode — recovers the original SVG
const decoded = decodeDataUri(encoded)
console.log(decoded.svg) // "<svg xmlns="http://www.w3.org/2000/svg"..."

// Re-encode if needed
const reEncoded = encodeSvg(decoded.svg, 'base64')

Need to encode an SVG instead? Use the main SVG Encoder for all 7 output formats (CSS, HTML, JSX, mask, favicon, object, and more). Or convert an SVG to an inline favicon on the SVG to Favicon tool. Read more about encoding tradeoffs on the Data URI vs Base64 blog post.

← Back to SVG Encoder