Embed a file as a data URI

data:image/svg+xml;base64,… lets you inline assets in CSS or HTML without a second request — generate one locally.

Tools used in this guide

The job

Small icons and one-off assets can live inside the stylesheet instead of a separate file — handy for demos, emails, and single-file deliverables.

Encode

Paste text or drop a file (up to 8 MB). The URI is base64 with the MIME type in front; the CSS toggle wraps it as url("…"). Copy and paste wherever it goes.

Base64 inflates size by ~4/3 — an 8 KB icon becomes ~10.7 KB of text.
The file's MIME type comes from the browser; fix it in the text box if it reports application/octet-stream.

Worked example

A 2 KB SVG logo becomes a ~2.7 KB data URI that drops straight into background-image: url("data:image/svg+xml;base64,PHN2Zy…") — no extra request.

Where it stops

8 MB input cap — beyond that, linking beats inlining anyway. Everything is base64 (no percent-encoded variant). Nothing uploads; the file is read and encoded in-page.