Data URI generator — inline SVG, CSS, JSON or text as data URLs

How to use the data URI generator

1. Paste your content into Content, for example an SVG icon or a short CSS rule.
2. Choose the MIME type: text/plain, text/html, text/css, text/csv, text/javascript, application/json, application/xml or image/svg+xml.
3. Pick the Encoding: URL-encoded or Base64.
4. Leave Add ;charset=utf-8 for text types ticked unless you need the shortest possible URI and your content is pure ASCII.
5. Copy the Data URI. You also get its length, the content size in bytes, an image preview for SVG and a ready @import line for CSS.

What it does and when to use it

A data URI puts a small file directly inside a URL, so the browser does not have to fetch it separately. Typical uses:

• An SVG icon or background inside a CSS file, with no extra request.
• A tiny JSON or CSV file offered as a download link.
• A test fixture or a quick HTML page loaded into an iframe.
• Email templates or single-file demos that must not depend on other files.

For raster images such as PNG and JPEG, use the image to Base64 tool, which reads the image file. To check what a data URI contains, the Base64 decoder accepts the data:…;base64, prefix. For general URL escaping, use the URL encoder.

How it works

The format comes from RFC 2397: data: followed by the MIME type, optional parameters such as ;charset=utf-8, an optional ;base64 marker, a comma, and the data.

• Base64: the content is turned into UTF-8 bytes and Base64-encoded.
• URL-encoded SVG: whitespace runs are collapsed to one space, double quotes become single quotes (or %22 and %27 when the SVG contains an apostrophe), and only the characters that break URLs or CSS, such as <, >, # and %, are percent-encoded. This keeps SVG short and readable.
• URL-encoded, other types: standard percent-encoding of everything except letters, digits and -_.~.

Everything runs in your browser.

Worked examples

Hello, world!  (text/plain, Base64)
→ data:text/plain;charset=utf-8;base64,SGVsbG8sIHdvcmxkIQ==

<svg xmlns="http://www.w3.org/2000/svg"><rect width="4" height="4" fill="#f00"/></svg>
(image/svg+xml, URL-encoded, no charset)
→ data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='4' height='4' fill='%23f00'/%3E%3C/svg%3E

body{color:red}  (text/css, URL-encoded)
→ @import url("data:text/css;charset=utf-8,body%7Bcolor%3Ared%7D");

The SVG result is 119 characters, against 142 for the same SVG in Base64. Note how #f00 became %23f00: an unescaped # would end the URL.

Limits and tips

• The content is treated as text. Binary files such as PNG or fonts cannot be pasted here.
• Keep data URIs small. Large ones slow down the first render of the page that contains them.
• In CSS, wrap the URI in quotes: url("data:…").