Apps / Color & CSS/Design Tools / SVG to CSS Background Converter

🧩 SVG to CSS Background-Image (Data-URI) Converter

Paste raw SVG markup and get a compact, URL-encoded background-image: url("data:image/svg+xml,...") declaration — smaller than Base64 because most characters stay raw. Or paste an existing declaration back in to recover the SVG.

Only %, #, <, > and double quotes get percent-encoded (double quotes are swapped for single quotes first, so most of the markup never needs encoding at all) — this is the well-known "no need to Base64 SVGs" technique, and it produces noticeably smaller CSS than a Base64 data URI would.

SVG → CSS background-image

CSS background-image → SVG

Paste a full background-image: url("data:image/svg+xml,...") declaration, or just the bare data URI. Both the URL-encoded and Base64 forms are supported.