Which encoding should I use — URL or base64?

URL encoding produces smaller output and is generally preferred. Base64 is useful when you need to avoid special characters in certain contexts.

Why minify the SVG first?

Removing comments and unnecessary whitespace reduces the data URI length, resulting in faster page loads.

Can I use the output in Tailwind or CSS Modules?

Yes — the generated CSS property value works anywhere a standard CSS background-image is accepted.

What are the preset icons?

20 common icons such as arrow, check, cross, star, heart, search, menu, close, and more are available as one-click starting points.

design Free No signup

SVG to CSS Background Converter

Convert SVG markup into a CSS background-image data URI — URL-encoded or base64.

Loading tool…

About this tool

Paste any SVG markup and instantly get the CSS background-image declaration in both URL-encoded and base64 formats. The tool minifies the SVG before encoding to keep file size small, and shows a live preview of the SVG rendered as a CSS background. Includes 20 common icon presets to get you started quickly.

How to use

1 Step 1: Paste your SVG code into the input area, or pick one of the preset icons.
2 Step 2: The tool minifies the SVG and generates both URL-encoded and base64 CSS snippets.
3 Step 3: Preview the SVG rendered as a background on the sample rectangle.
4 Step 4: Click Copy on your preferred CSS snippet and paste it into your stylesheet.

About this tool

How to use

Frequently Asked Questions