SVG to Data URI Converter
Encode any SVG as a data URI — embed directly in CSS or HTML without extra HTTP requests.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG Data URI Formats
Two encoding options for SVG data URIs.
- URL-encoded: data:image/svg+xml,%3Csvg%20xmlns... — ~10% more efficient than Base64 for ASCII SVG
- Base64: data:image/svg+xml;base64,PHN2ZyB4bWxucy... — works for any content including unicode
- For CSS: URL-encoded is preferred (avoids extra charset handling)
- For HTML img src: both formats work equally
When Data URIs Are Useful
Data URIs are an engineering trade-off. Use them strategically.
- Single-file applications: self-contained HTML with embedded icons
- CSS sprite alternative: embed rarely-changed icons in CSS
- Email HTML: external resources blocked in many clients — embed essential images
- Critical path: eliminate HTTP request for above-the-fold icons
When NOT to Use Data URIs
Data URIs have real drawbacks — don't overuse them.
- Large SVGs (over 5KB): CSS/HTML file size bloat outweighs HTTP request savings
- Icons used on multiple pages: a cached external file loads instantly on subsequent pages
- Frequently changing icons: every change requires updating and redeploying the CSS/HTML
- Build pipeline managed icons: use SVG sprites instead for better performance
Frequently Asked Questions
Is Base64 or URL-encoded better for SVG data URIs?
URL-encoded is ~10% smaller and more efficient for CSS. Base64 is slightly more portable. For CSS use: URL-encoding. For HTML src attributes: either works.
Can I use SVG data URIs in Tailwind CSS?
Yes. Add to tailwind.config.js: backgroundImage: { 'my-icon': "url('data:image/svg+xml,...')" }
Does encoding SVG as data URI preserve animations?
Yes — CSS animations inside the SVG play when used in <img src> or <object>. Animations don't play in CSS background-image (rendering is static).
How do I URL-encode an SVG for data URI?
Replace < with %3C, > with %3E, # with %23, " with ', and line breaks with nothing. In JavaScript: encodeURIComponent(svgString) then prepend data:image/svg+xml,
Can data URI SVGs be cached by the browser?
No. Data URIs are embedded in the document — they're re-parsed every time the page loads. External SVG files are cached. For frequently-used icons, an external file is more performant.
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