SVG → Base64
Turn an SVG into a data URI you can paste straight into HTML or CSS — Base64 and the usually smaller URL-encoded form, side by side.
or click to browse — SVG only
Works anywhere a URL does. Always about a third larger than the raw file.
Same image, usually smaller than Base64 — and still readable, which helps when debugging CSS.
one less request
A data URI puts the image inside the HTML or CSS itself, so the browser never makes a second request for it. For small icons that is the difference between appearing instantly and appearing a moment late.
The trade-off is caching: an inlined icon is re-downloaded with every page that contains it, and it cannot be cached on its own. Inline the handful of icons that matter for the first paint, and leave the rest as files.
three steps
Pick a .svg file — it stays on your device.
Copy the Base64 or the URL-encoded data URI.
Use the ready-made img tag or CSS background rule.
quick answers
URL-encoded is usually smaller for SVG, because SVG is text and Base64 adds about 33% to anything it touches. URL-encoded is also readable, so you can spot the shape you meant in a stylesheet. Use Base64 when something in the pipeline mangles the raw characters.
Base64 encodes three bytes as four characters, so a third of the growth is unavoidable. Run the file through the SVG optimizer first — editor metadata and over-precise coordinates often account for more than the encoding does.
Yes — the CSS block is ready to paste. It uses the URL-encoded form inside double quotes, which is why the encoder swaps the SVG’s own double quotes for single ones.
Almost always an unencoded `#`. A colour like `#fff` cuts the URL short at that point, and everything after it is treated as a fragment. The output here already escapes it — the problem usually appears when a data URI is hand-edited afterwards.
No. The encoding is plain string work done in your browser.