How to Use This Tool
Putting an SVG straight into CSS as a background-image removes an HTTP request and stops the
icon flashing in late. The question is how to encode it, and the popular answer is the wrong one.
Do not use base64
Base64 represents three bytes with four characters, so it is 33% larger by definition
— before you have gained anything. Worse, it destroys compressibility: SVG is text full of repeated
substrings like stroke-width and path d=, which gzip and brotli compress
beautifully, and base64 turns that into high-entropy noise they can barely touch. On a stylesheet with a
dozen inlined icons the compressed difference is substantial.
The alternative is to percent-encode only the characters CSS actually cannot handle.
That is a short list: <, >, #, %, the quote
character you are not using as the delimiter, and newlines. Everything else — letters, digits, spaces,
slashes, equals signs — can stay as it is. The result is bigger than the raw SVG but smaller than
base64, and you can still read it, which matters the day you need to change a colour without regenerating
anything.
The hash character will catch you out
If your SVG contains fill="#2b7fff" and you paste it into CSS unescaped, everything after
the # is treated as a URL fragment and the image silently fails. No console error, no broken
image icon — just nothing. This is the single most common reason an inline SVG works when opened as a
file and not when used as a CSS background.
The xmlns attribute is not optional here
Inside an HTML document a browser will forgive a missing xmlns, because it already knows it
is parsing HTML. A data URI is parsed as a standalone XML document, so without
xmlns="http://www.w3.org/2000/svg" it fails to render entirely. Editors like Illustrator
usually include it; hand-written and heavily optimised SVGs often do not. The tool adds it if it is
missing.
When to inline and when not to
Inline small, decorative, unchanging things: icons, checkmarks, chevrons, subtle background patterns. Under about 2 KB the saved request is worth more than the added stylesheet weight.
Do not inline large illustrations. They bloat the stylesheet, which is render-blocking, so a 40 KB inlined graphic delays first paint for the entire page rather than loading alongside it. Keep those as separate files where the browser can fetch them in parallel and cache them independently.
Recolouring
A data URI cannot inherit currentColor — the SVG is a separate document and knows
nothing about your CSS. If you need one icon in several colours, either generate one URI per colour, or use
mask-image instead of background-image and set background-color,
which lets a single monochrome shape take any colour you like.
