Convert a Data URI Back to SVG: Safe Decode Guide

Convert a Data URI Back to SVG

SVG Data URIs are convenient when you need a small inline icon in HTML or CSS. They are less convenient when you inherit a long data:image/svg+xml... string and need the original, editable SVG again.

The short answer is simple: remove the Data URI header, decode the payload, then validate the SVG before you save or reuse it. The safer answer is a small workflow that handles both Base64 and URL-encoded SVGs without trusting the decoded markup blindly.

This guide was inspired by a practical Stack Overflow discussion about converting a Data URI back to SVG: Converting a data URI back to SVG.

Know Which Data URI You Have

Most SVG Data URIs use one of these formats:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...
data:image/svg+xml,%3Csvg%20xmlns%3D%22http...

The comma is the divider. Everything before it describes the media type and encoding. Everything after it is the encoded SVG payload.

Decode Base64 SVG

For a Base64 SVG, split at the first comma and decode the second part:

function dataUriBase64ToSvg(dataUri) {
  const [, payload] = dataUri.split(",", 2);

  if (!payload) {
    throw new Error("Invalid SVG Data URI");
  }

  return new TextDecoder().decode(
    Uint8Array.from(atob(payload), (char) => char.charCodeAt(0)),
  );
}

Use TextDecoder instead of assuming ASCII. Real SVG files often contain non-English text, metadata, or symbols that need UTF-8-safe decoding.

Decode URL-Encoded SVG

If the Data URI does not include ;base64, the payload is usually URL encoded:

function dataUriEncodedToSvg(dataUri) {
  const [, payload] = dataUri.split(",", 2);

  if (!payload) {
    throw new Error("Invalid SVG Data URI");
  }

  return decodeURIComponent(payload);
}

This form is common in CSS backgrounds because it can stay shorter and more readable than Base64 for simple icons.

A Safer Universal Decoder

In production tools, detect the encoding before decoding:

function dataUriToSvg(dataUri) {
  const [header, payload] = dataUri.split(",", 2);

  if (!header?.startsWith("data:image/svg+xml") || !payload) {
    throw new Error("Expected an SVG Data URI");
  }

  if (header.includes(";base64")) {
    return new TextDecoder().decode(
      Uint8Array.from(atob(payload), (char) => char.charCodeAt(0)),
    );
  }

  return decodeURIComponent(payload);
}

After decoding, check that the result begins with an <svg> root and can be parsed as XML. Do not skip this step.

Browser Shortcut

For quick recovery, you can paste a Data URI into the browser address bar, let it render, and save the result. That is useful for one-off debugging, but it is not a reliable team workflow because it does not validate, sanitize, or document what changed.

Best Practices Before Reusing the SVG

1. Validate the decoded XML.
2. Remove scripts, event handlers, external references, and foreignObject.
3. Check viewBox, width, height, and clipping.
4. Open the result in SVG Viewer before committing it.
5. If the file is going back into a Data URI, re-export it with SVG to Data URI.

Common Mistakes

• Decoding the whole string instead of only the part after the comma.
• Using Base64 decoding on a URL-encoded SVG.
• Saving decoded markup before checking that it is valid XML.
• Reusing untrusted SVG content without sanitizing it.
• Forgetting that CSS, HTML, and JSON each need different escaping.

SVGView Workflow

Use this flow when the asset matters:

1. Decode the Data URI.
2. Paste the SVG into SVG Viewer.
3. Clean risky markup with SVG Sanitizer.
4. Reduce file size with SVG Optimizer.
5. Export a fresh Data URI with SVG to Data URI.

Summary

Converting a Data URI back to SVG is not just a decoding trick. It is an asset recovery workflow: identify the encoding, decode only the payload, validate the XML, sanitize the markup, and preview the final SVG before reuse.