SVG Data URI Encoder

An SVG can be embedded directly in an <img src> or a CSS url() as a data URI, saving an HTTP request. There are two encodings. Base64 (data:image/svg+xml;base64,…) is universally safe but inflates the payload by about 33%. URL-encoding (data:image/svg+xml,…) keeps the markup as text with only the reserved characters escaped, so for SVG — which is mostly ASCII — it is almost always smaller and stays human-readable. This tool shows both sizes so you can pick; URL-encoding usually wins for inline SVG.

Base64 is UTF-8 safe here (the markup is UTF-8 encoded before btoa, so non-ASCII characters survive). The URL-encoding follows the widely used minimal scheme: double quotes become single quotes (so the URI itself can sit in double quotes), whitespace between tags is collapsed, and only %#()<>?[\]^`{|} and newlines are percent-escaped — everything else stays readable. If your root <svg> is missing the xmlns="http://www.w3.org/2000/svg" namespace, the tool adds it (toggle above), because without it the browser won't render the data URI as an image.

• Script and interactive handlers inside an SVG are ignored when the SVG is loaded through an <img> or CSS url() — the same safety property demonstrated in the SVG base64 embedding sandbox. Inline <svg> in the document is a different story and can run script.
• Data URIs don't get gzipped as separately as a linked file would, and a giant inline SVG bloats the HTML/CSS it lives in. Inline the small stuff (icons, logos); link the big stuff.
• To convert an SVG to a raster PNG or JPEG instead, use the SVG to JPEG/PNG renderer.