SVG to Data URI
Turn SVG into a compact URL-encoded or base64 data URI with ready CSS.
About this tool
Paste SVG markup or open an .svg file. The tool tidies it by removing the XML prolog, comments and metadata, then produces a URL-encoded data URI, which is usually smaller, or a base64 one. You get ready-to-paste CSS and HTML, the size of each version and a preview on light and dark backgrounds.
URL-encoded vs base64 SVG data URIs
A data URI embeds a file directly in CSS or HTML, which saves a network request for small icons and backgrounds. For SVG, careful URL-encoding usually beats base64. SVG is already text, and base64 always adds a third to the size. URL-encoding only needs to escape the few characters that would break the URI, such as <, >, #, % and line breaks. Swapping the SVG's double quotes for single quotes lets the result sit inside url("…") in CSS without further escaping. The tool also adds the xmlns attribute if it is missing, because browsers need it in data URIs. Use base64 where a system insists on it, such as some email clients and older tools. Honest limits: a data URI cannot be cached separately, so it makes every stylesheet that contains it bigger. Keep data URIs for small, frequently used icons, and serve larger graphics as files. Run complex SVGs through an optimiser first for the smallest result. Files are read on your device and never uploaded. The SVG optimiser shrinks the markup, the image to Base64 tool handles PNG and JPG, and the SVG to PNG converter rasterises. What an SVG is, why it scales forever, and when not to use it explains the format.
Frequently asked questions
Should I use base64 for SVG data URIs?
Usually not. URL-encoding is smaller for SVG because it only escapes a few characters, while base64 adds about a third. Use base64 only where it is required.
Why does my SVG data URI not work in CSS?
Common causes are a missing xmlns attribute, unescaped # characters (as in colours like #fff) or double quotes inside url("…"). This tool fixes all three.
Is there a size limit for data URIs?
Modern browsers accept very large data URIs, but they bloat CSS and can't be cached separately, so keep them for small icons.
Is my SVG uploaded?
No. The file is read in your browser and nothing is stored or sent.