Data URI Generator
Note: Inside url("…") a double quote ends the string early. If your SVG uses double quotes on its attributes they must become single quotes — the generated CSS below does this for you.
Under about a kilobyte, inlining usually wins — the request overhead exceeds the payload. Between one and four kilobytes it depends on how many other requests are competing. Above four kilobytes it is nearly always a loss, and above ten it is clearly one: a large data URI in your stylesheet delays every rule after it, cannot be cached separately, and is re-downloaded whenever any part of that CSS changes.
The encoding matters more than people realise, particularly for SVG. Base64 inflates any input by a third. SVG is text, so it does not need Base64 at all — percent-encoding only the handful of characters that would break a CSS url() typically produces a string 20 to 30% shorter than the Base64 equivalent, and it stays readable and diffable. This tool picks that route automatically for SVG and other text formats, and shows you both numbers so the choice is visible.
One detail that costs people an afternoon: inside a CSS url() the string must be quoted, and if the SVG contains double quotes they have to become single ones or the declaration ends early. The generated CSS handles that swap.
Frequently Asked Questions
When is inlining actually worth it?
Below roughly one kilobyte, almost always — the round trip costs more than the bytes. Between one and four, it depends on your request budget. Above four kilobytes it is generally a loss, because the string sits in a render-blocking file, cannot be cached on its own, and is re-fetched whenever that file changes.
Why is my SVG not Base64 encoded?
Because it does not need to be. SVG is text, and percent-encoding only the characters that would break a CSS url() gives a string around a quarter shorter than Base64 — and one you can still read. Base64 is for binary formats that have no safe textual form.
Why does my CSS break when I paste the URI in?
Almost certainly unescaped double quotes inside the SVG. Within url("…") a double quote ends the string early and everything after it is a syntax error. Swap them for single quotes — the generated CSS below already does.
Can I use a data URI for a font?
You can, and it is usually a mistake. Fonts are large, so the string is enormous, and inlining one means it is downloaded again with every change to the stylesheet instead of being cached for a year. Self-host the file and preload it.
