SVG to Data URI
Convert SVG code to a Data URI for use in CSS or HTML. Optimizes and encodes your SVG.
How to use
- 1 Paste your SVG markup into the input textarea.
- 2 The tool percent-encodes it into a data URI instantly.
- 3 A CSS usage example is shown below for reference — it illustrates how to use the data URI as a background-image.
- 4 Click Copy to grab the data URI and use it directly in an HTML src attribute or CSS background-image.
Key features
- Converts SVG markup to a percent-encoded data URI without any HTTP request
- Shows a live SVG preview so you can verify it renders correctly before copying
- Minifies whitespace before encoding to keep the URI as short as possible
- CSS usage snippet shown automatically — ready to paste into your stylesheet
What is a Data URI?
A Data URI (or data URL) embeds file content directly in HTML or CSS as a string, instead of pointing to an external file. An SVG as a data URI looks like: url("data:image/svg+xml,<svg...>").
For SVGs specifically, you don't need to Base64-encode them — you can use URL-encoding instead, which keeps the file smaller and readable. The key gotcha: the # character in fill colors must be replaced with %23 so it isn't interpreted as a fragment identifier.
Common Use Cases
CSS background images
Use SVG patterns, icons, or shapes directly in CSS background-image without a separate file request.
HTML email images
Embed small logos and icons directly in email HTML, since many email clients block external image requests.
Eliminating HTTP requests
Inline tiny decorative SVGs to reduce the number of network requests on performance-critical pages.
Single-file HTML exports
Create fully self-contained HTML files that include all assets internally — useful for offline reports.
CSS custom cursors
Use a URL-encoded SVG as the value for the CSS cursor property for custom cursor designs.
Dynamic SVG generation
Generate SVGs server-side and inject them as data URIs into API responses or Open Graph image tags.
When not to inline SVGs
Inlined SVGs can't be browser-cached independently. For icons used across many pages or components, an external SVG sprite or separate file often performs better. Data URIs are best for single-use decorative elements, CSS backgrounds, and email templates where external requests aren't possible.
Frequently Asked Questions
Should I Base64-encode my SVG or use URL encoding?
URL encoding is almost always better for SVGs. It produces a smaller string (Base64 adds ~33% overhead) and remains readable. The only case where Base64 may be needed is when embedding SVGs in CSS background-image for older browser compatibility — but all modern browsers support URL-encoded SVGs in CSS.
Why does my SVG look broken when used as a data URI?
The most common cause is the # character in hex colors (e.g. #ff0000). In a data URI, # is interpreted as a fragment identifier, so you must replace it with %23. Other causes: unescaped quotes, missing XML namespace, or unencoded < and > characters.
What's the browser support for SVG data URIs?
URL-encoded SVG data URIs work in all modern browsers (Chrome, Firefox, Safari 11.1+, Edge). For older versions of Safari and IE, you can fall back to Base64 encoding. In CSS, the background-image property supports data URIs across all browsers including IE9+. In HTML src attributes, support is broad but some older email clients may strip inline SVGs.
What's the maximum size I should inline as a data URI?
A common rule of thumb is to inline SVGs smaller than 2-4 KB after encoding. Larger files should stay as external resources because they negate the performance benefit of reducing HTTP requests. For icons under 1 KB, data URIs are ideal. For complex illustrations over 10 KB, use an external <img> or inline the SVG directly in HTML.
Can I use SVG data URIs in email HTML?
Yes — this is one of the best use cases. Most email clients block external image requests, but data URIs embed the image directly in the HTML, so it displays without additional downloads. Keep them small and test in major clients (Gmail, Outlook, Apple Mail). Some versions of Outlook (Windows) may strip data URIs in certain contexts, so always have a fallback.