SVG to CSS converter
Turn SVG code into a CSS background with a compact, URL-encoded data URI.
Input
You can also drop a file onto the field.
Result
Preview
The preview appears here.
Everything happens in your browser. Your data never leaves your device.
What is it?
A data URI embeds the SVG directly in your stylesheet, so the browser needs no extra request. URL encoding keeps the code shorter and more readable than Base64, which makes it the best choice for icons, patterns and backgrounds in CSS.
How it works
Paste your SVG or drop an .svg file onto the field. Pick the output format, check the preview and copy the result into your CSS.
FAQ
- Why URL encoding instead of Base64?
- SVG is text. URL encoding only escapes a few characters, so the result is usually about a third smaller than Base64 and compresses better with gzip.
- Why does my SVG not show up?
- An SVG used as an image needs the attribute xmlns="http://www.w3.org/2000/svg" on its root element. The converter adds it if it is missing. External images and fonts inside the SVG are not loaded in CSS backgrounds.
- Is my SVG uploaded?
- No. The conversion runs entirely in your browser, nothing is sent to a server.