Skip to content

SVG Encoder

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.

Convert SVG
URL-encode or Base64 your SVG for use in CSS, HTML, or JS. Runs entirely in your browser.
Output
—

Tip: press Ctrl+K to copy.

Preview

SVG preview will appear here

How to Use
  1. Input SVG: paste your code, drop a file, or try the sample.
  2. Pick encoding: URL-encoding is usually smaller for SVG text; Base64 is safer for binary-heavy markup. The “Smaller” tag shows which wins.
  3. Copy a format: raw data URI, CSS background-image, HTML <img>, CSS mask-image, a ready-to-paste React/JSX component, or an inline SVG favicon.
  4. Verify: preview against transparent, light, or dark backgrounds.

Inlining SVGs as data URIs eliminates an extra HTTP request — handy for small icons, spinners, decorative shapes, and favicons. For large SVGs, a static file + HTTP caching is usually better.

Frequently Asked Questions
Common questions about encoding SVGs as data URIs.
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.

How does the React/JSX output work?+

The JSX tab converts your SVG into a modern TypeScript React component. It handles attribute casing (e.g. stroke-width → strokeWidth), style objects, and self-closing tags automatically. Just copy, rename the component, and import it into your project.

Can I use an SVG as a favicon?+

Yes. Modern browsers (Chrome, Firefox, Safari 16+) support inline SVG favicons. Use the "Favicon" output format to get a ready-to-paste <code>&lt;link rel="icon"&gt;</code> tag with your encoded SVG as a data URI. For legacy browser support, pair it with a fallback <code>.ico</code> file.