LocalToolsOffline browser tools collection

Category: Developer tools

SVG to CSS Background

System ideaMissing a tool?

Turn inline SVG markup into a background-image data URI

Paste SVG markup and get a CSS background-image data URI, plus background-repeat, background-size and background-position lines, with a live preview so you can check it before copying.

Output
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2'%3E %3Ccircle cx='12' cy='12' r='9' /%3E %3Cpath d='M8 12h8M12 8v8' /%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;

The SVG never leaves the browser; it is encoded straight into the CSS value.

Everything on this page is processed in your browser. Nothing is uploaded.

What this tool does

A small SVG icon or pattern is often lighter as an inline CSS data URI than as a separate image request, but hand-encoding the markup so it survives inside a url(...) value is error-prone: quotes, angle brackets and line breaks all need careful escaping. This tool does that encoding for you, keeping the result short and readable instead of falling back to base64, and shows a live background preview at the repeat and size settings you choose.

How to use it

  1. Paste the SVG markup you want to use as a background.
  2. Choose how it should repeat and scale.
  3. Copy the CSS declaration and paste it into your stylesheet.

Privacy

This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.

Frequently asked questions

Is this the same as base64-encoding the SVG?
No. It only escapes the handful of characters that would otherwise break a CSS value, which keeps the data URI noticeably shorter and still human-readable, unlike a base64 block.
Does the SVG get uploaded?
No. The encoding happens with plain string replacement in your browser tab; the markup you paste never leaves the page.
Can I use currentColor or CSS variables inside the SVG?
currentColor works since it is resolved by the browser at paint time, but CSS custom properties referenced inside the SVG's own attributes are not, since a background-image data URI is static markup, not a live stylesheet.

Back to all tools