SVG to Base64

How to convert SVG to Base64

1. Drop an .svg file on the box or pick it with the file picker.
2. Output as starts on CSS background-image. Switch to Data URI, HTML <img>, Markdown or Plain Base64 if you need another form.
3. Press Copy output and paste the rule into your stylesheet.

The SVG is encoded exactly as saved. There are no resize or quality options here, since a vector does not need them. Run the file through an SVG optimizer first if you want a shorter string; removing editor metadata often saves more than any encoding choice.

Base64 or URL-encoded SVG

SVG is text, so it does not have to be Base64 at all. A data URI can carry the markup directly if a few characters are percent-encoded. Here is the same 104-byte triangle icon both ways:

/* Base64: 140 characters of data */
.a { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDIgMiAyMmgyMHoiIGZpbGw9IiNmOTAiLz48L3N2Zz4="); }

/* URL-encoded: 118 characters of data */
.b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 22h20z' fill='%23f90'/%3E%3C/svg%3E"); }

The URL-encoded version is shorter, and the gap widens after gzip: the two rules above compress to 200 and 162 bytes. With 20 small icons in one stylesheet, the Base64 version was 4,421 bytes (801 gzipped) and the URL-encoded one 3,720 bytes (615 gzipped). Repeated markup compresses well, and Base64 scrambles that repetition.

Base64 needs no escaping rules, survives any context that accepts a URL, and is what many APIs and build tools expect. The URL-encoded form breaks if you forget to escape # (it starts a URL fragment) or mix quote styles with the surrounding url("..."). SVG to Data URI builds both versions and shows their sizes.

Requirements for an SVG data URI

• MIME type image/svg+xml. Browsers sniff PNG and JPEG data even under a wrong type, but not SVG. With any other type the image does not render.
• The xmlns attribute. Inline <svg> in HTML works without it, but as an image the root element must declare xmlns="http://www.w3.org/2000/svg". Many hand-written icons lack it and fail silently.
• Well-formed XML. An unclosed tag or an unescaped & makes the whole image fail, with no partial rendering.

The Base64 of an SVG usually starts with PHN2Zy (<svg) or PD94bWwg (<?xml ). Anything else at the start, such as a comment or a byte-order mark, is fine for browsers but makes the format harder to recognize by prefix.

Styling and colors

An SVG used as background-image or in <img> is a separate document. Your page’s CSS cannot reach inside it, so hover colors and currentColor do not work. Two common workarounds:

• Use the data URI as a mask, then color it with background-color:

.icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask: url("data:image/svg+xml;base64,PHN2Zy...") center / contain no-repeat;
}

• Inline the <svg> markup in the HTML when the icon needs to change with state or theme.

Decoding and fixing

Base64 to SVG turns a Base64 string back into markup you can read and edit. If an SVG renders in an editor but not as a data URI, decode it there and check the root element for xmlns first.

FAQ