SVG to CSS Background
Convert SVG markup into a URL-encoded CSS background-image data URI.
Embed an SVG straight into your CSS
Small SVGs — icons, patterns, dividers — are often best embedded directly in CSS as a data URI, so they load with the stylesheet instead of firing a separate request. The classic way, base64, bloats the file and hides the markup. URL-encoding keeps the SVG compact and legible, so you can still edit a colour or coordinate in place.
Paste your SVG and this tool collapses the whitespace, swaps double quotes for single quotes, and percent-encodes the characters that break in a URL, then wraps it in a ready-to-paste background-image rule. The preview shows the encoded result actually rendering as a background.
Private and instant
Encoding and preview happen locally in your browser. Nothing is uploaded.
Frequently Asked Questions
Why URL-encode instead of base64?
URL-encoded SVG data URIs are smaller and stay human-readable, so you can tweak a colour or size right in the CSS without re-encoding the whole file.
How do I use the output?
Copy the background-image line onto any element. The SVG is embedded in the CSS, so there is no extra network request and no separate image file to host.
Is anything uploaded?
No. Encoding and the live preview run entirely in your browser.
Browse the full set of free, private, in-browser tools.