SVG to CSS Studio
Generate URL-encoded CSS data URIs, mask-image rules, and Tailwind classes with in-browser SVGO optimization.
Which output format should I use?
URL-Encoded Data URI
The recommended default. Produces plain text that compresses efficiently with Gzip/Brotli. Use directly in background-image: url('data:image/svg+xml,...'). Colors are preserved from the original SVG.
CSS Mask (currentColor)
Best for single-color icons that need to change color on hover, active state, or dark mode. The SVG shape acts as a stencil; background-color: currentColor fills it with the element's text color.
Tailwind Class
Generates a complete bg-[url(...)] arbitrary class for Tailwind v3 and v4. Spaces in the data URI are replaced with underscores as required by Tailwind's JIT engine.
Base64 Data URI
Produces a data:image/svg+xml;base64,... string. Adds ~33% size overhead and compresses less efficiently than URL-encoded SVG. Mainly useful for legacy HTML email clients.
Privacy note: All conversion happens locally in your browser. No SVG data is sent to any server at any point during encoding, optimization, or output generation. Read the full integration documentation →