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, BMP, 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