Micro Tools
Advertisement

SVG to CSS Background

Paste SVG and get a CSS background-image rule with the SVG encoded as a data URI. No extra HTTP request, no image file to host.

SVG to CSS Background

Paste SVG markup below.

Advertisement

How the encoding works

The SVG is collapsed to one line and URL-encoded with encodeURIComponent, so characters like # and quotes cannot break the CSS. The result is wrapped in a .svg-background rule with background-repeat, background-size and background-position set to sensible defaults.

Why inline SVG as a background

Data URI backgrounds need no extra request and no image hosting, which is perfect for icons, patterns and decorative shapes. They also scale crisply at any size because the source stays vector.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

SVG to CSS Background FAQs

Will this work in all browsers?
Yes. URL-encoded SVG data URIs work in all modern browsers. Keep the SVG small, ideally under a few kilobytes, since very large URIs bloat your stylesheet.
Do I need the xmlns attribute?
For data URI SVGs used in CSS, including xmlns="http://www.w3.org/2000/svg" is the safest choice for older browsers. Add it to your SVG before encoding if it is missing.
Can I still recolor the SVG?
Only by editing the encoded markup. For recolorable icons, use currentColor in the SVG before encoding or switch to inline SVG in your HTML.
Base64 or URL-encoded?
URL-encoded is smaller for typical SVGs and stays readable. Base64 only wins for SVGs with lots of non-ASCII characters.
Is my SVG uploaded?
No. Encoding runs entirely in your browser, so your artwork never leaves your device.
Advertisement