Convert an SVG to a CSS background
Paste an SVG and get a ready-to-paste CSS background-image rule for your stylesheet, with no need to host a separate image file.
Why use an SVG as a CSS background instead of an image file?
Encoding an SVG directly in the stylesheet as a data URI avoids an extra HTTP request to load a separate image file, which can slightly speed up rendering for small icons. It's also handy for self-contained components (a single CSS file already includes its icon).
Why is the SVG URL-encoded rather than base64-encoded?
URL encoding (with a few escaped characters such as #, < and >) generally produces a shorter, more readable data URI than base64 for text like SVG, which slightly reduces the final CSS size.
Can I change the icon's color after embedding it as a CSS background?
No, once encoded as a background-image, the SVG's color is fixed in the data URI: to change the color, edit it in the source SVG before regenerating the CSS (for example with our SVG color replacement tool).
100% local processing: the encoding happens entirely in your browser, and your SVG is never sent to a server.