Convert SVG to data URI

No. The conversion runs entirely in your browser. The file never leaves your device – there is no server that could see it. Once the page has loaded, the tool even works offline.

Minimal, unless a tool insists on base64. It leaves the SVG readable, collapses whitespace, swaps double quotes for single ones and only percent-encodes the characters that break a CSS url(“…”): %, #, <, > and braces. That is about a third smaller than base64, and compresses better on the wire too. Base64 is opaque but works in every context, including old e-mail clients.

In CSS: background-image: url("data:image/svg+xml,…"); or as mask-image. In HTML: <img src="data:…">. Wrap the URL in double quotes – the minimal form uses single quotes inside on purpose. The SVG to CSS tool writes a complete rule for you.

The XML prolog, comments and DOCTYPE are dropped – they mean nothing inside a data URL – and, unless you switch “Optimise first” off, the SVG is minified with the same optimiser as “Optimise SVG”. Scripts and external references are always removed.

For large graphics. An embedded SVG is downloaded with every style sheet or page that contains it and cannot be cached on its own. Data URIs shine for small icons of a few kilobytes; for big illustrations link the file instead.