logoredraws.com

Decoding Base64 to SVG: What You Actually Get and How to Check It

How to decode a Base64 string into an SVG file, how to tell real vector logo artwork from an embedded raster image, and what to check before using the result.

Published

Contents
  1. The short answer
  2. Where Base64-encoded logos usually come from
  3. Identify the content before decoding
  4. How to decode the string
  5. Check whether the decoded SVG is real vector artwork
  6. Safety and usage caveats

The short answer

Base64 is a way of writing binary or text data as plain ASCII characters. It is not an image format. Decoding a Base64 string gives back exactly the bytes that were encoded. If those bytes were SVG markup, you get a working SVG file. If they were a PNG, JPEG or other raster image, you get that raster image, and renaming it to .svg will not turn it into vector artwork.

For logo work, the useful question is not only how to decode the string. You also need to know whether the decoded file contains editable vector paths or just pixels. This article covers both: how to decode the string, and how to inspect what comes out.

Where Base64-encoded logos usually come from

Base64 logo data most often appears in a data URI. A data URI places the file contents inline in HTML, CSS or JSON instead of pointing to a separate file. A Base64 SVG data URI begins with a prefix such as data:image/svg+xml;base64, followed by the encoded text. A Base64 PNG begins with data:image/png;base64, instead.

Some SVG data URIs are not Base64 at all. They hold URL-encoded or plain SVG markup after a prefix such as data:image/svg+xml;utf8, or data:image/svg+xml,. In that case nothing needs decoding. URL-decode the text if necessary and save it as an .svg file.

Identify the content before decoding

The MIME type in the data URI prefix is a strong hint, but it is only a label. The first characters of the Base64 string are more reliable, because common file types start with recognizable byte sequences that encode to recognizable text.

Base64 string starts with | Decodes to | What it means for a logo
PHN2Zy | <svg | SVG markup, which may contain vector paths
PD94bWw | <?xml | XML declaration, often the start of an SVG file
iVBORw0KGgo | PNG signature | Raster image, no vector paths
/9j/ | JPEG signature | Raster image, no vector paths
R0lGOD | GIF signature | Raster image, no vector paths

An SVG that begins with a comment, a DOCTYPE or leading whitespace will start with different characters. When the prefix does not match the table, decode the string and look at the result.

How to decode the string

First remove everything up to and including the comma in the data URI prefix. Only the encoded portion should be decoded. Also remove any line breaks or spaces that were added when the string was copied. Some sources use the URL-safe Base64 variant, which writes - and _ in place of + and /. Convert those characters back, or use a decoder that accepts the URL-safe form.

On Linux, and on macOS with a recent base64 utility, the command-line tool handles the conversion. Some macOS versions use -D instead of -d.

# encoded.txt contains only the Base64 text, with no data: prefix
base64 -d encoded.txt > logo.svg

In Python, the standard library can strip the prefix and decode in one short script:

import base64

data = open("encoded.txt").read().strip()
if data.startswith("data:"):
    data = data.split(",", 1)[1]

with open("logo.svg", "wb") as f:
    f.write(base64.b64decode(data))

In a browser console, atob() returns a binary string. Decoding it through TextDecoder keeps non-ASCII characters in the SVG, such as text in other scripts, intact:

const bytes = Uint8Array.from(atob(encoded), c => c.charCodeAt(0));
const svgText = new TextDecoder().decode(bytes);

Online decoders also exist. No evidence was available here to compare specific services. Pasting a string into a third-party site sends its contents to that service, so avoid this for unreleased or confidential client logos.

Check whether the decoded SVG is real vector artwork

An .svg extension does not prove the file contains editable vector paths. SVG is a container, and it can wrap a raster image. Open the decoded file in a text editor and look at its elements.

  • Vector shapes appear as elements such as path, circle, rect, polygon, line and ellipse. These can be edited and scaled without loss.
  • Live text appears as text elements. It depends on the named font being available, and that font may not be licensed for your use.
  • An image element whose href holds another data:image/png;base64 or data:image/jpeg;base64 string means the artwork, or part of it, is an embedded raster. It will blur or pixelate when enlarged.
  • A file that contains only an image element is a raster picture in an SVG wrapper. For editing purposes it is not a vector logo.

Opening the file in a vector editor and switching to an outline or wireframe view is a practical second check. Vector shapes show as editable outlines, while an embedded raster shows as a single rectangular box.

If the decoded result turns out to be raster, the only route to true vector artwork is redrawing or tracing it. Automatic tracing is an approximation. It is not a recovery of the original paths. Requesting the source vector file from the logo owner is usually the more accurate option.

Safety and usage caveats

SVG files can contain scripts, event handlers and references to external resources. Treat a decoded SVG from an unknown source as untrusted. Inspect or sanitize it before embedding it in a website or opening it in a context where scripts can run.

Being able to extract a logo from a web page does not mean you may modify or reuse it. The artwork may be covered by copyright, any fonts in it by their own licenses, and the mark itself by trademark rights. Brand guidelines or the owner's permission determine what you can do with it. Decoding the file only changes its form.