How to Convert SVG to Base64

Q: Can I use Base64 SVG in React?

Yes. Use the encoded string as the src prop: . Or import small SVG icons as base64 strings using webpack url-loader with the limit option.

Embed SVG directly in CSS or HTML as a Base64 data URI â€” eliminating the HTTP request for small icons and background images.

Preset:

Colors:

Drop your image here

Supports PNG, JPG, BMP, WEBP up to 5MB

VTracer vectorization + SVGO optimizationPrivacy protected

What Is a Base64 SVG Data URI?

A Base64 data URI encodes the SVG file as a text string that can be used directly as a URL â€” in img src, CSS background-image, or JavaScript.

Format: data:image/svg+xml;base64,[BASE64_STRING]
Or URL-encoded (no base64): data:image/svg+xml;charset=utf-8,[URL_ENCODED_SVG]
Use in CSS: background-image: url("data:image/svg+xml;base64,PHN2...");
Use in HTML: <img src='data:image/svg+xml;base64,PHN2...'>
Benefit: zero HTTP request â€” the SVG is embedded directly in HTML/CSS

Converting SVG to Base64

Multiple methods to encode SVG as Base64.

Online: base64encode.net â€” paste SVG XML, get Base64 string
JavaScript: btoa(unescape(encodeURIComponent(svgString)))
Node.js: Buffer.from(svgString).toString('base64')
CSS: CSS.escape() or URL encoding is often simpler than base64 for SVG
Build tools: Webpack url-loader automatically inlines small SVGs as data URIs

URL-Encoded SVG vs Base64 (Prefer URL-Encoded)

URL-encoded SVG is often better than Base64 for CSS use â€” it's more human-readable, slightly smaller, and avoids encoding overhead.

Replace: < with %3C, > with %3E, # with %23, " with '
CSS: background: url("data:image/svg+xml,%3Csvg...");
URL-encoded SVG is ~10% smaller than Base64 equivalent
Human-readable: you can see the SVG structure in the encoded string
Use Base64 when the context requires strict non-whitespace encoding

Frequently Asked Questions

When should I use SVG data URI instead of an external file?

For very small SVGs (<2KB) used in CSS or HTML where eliminating the HTTP request is worth the increased HTML/CSS size. For larger SVGs, external files with browser caching are more efficient.

Can I use Base64 SVG in React?

Yes. Use the encoded string as the src prop: <img src='data:image/svg+xml;base64,...' />. Or import small SVG icons as base64 strings using webpack url-loader with the limit option.

Does Base64 SVG work in all browsers?

Yes â€” data URIs are supported in all modern browsers and IE8+. There is a 32KB limit in some older browsers for data URI size.

How do I decode a Base64 SVG string back to readable SVG?

JavaScript: atob(base64String) returns the SVG XML. Online: base64decode.net accepts Base64 and returns the original content.

Is it safe to use Base64 SVG in security-sensitive contexts?

Base64 SVG can contain JavaScript in SVG event handlers (onload, onclick). Sanitize SVG before encoding to prevent XSS attacks. Use DOMPurify or the Safe SVG WordPress plugin.

Ready to Convert Your Image to SVG?

Free online converter — no sign-up, no watermarks, results in under 3 seconds.

Try It Free — Convert Image to SVG