loot.tools

SVG to Data URI

Paste SVG markup and get a data URI you can drop into background-image or an img src. URL-encoding keeps the SVG readable and usually smaller than base64, with a base64 option when you need it. There's a live preview and a copy-ready CSS background line. Everything runs in your browser.

Paste SVG markup and get a data URI for background-image or an <img> src. URL-encoding keeps the SVG readable and usually smaller than base64. It all runs in your browser.

SVG Input
Data URI

What this tool does

It turns raw SVG into a single data URI string so you can inline an icon or background without a separate file request. Choose URL-encoding for a compact, readable result (only the characters that would break a CSS url() value are escaped) or base64 when a build step mangles raw markup. The preview renders the encoded URI so you can confirm it works before copying.

Why URL-encoding usually wins

Base64 inflates every SVG by about a third because it can't represent text efficiently. URL-encoding leaves most of the markup untouched and only escapes #, %, <, >, and double quotes, so the output is smaller and you can still read the shapes. The byte readout shows the size of both the source and the encoded URI so you can see the difference for your file.

Dropping it into CSS

Copy the CSS background line to get background-image: url("data:image/svg+xml,...") ready to paste into a rule. Because the value is wrapped in double quotes, the encoder swaps inner double quotes for single quotes, which are valid in SVG attributes. Turn off "Collapse whitespace" if your SVG has meaningful spacing inside text elements.