Delimiter.live
Encoding & Security Tools Runs in your browser Free · no account

Data URI Encoder

The data URI encoder converts SVG, CSS, JavaScript, HTML, JSON or plain text into a data: URI you can embed directly in a stylesheet or a src attribute, removing a network request. It defaults to percent-encoding, which is smaller than Base64 for text and leaves the content readable.

Options
Source 0 characters
Data URI

Your result will appear here.

Not sure where to start? Use Load example.

Results update automatically and are calculated on your device. Nothing you type is sent to a server.

Runs in your browser. Processing happens entirely in your browser. Nothing you enter is sent to Delimiter.live.

How to use the Data URI Encoder

  1. Paste your SVG, CSS or text.
  2. Pick the content type so the correct MIME type is written into the URI.
  3. Leave the encoding on percent-encoding unless the content is binary.
  4. Choose a wrapper if you want the CSS url() or an img tag around it, then copy.

Example

Input
<svg/>
Output
data:image/svg+xml,%3Csvg%2F%3E

Common use cases

  • Embedding a small icon in a stylesheet to remove an HTTP request.
  • Inlining an SVG background so it cannot flash in after first paint.
  • Putting a placeholder image into a template without hosting a file.
  • Embedding a tiny JSON or CSS payload directly in a document.

Limitations and things to watch for

  • A data URI cannot be cached separately from the document that contains it, so an image used on many pages is usually better served as a file. These are worth it for small, single-use assets.
  • Base64 adds roughly a third to the size. For text formats such as SVG, percent-encoding is typically a third smaller and stays readable in the source.
  • This takes text input. Encoding a PNG or a font means Base64-encoding the file itself, which needs a file upload rather than a paste.
  • Very large data URIs slow parsing and bloat every page that includes them. A few kilobytes is a sensible ceiling.

Frequently asked questions

Should I use Base64 or percent-encoding?
Percent-encoding for anything text-based, including SVG — it is roughly a third smaller than Base64 and the content stays readable in your stylesheet. Base64 is only necessary for genuinely binary data.
Why is my SVG data URI breaking my CSS?
Almost always a quoting clash. The encoder converts double quotes inside the SVG to single quotes and escapes the characters that would end the URI, so the result is safe inside url("…"). If you rewrap it by hand, keep that in mind.
Is a data URI faster than a file?
For a small, single-use asset, yes — it removes a request and cannot flash in late. For anything reused across pages it is slower overall, because it is re-downloaded with every document instead of being cached once.
Can I encode a PNG or a font?
Not here — this takes pasted text. Binary files need to be read as bytes and Base64-encoded, which requires a file upload; this tool deliberately does not accept one.
Is my content uploaded?
No. Encoding runs entirely in your browser.

Share this tool