Why Use SVG Data URIs?
Embedding SVGs as data URIs eliminates HTTP requests, works offline, and avoids CORS issues. Essential for CSS icons, favicons, and component libraries.
CSS Background-Image
Use background-image: url("data:image/svg+xml,...") to set icons or patterns without a separate file. Works in every modern browser.
CSS Custom Property
Store the URI as a --icon variable so you can reuse it across multiple selectors — great for design systems and component libraries.
Why Minify First?
Stripping comments, newlines, and extra whitespace before encoding reduces string length significantly — sometimes 30–50% — making your CSS leaner and faster to parse.
URL-encode vs Base64
URL-encoding (%3C etc.) keeps the URI human-readable and gzip-friendly. Base64 is ~33% larger but safer inside HTML attributes and older email clients.
xmlns Attribute Required
When using SVG as a data URI outside <img> tags, always include xmlns="http://www.w3.org/2000/svg" or some browsers will refuse to render it.
Colour & currentColor
Replace hardcoded fill colours with currentColor in your SVG before converting — then control the icon colour with CSS color, no extra URIs needed.