Inlining SVG in CSS, done properly
A data URI puts the image bytes inside the stylesheet, so a small icon renders with no extra request. Most tools reach for
Base64, which makes the SVG about a third larger and hurts gzip. This converter uses minimal URL-encoding instead:
only the characters that break a CSS url() — #, <, >,
{, }, % and double quotes — are escaped, and the result is both smaller and still
readable. The size panel shows the alternative encoding so you can compare on your own file.
Three ways to use the output
- background-image — paints the SVG as-is. Use for multi-colour graphics, bullets, decorative backgrounds.
- mask-image — uses the SVG as a stencil for
background-color, so a single-colour icon can be recoloured from CSS (currentColor, hover states, dark mode). Both prefixed and unprefixed properties are included. - <img> — the same URI as an image source, for HTML that cannot reference external files.
Before encoding
"Optimise first" runs the SVG through SVGO (balanced preset, viewBox kept) so you are not embedding editor metadata in your stylesheet; it typically halves the URI. The converter also adds the SVG namespace if your markup lacks it — SVG in a data URI is a standalone document and renders blank without it. Keep inlined icons small: past a few kilobytes, a shared sprite or a cached file is the better trade.