SVG to Data URI
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.
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.
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.
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.
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.