How do I convert an SVG to Base64?

Paste your SVG markup or upload an SVG file and copy the generated data URI. The output is a complete data:image/svg+xml string you can use anywhere an image URL is accepted.

Where can I use a Base64 SVG data URI?

You can use it as a CSS background-image, an HTML img src, a favicon, or inline it inside JSON and JavaScript. Because it is self-contained, it loads without a separate network request.

Is my SVG uploaded anywhere?

No. The conversion runs entirely in your browser, so your SVG never leaves your device. It is safe to use for private logos, icons and brand assets.

Share Feedback

SVG to Base64 Converter

Encode any SVG into a Base64 or URL-encoded data URI you can drop straight into HTML, CSS or JavaScript.

SVG → CSS

SVG → Base64

CSS → SVG

Base64 → SVG

Paste your SVG markup

URL-encoded (usually smaller)

Minify / optimize SVG

Base64 / data URI output

Live preview

Tips for converting SVG, CSS & Base64

Quick pointers to get the smallest, cleanest output for your project.

SVG to CSS background

Convert an SVG into a ready-to-paste CSS background-image. The SVG is embedded as a data URI, so there are no extra HTTP requests and the graphic stays crisp at any resolution.

Base64 vs URL-encoded

Base64 is the most compatible encoding and works everywhere. URL-encoded data URIs are usually smaller for SVGs because the markup stays human-readable. Toggle between them to see which is shorter for your file.

Decode back to SVG

Paste a CSS rule or a data URI and instantly get the original SVG markup back. Handy for editing an icon that's already inlined in a stylesheet or component.

Optimize before you embed

Enable “Minify / optimize SVG” to strip metadata, comments and redundant attributes. Smaller SVGs mean shorter data URIs and lighter CSS.

Works fully in your browser

Every conversion runs locally — nothing is uploaded. Your SVGs never leave your machine, so it's safe for private icons, logos and brand assets.

Great for icons and patterns

Inline small icons, loaders and repeating background patterns directly in CSS. It's perfect for design systems, email templates and single-file components.

Hi fellow creator!

I'm Jim, the founder, designer & engineer behind the MagicPattern toolbox.

For many years, I was struggling to create engaging visuals for products, branding and interfaces. Their creation required pro design skills or many hours of practice.

That's why I build MagicPattern. My mission is to help people create pro graphics with no effort and no prior design knowledge.

- Jim Raptis