Turn SVG, CSS or text into a data URI

How to use the data URI converter

1. Paste your SVG, CSS or text into the Text, SVG or CSS box.
2. Choose the Content type: image/svg+xml, text/css, text/html, text/plain, application/json or text/javascript.
3. Choose the Encoding: URL-encoded (smaller for SVG) or Base64.
4. Copy the Data URI. For SVG you also get CSS and HTML usage snippets and a preview of the image.

What it does and when to use it

A data URI puts a file’s content inside the URL itself, so the browser does not need to fetch anything. It is a common way to ship small SVG icons in a stylesheet: a checkbox tick, a dropdown arrow or a background pattern lives in the CSS and arrives with it.

Other uses: a tiny stylesheet or HTML page you want to open from a bookmark or link, JSON test data for a fetch call, or a self-contained demo. For binary files such as photos, use the Data URI Generator. For plain Base64 of any text without the data: prefix, use Base64 Encode.

How it works

The result starts with data:, the content type and ;charset=utf-8 for text types.

• URL-encoded SVG: line breaks and runs of spaces collapse to one space, double quotes become single quotes (or, when the SVG contains an apostrophe, both quotes become %22 and %27), and only characters that break a URL, such as <, >, # and %, are percent-encoded. That keeps the result short and still readable.
• URL-encoded other types: standard percent-encoding of everything except letters, digits and a few safe symbols.
• Base64: the text is encoded as UTF-8 bytes and then Base64.

Everything runs in your browser. The Length counter shows the size of the URI, and Source shows the size of your input in bytes.

Worked examples

The star icon sample, URL-encoded. The 131-byte SVG becomes a 178-character URI that starts:

data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E

The usage snippet is ready to paste: .icon { background-image: url("data:image/svg+xml;…"); }.

URL encoding against Base64. A 73-byte circle, <svg xmlns="…"><circle r="4" fill="#0f0"/></svg>, is 120 characters URL-encoded and Length: 140 as Base64.

JSON as Base64. {"ok":true} with application/json gives data:application/json;charset=utf-8;base64,eyJvayI6dHJ1ZX0=.

Limits and tips

• Run large SVGs through an optimiser first; editor metadata and long path numbers make the URI much longer.
• Many browsers block top-level navigation to data:text/html links for security, though they still work inside an iframe or object.
• The # in colours such as #f59e0b must be encoded as %23, which the tool does. A raw # would end the URI early.
• To check or tidy the SVG markup first, run it through the HTML Formatter.