Base64 to SVG

How to decode Base64 to SVG

1. Paste the Base64, a data:image/svg+xml;base64,... URI, or the CSS or HTML that contains it. URL-encoded SVG data URIs (data:image/svg+xml,%3Csvg...) work too.
2. The preview draws the graphic and lists its dimensions, or “scalable” when the browser reports no fixed size. Below it is the full XML source.
3. Press Download file to save an .svg, or select the markup in the source pane to copy it.

SVG is plain text, so decoding gives you readable markup. Besides saving the file, you can find out what an icon in a stylesheet actually draws, which colors it uses, or why it does not render.

SVG safety: image preview vs inline markup

An SVG file is a document. It can contain <script> elements, event attributes such as onload, links, embedded HTML through <foreignObject>, and references to external images and fonts. What a browser does with all that depends on how the SVG is loaded:

This page decodes the bytes and hands them to an <img> as data:image/svg+xml;base64,..., so whatever the file contains, it is only drawn. The source pane shows the text without interpreting it.

If you plan to inline the SVG in a page, read the source first and look for:

• <script> elements and attributes starting with on, such as onload or onclick
• javascript: in href or xlink:href
• <foreignObject>, which can carry arbitrary HTML
• href values pointing at http:// or https:// addresses, which can be used for tracking
• <!ENTITY declarations, which some server-side XML parsers expand dangerously

Base64 hides all of this from a quick glance, which is why a malicious SVG often arrives encoded. Base64 itself protects nothing; see encoding vs encryption.

How SVG is recognized

Most SVG files begin with <svg or with an XML declaration, so their Base64 starts with PHN2Zy or PD94bWwg. A UTF-8 byte order mark in front adds 77u/, as in 77u/PHN2Zy....

The tool treats the data as SVG when the <svg tag is the first element, after skipping an XML declaration, comments and a <!DOCTYPE svg ...> line, all within the first 2 KB. In a data URI that declares image/svg+xml, the declared type is used either way. If an SVG is embedded in something else, such as an HTML page, or a very long comment pushes the tag past 2 KB, you get a “doesn’t look like SVG” note; type image/svg+xml into MIME type to render it.

When the SVG does not render

• “This SVG could not be rendered”. The XML is malformed: an unclosed tag, an unescaped &, or a truncated string that is missing the closing </svg>. Look at the end of the source first.
• It renders here but not on your site. Check how the site serves it. With a data URI, the type must be image/svg+xml; a file served as text/plain or application/octet-stream does not render as an image either.
• It renders inline but not as a data URI. The root element lacks xmlns="http://www.w3.org/2000/svg". Inline SVG in HTML does not need it, images do.
• The colors are wrong. An SVG used as an image cannot inherit currentColor or CSS from the page. It is drawn with whatever colors the file defines, black by default.

Use the decoded SVG in code

In the browser, the safe way to display a Base64 SVG is to keep it an image:

const img = new Image();
img.src = "data:image/svg+xml;base64," + b64;
document.body.append(img);

Writing element.innerHTML = atob(b64) instead puts the markup into your page, where its scripts and event handlers run with your page’s privileges. Note that atob() also returns bytes as Latin-1 characters, which breaks non-ASCII text in the SVG; Base64 in JavaScript shows how to decode UTF-8 properly. To encode an SVG, use SVG to Base64.

FAQ