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.