SVG to Base64 Converter

Inlining a small SVG icon as a data URI saves an HTTP request and keeps a stylesheet or component self-contained. This tool turns an SVG file or pasted SVG code into both kinds of data URI — URL-encoded, which keeps the markup readable and is usually smaller, and Base64 — with ready-to-paste CSS background-image and HTML img snippets and the size of each. It checks that the code really is an SVG and adds a missing xmlns, without which a data URI does not display.

How to use this tool

1. Drop .svg files or paste the SVG code.
2. Keep "Light minify" on to drop the XML declaration, comments and extra whitespace.
3. Choose which data URI the CSS and HTML snippets use.
4. Copy the result you need; the sizes show which form is shorter.

Formula

URL-encoded: data:image/svg+xml, + the SVG with " changed to ' (when the SVG contains no '), and only %, #, <, >, {, }, &, ", \, ^, `, |, control and non-ASCII characters percent-encoded (UTF-8). Base64: data:image/svg+xml;base64, + Base64 of the UTF-8 bytes, 4 characters per 3 bytes.

Browsers accept unescaped spaces, quotes of the other kind, = and / inside a quoted url("…") or src="…", which is why URL-encoding only what is required stays short. A # must always be escaped (it would start a fragment), as must %. Minifying keeps a single space inside text, so <text> content is not changed.

Example

The 163-byte test SVG becomes a 202-character URL-encoded data URI (each of its two # becomes %23 and its seven < and > become %3C or %3E) but a 246-character Base64 data URI: 4 × ⌈163 ÷ 3⌉ = 220 Base64 characters plus the 26-character prefix.