SVG to CSS url()

Paste an SVG and get a data URI for background-image — compact URL-encoding that’s smaller than base64, plus copy-ready CSS and HTML.

SVG code

Open .svg file

Paste SVG code above, or open an .svg file.

Preview as a CSS background

Your SVG shows here

Ready to copy

CSS url()

Paste into background-image, mask-image, list-style-image or content.

background-image rule

A complete declaration, ready for your stylesheet.

HTML <img>

The same image inline in HTML, no extra request.

Data URI only

For JavaScript, JSON or anywhere that wants the bare URI.

Why URL-encode instead of base64?

SVG is text, so it can sit in a data URI almost as-is: only a few characters (like #, < and %) need escaping. That’s usually around a third smaller than base64, stays readable, and compresses better with gzip. Base64 is there for tools that insist on it.

Good to know

Comments, line breaks and extra spaces are removed, and a missing xmlns is added — browsers need it in data URIs.
Want a file instead? SVG Code to File downloads it as SVG, PNG, JPG or WebP.