SVG to CSS Data URI
Turn SVG markup into a compact URL-encoded data URI for CSS backgrounds and masks, smaller than Base64, with a live preview.
Free · No sign-up · Your inputs stay in your browser
Input
Turn an SVG into a CSS data URI
Output
245 characters
URL-encoded
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
URL-encoded: 219 characters. Base64: 310.
URL-encoding an SVG is usually 20 to 30 percent smaller than Base64 and still readable. Double quotes become single quotes so the result fits inside url("...").
Runs in this browser. Nothing you paste is sent to a server.
About this tool
Method, assumptions, practical next steps, and limits.
Why not Base64
SVG is text, and most of it is already safe in a URL. Encoding only <, >, #, % and a few others keeps the data URI 20 to 30 percent smaller than Base64 and still readable in the stylesheet, and gzip compresses it better.
The xmlns requirement
Inline in HTML, an <svg> works without a namespace. Loaded as an image, from a file or a data URI, it is parsed as XML and must declare xmlns="http://www.w3.org/2000/svg", or it renders nothing. Icons exported from design tools sometimes leave it out.