SVG to Data URI

How to turn SVG into a data URI

1. Paste the SVG markup into the Text box. Open a .svg file in any text editor to copy it. The box starts with a sample icon.
2. MIME type is already image/svg+xml, and Encoding is set to Optimized SVG.
3. Look at the table under the options. It lists the URI length and gzipped size for Base64, URL-encoded and Optimized SVG, marks the smallest, and has a Use button for each.
4. Choose an Output format: raw Data URI, CSS url(), HTML <img>, HTML <a> or Markdown. Then Copy output.

You can also drop an .svg in From file mode, which offers Base64 and URL encoding of the file as it is. The optimized variant and the comparison table need the markup in the text box.

Base64 vs URL-encoded SVG size

For the built-in sample, a 309-byte icon with a rounded square, a circle and a line, the table shows:

Plain URL encoding is the longest raw, because every space, quote, <, > and line break turns into three characters. After gzip it beats Base64 by a wide margin, though, since the markup keeps its repetitive structure and Base64 scrambles it. Stylesheets are almost always served compressed, so the gzipped column is the one that reaches users.

Optimized SVG wins both columns. For a small triangle icon of 103 bytes the gap is the same: Base64 166 characters, URL-encoded 172, optimized 136. SVG to Base64 has a comparison over a whole set of icons.

What “Optimized SVG” does

The optimizer makes four changes to the markup:

1. Collapses every run of whitespace, line breaks included, into one space and trims the ends.
2. Replaces " with ', but only if the SVG contains no ' already.
3. Percent-encodes with encodeURIComponent, then puts back the characters that are safe in a URI: space, =, :, /, , and ;.
4. Writes the remaining escapes in lowercase (%3c instead of %3C), which gzips slightly better: 220 bytes instead of 222 for the sample.

The result for the triangle icon:

data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M8 1 15 15H1z' fill='%23e33'/%3e%3c/svg%3e

The # of the color became %23. The escape is required: an unescaped # starts a URL fragment, and everything after it is silently dropped.

Quoting and context rules

Optimized output contains single quotes, raw spaces and raw parentheses, which is fine inside double quotes and nowhere else:

.icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' ...%3e"); }

<img src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' ...%3e" alt="">

Unquoted url(...) breaks on the spaces, and a single-quoted attribute ends at the first '. If the URI is assembled in JavaScript, inserted by a template engine or pasted into a system that rewrites quotes, Base64 is the safer pick: it contains only letters, digits, +, / and =, so it survives any context. Use the Use button in the table to switch.

The other limitations are small. Optimized SVG is always UTF-8 and ignores any other charset you choose, with a warning. Whitespace collapsing can change text in <text> elements that preserve spaces. And the SVG still needs xmlns="http://www.w3.org/2000/svg" on its root element, as every SVG used as an image does.

The optimizer in JavaScript

The same transformation fits in a few lines, for build scripts or CSS-in-JS:

function svgToDataUri(svg) {
  let s = svg.trim().replace(/\s+/g, " ");
  if (!s.includes("'")) s = s.replaceAll('"', "'");
  const keep = { "%20": " ", "%3D": "=", "%3A": ":", "%2F": "/", "%2C": ",", "%3B": ";" };
  return "data:image/svg+xml," + encodeURIComponent(s)
    .replace(/%[0-9A-F]{2}/g, m => keep[m] || m.toLowerCase());
}

It produces the triangle URI shown above. More on encoding in the browser and Node is on Base64 in JavaScript. To read an existing SVG data URI, paste it into Base64 to SVG or the Data URI Parser.

FAQ