Data URI Generator
Turn SVG, CSS or text into a data URI, with a straight answer about when inlining costs more than it saves.
About this tool
Converts pasted text — an SVG, a snippet of CSS, a font subset declaration — into a `data:` URI you can inline.
**Inlining trades a request for size, and the trade only works on something tiny.** Base64 adds a third to the payload, and an inlined asset cannot be cached separately from the page that carries it. A 40KB icon inlined into a stylesheet is 54KB downloaded on every page view, forever, where the external file would have been fetched once and reused.
**SVG should not be base64 at all.** URL-encoded SVG is smaller than the base64 of the same file, and it stays readable — so a colour can be changed later without re-encoding anything. Both forms are produced here so the difference is visible rather than asserted.
This takes text. Binary images are not accepted, and inlining one is almost always the wrong call anyway.
Common questions
When is inlining worth it?
Under about 4KB, for something needed immediately — an icon in the critical CSS, a tiny placeholder. Above that the size penalty and the lost caching cost more than the request saved.
Why is URL-encoded SVG better than base64?
It is smaller — base64 inflates by a third and URL encoding only escapes the characters that need it. It also stays readable, so a fill colour can be changed in the stylesheet without re-encoding the whole thing.
Do data URIs hurt performance?
They can. An inlined asset is downloaded with every copy of the file containing it and can never be cached on its own. Inlining several icons into a stylesheet makes that stylesheet render-blocking and large at once.
Can I inline a font?
Technically. It is nearly always wrong — a font is tens of kilobytes, it is needed after first paint rather than during it, and inlining it makes the stylesheet that much larger and that much slower to arrive.