SVG to CSS
Turn an SVG into a CSS background data URI.
Runs in your browser: what you paste is never uploaded
How to use SVG to CSS
- 1Paste or type your inputUse the box above, or click Sample to try it with an example.
- 2Choose your optionsPaste the SVG markup and choose URL encoding or Base64; the CSS and a preview update as you type.
- 3Copy the resultCopy it with one click. Nothing is sent anywhere.
About SVG to CSS
Turn an SVG into a CSS background-image data URI, so icons need no extra file or request.
Frequently asked questions
URL encoding or Base64?
URL-encoded SVG is usually smaller than Base64 and stays readable, and every modern browser supports it. Base64 is there for tools that expect it.
Can I change the icon colour with CSS?
Not through a background image. Edit the fill or stroke in the SVG before converting, or use the SVG inline.
Is what I paste sent anywhere?
No. The tool runs entirely in your browser and never sends what you type or paste to a server.
Is it free?
Yes. It's free, with no sign-up and no limits.