How to Use SVG as Data URI — Inline SVG in CSS and HTML
Encode SVG as a data URI for use as CSS background-image or HTML img src — zero HTTP requests for small, frequently used vector graphics.
Drop your image here
Supports PNG, JPG, WEBP up to 5MB
Converting SVG to Data URI for CSS
For CSS background-image, encode the SVG as a URL-safe string (not base64): replace `<` with `%3C`, `>` with `%3E`, `#` with `%23`, and `"` with `'` (or `%22`). The result: `background-image: url('data:image/svg+xml,%3Csvg...')`.
- URL-encode: # → %23, < → %3C, > → %3E
- Use single quotes inside SVG to avoid quote escaping
- Use mini-svg-data-uri npm package for reliable encoding
When to Use SVG Data URIs
Data URIs eliminate HTTP requests — good for small SVG icons used as CSS backgrounds on multiple elements. Avoid for large SVGs (increases HTML/CSS file size) or SVGs used once (external file is cacheable).
- Good: small icons as CSS pseudo-element backgrounds
- Good: cursor images, button backgrounds, generated SVG
- Avoid: SVGs larger than ~5KB (file size penalty exceeds HTTP savings)
Frequently Asked Questions
Should I base64-encode SVG for CSS or use URL encoding?
URL encoding (percent encoding) is smaller than base64 for SVG because SVG is text-based and URL encoding only escapes necessary characters. Base64 adds ~33% overhead.
Can I use SVG data URIs in Safari?
Yes — Safari supports SVG data URIs in CSS background-image and HTML <img>. Ensure the SVG is well-formed and special characters are properly URL-encoded.
Related guides
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