Convert SVG to a data URI

How to use it#

1. Drop an SVG file onto the box above, or paste its markup into the box below it.
2. Pick URL-encoded or base64, and the form you need: the bare data URI, a CSS background rule, or an img tag.
3. Leave Remove comments and spare whitespace first ticked for a shorter result, or untick it to keep the markup exactly as it is.
4. Copy the result from the box at the bottom.

Why SVG does not need base64#

Base64 exists to carry binary data as text, and it makes whatever it carries about a third larger. A PNG needs that. An SVG is already text, so it can go into a data URI almost as it is, which is shorter than base64 for most SVGs and stays readable, so you can still see which icon it is and tweak a colour in place.

Almost as it is, because a few characters mean something in the places a data URI is pasted. Text in a script such as Chinese or Arabic is the exception, since every letter becomes several escapes, and base64 can come out shorter. The counts beside the preview show both encodings for your SVG, so you can choose on the real numbers.

Exactly which characters are escaped, and why#

A hash sign ends a URL and starts a fragment, so an unescaped # in a colour such as #ff0000 cuts the SVG off at that point, which is a common reason a hand-made SVG data URI shows nothing. A percent sign starts an escape, so a literal one is escaped itself. Angle brackets are refused by some browsers inside a URL. A double quote would end the url("…") or the src="…" around it, and an ampersand or a backslash would be read as the start of something else in HTML and CSS.

Everything else is left alone. Double quotes around attribute values become single quotes where that is safe, which saves four characters per attribute over escaping them, and any letter outside plain ASCII is escaped as UTF-8, so the result survives being saved in a file of any encoding.

When inlining an SVG is the right call#

A data URI saves a request, which is worth it for small icons used on one page, such as a chevron in a select box, a checkmark, or a background pattern in a stylesheet that would otherwise wait for a second download. It keeps a component self contained, too, with no separate file to ship alongside it.

It is the wrong call for a large illustration, or for an icon repeated in the HTML of many pages. An inlined SVG is downloaded as part of whatever holds it, so a copy in each page is downloaded with each page, and it cannot be cached on its own. Past a few kilobytes, a separate file usually wins.