SVG to Base64 Encoder
Convert any SVG to a Base64 data URI — embed SVG inline in CSS, HTML, and email without any HTTP requests.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
What is a Base64 SVG Data URI?
A data URI encodes file content as a text string that can be used directly in HTML or CSS instead of a file URL. For SVG: data:image/svg+xml;base64,[encoded-data]. Browsers decode and render it identically to a file reference.
- Used in CSS: background-image: url('data:image/svg+xml;base64,...')
- Used in HTML: <img src='data:image/svg+xml;base64,...' alt='icon'>
- No HTTP request — icon is embedded in the HTML/CSS
- Trade-off: not separately cacheable; increases HTML/CSS file size
When to Use Base64 SVG
Data URIs are appropriate for specific use cases.
- Small icons used in many CSS rules — eliminates many HTTP requests
- Email HTML — external resources blocked by many email clients
- Single-file HTML deliverables — presentations, reports
- CSS frameworks — embed icons without separate asset dependencies
URL-Encoded vs Base64 for SVG
SVG data URIs can be Base64-encoded or URL-encoded. URL-encoding is often smaller and more readable.
- Base64: data:image/svg+xml;base64,PHN2ZyB4bWxucy...
- URL-encoded: data:image/svg+xml,%3Csvg+xmlns...
- URL-encoded SVG is ~10% smaller than Base64 equivalent (no base64 overhead)
- Use URL-encoding for SVGs with ASCII content only; Base64 for SVGs with unicode or special characters
Frequently Asked Questions
Does Base64 encoding make SVG larger?
Yes — Base64 adds ~33% overhead to file size. URL-encoding SVG adds less overhead. For small SVGs (<1KB), the overhead is negligible. For large SVGs, link to an external file instead.
Can I use Base64 SVG in React?
Yes. In JSX: <img src='data:image/svg+xml;base64,...'/>. Or in CSS modules: background-image: url('data:image/svg+xml;base64,...')
Is Base64 SVG safe against XSS?
Partially. When used as <img src>, Base64 SVG is sandbox — scripts can't run. When used with innerHTML or DOM injection, Base64 SVG can still be decoded and executed.
What is the maximum size for a data URI?
Browsers support data URIs up to 32KB–64KB generally. Very large SVGs as data URIs may be rejected or cause performance issues — link to an external file for anything over 10KB.
Can I use Base64 SVG in Tailwind CSS?
Yes. Use in tailwind.config.js as a backgroundImage value: 'my-icon': "url('data:image/svg+xml;base64,...')"
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free