Convert SVG to URL-encoded or Base64 data URIs
Free online SVG encoder for developers. Turn SVG markup into a data URI you can drop straight into CSS background-image, HTML <img>, or mask-image. Everything runs in your browser — no uploads, no tracking.
Tip: press ⌘K to copy.
SVG preview will appear here
- Input SVG: paste your code, drop a file, or try the sample.
- Pick encoding: URL-encoding is usually smaller for SVG text; Base64 is safer for binary-heavy markup. The “Smaller” tag shows which wins.
- Copy a format: raw data URI, CSS
background-image, HTML<img>, or CSSmask-imagefor recoloring withcurrentColor. - Verify: preview against transparent, light, or dark backgrounds.
Inlining SVGs as data URIs eliminates an extra HTTP request — handy for small icons, spinners, and decorative shapes. For large SVGs, a static file + HTTP caching is usually better.
Should I use URL-encoded or Base64 for SVG data URIs?+
URL-encoding is usually smaller for SVG because Base64 adds about 33% overhead. The encoder computes both sizes live and highlights whichever is smaller. Base64 is only worth using for SVGs heavy in binary content (embedded images) or when URL-encoding causes parsing issues in your tooling.
Is my SVG uploaded anywhere?+
No. SVG Encoder runs entirely client-side — encoding, minifying, and preview all happen in your browser. Nothing is sent to a server.
How do I use an encoded SVG as a CSS mask to recolor it?+
Pick the "Mask" output format. It produces a mask-image snippet with background-color: currentColor, which lets you recolor the shape using any CSS color that cascades to the element.
What does the Minify option do?+
It strips comments, the XML declaration, DOCTYPE, and extra whitespace before encoding. The result is a shorter, semantically-identical data URI.
Can I use data URIs for production?+
Yes, especially for small icons and decorative SVGs where the extra HTTP request is more expensive than inlining. For large SVGs, a cached external file usually beats inlining.