CSS to SVG converter
Extract the SVG from a CSS data URI, URL-encoded or Base64, and get clean SVG code back.
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?
Many stylesheets contain icons and patterns as embedded SVG data URIs. This converter finds the first SVG data URI in your CSS, decodes it and shows the original SVG code, so you can edit it again.
How it works
Paste a CSS rule, a url() value or the bare data URI. The SVG appears next to it, ready to copy or to download as an .svg file.
FAQ
- Which formats are recognised?
- Data URIs with the type image/svg+xml, URL-encoded or Base64, in double quotes, single quotes or without quotes.
- My CSS contains several images. Which one do I get?
- The first SVG data URI. To get another one, paste only the rule you need.
- Is the SVG safe to use?
- The preview shows the SVG as an image, so scripts in it never run here. Check SVG from unknown sources before you embed it directly in your own pages.