SVG to Data URI Converter

Why not Base64

Base64 is designed to move binary data safely through text channels. SVG is already text, so encoding it into Base64 means taking text, treating it as bytes, and re-encoding those bytes as different text — paying a flat 33 per cent size penalty for a conversion that was never necessary.

URL encoding escapes only the characters that would break a CSS url() value: <, >, #, quotes and a few others. Most of an SVG — tag names, attribute names, numbers, path data — passes through untouched. The result is typically 20 to 30 per cent smaller than the Base64 version, and for icon-sized SVGs the difference is a meaningful share of the total.

The second advantage is practical rather than numerical: the output is readable. You can look at a URL-encoded SVG in a stylesheet and see it is a chevron, and you can change %23000 to %23fff to recolour it. A Base64 blob has to be decoded, edited and re-encoded for the same change.

The quoting rules that trip people up

Most broken SVG data URIs come down to quote handling, and the rule is simple once stated: use single quotes inside the SVG and double quotes around the whole url() value.

SVG markup is full of double-quoted attributes. If the url() value is also double-quoted, the first attribute quote terminates the string and everything after it is garbage. Converting the SVG's internal quotes to single quotes avoids this without any escaping. This tool does that conversion automatically.

Two more requirements. The # character must always be encoded as %23 — it starts a URL fragment otherwise, which silently truncates every hex colour in your SVG and is the second most common cause of a data URI that renders as nothing. And the SVG must carry an explicit xmlns="http://www.w3.org/2000/svg" attribute: inline in HTML the namespace is inferred, but in a data URI the SVG is parsed standalone and will not render without it.

What to strip before encoding

SVGs exported from design tools carry a surprising amount of material that does nothing in a browser. On an icon, removing it often halves the file.

• XML declarations and DOCTYPE — unnecessary in a data URI.
• Editor metadata — <metadata>, and the sodipodi: and inkscape: namespaced attributes Inkscape adds.
• Comments — including the generator comment Illustrator inserts.
• Empty groups and unused definitions left over from editing.
• Excess precision — path coordinates carried to six decimal places when two is visually identical.
• Whitespace between tags.

The cleanup option here handles the safe subset of these. For heavier optimisation, particularly path simplification and precision reduction, SVGO is the standard tool and worth running as a build step. One caution: if your SVG is animated or manipulated by JavaScript, aggressive optimisation can strip the IDs and structure those depend on — and in any case, a data URI cannot be scripted, so an interactive SVG should stay inline in the HTML rather than becoming a data URI at all.

How to use the SVG to Data URI Converter

1. Paste your SVG markup

   Or upload an .svg file. Make sure it has an xmlns attribute — without it a data URI will not render.

2. Turn on cleanup

   Removes comments, editor metadata and the XML declaration. Leave it off if you need the markup preserved exactly.

3. Check the size comparison

   The URL-encoded and Base64 sizes are shown side by side so you can see the saving.

4. Copy the CSS snippet

   The background-image form is ready to paste, with quoting already correct.

Frequently asked questions