Paste SVG code and instantly get a CSS background-image data URI plus an optimized inline SVG. Preview the icon, compare file sizes, and copy either output with one click — no external libraries required.
Conversion runs live in your browser. Paste a complete <svg> element.
Frequently Asked Questions
What does the SVG to CSS Converter do?
It takes raw SVG markup and produces two outputs: a CSS background-image property using a base64 or URL-encoded data URI, and a minified inline SVG string with unnecessary whitespace and comments removed.
When should I use a CSS data URI vs inline SVG?
Use a CSS data URI when you want a background icon on an element via CSS — no extra HTML needed. Use inline SVG when you need to style paths with CSS, animate elements, or control fill colors dynamically.
How is the SVG optimized?
The optimizer removes HTML comments, collapses whitespace between tags, strips unnecessary line breaks, and trims leading and trailing space. It does not alter paths or viewBox attributes.
Is my SVG stored or sent anywhere?
No. All conversion runs entirely in your browser. Your SVG code never leaves your device.
Is this tool free and does it work on mobile?
Yes on both counts. The SVG to CSS Converter on draft21 is completely free with no sign-up required and works on all devices.