Convert SVG to data URIs for inline use in CSS, HTML img tags, or embedded stylesheets. Choose between URL-encoded and Base64 formats.

What is a Data URI?

A data URI (also called a data URL) is a scheme that embeds file content directly inline using the format data:[mediatype][;base64],data. Instead of referencing an external file, the browser decodes the content from the URL itself.

For SVGs, this means you can embed an entire vector graphic inside a CSS background-image property, an HTML <img> src attribute, or a stylesheet without requiring a separate HTTP request. This eliminates render-blocking requests and simplifies deployment for small icons and decorative elements.

SVG Data URI vs Base64

Factor	URL-encoded	Base64
Size overhead	~10-20% larger than original	~33% larger than original
Readability	Partially readable (you can see SVG structure)	Not human-readable
Browser support	All modern browsers	All modern browsers
Gzip efficiency	Compresses well (text-based)	Compresses poorly (already encoded)
Special characters	Must encode #, %, <, >	No issues (binary-safe)
CSS compatibility	Works in all contexts	Works in all contexts

Recommendation:Use URL-encoded for most cases. It produces smaller output and compresses better with gzip. Use Base64 only when you need to embed SVGs that contain complex special characters or when working with systems that don't handle URL-encoded content well.

How to Use in CSS

The most common use case is setting an SVG as a CSS background image:

.icon {
  background-image: url("data:image/svg+xml,%3Csvg...");
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}

You can also use it in an img tag:

<img src="data:image/svg+xml,%3Csvg..." alt="icon" />

Or in a CSS content property for pseudo-elements:

.item::before {
  content: url("data:image/svg+xml,%3Csvg...");
  display: inline-block;
  width: 16px;
  height: 16px;
}

FAQ

When should I use a data URI vs a regular SVG file?

Use data URIs for small, frequently-used icons (under 1-2KB) where eliminating an HTTP request is worth the tradeoff. For larger SVGs or SVGs used once, a regular file with proper caching headers is more efficient since the browser can cache it separately.

Does this affect performance?

Data URIs are not cached independently by the browser — they're part of the CSS or HTML document. For small icons this is fine (one fewer request), but embedding large SVGs inflates the document size and prevents separate caching. Keep data URIs under 2KB for best results.

Why is my data URI not rendering?

Common issues: (1) missing the xmlns attribute — browsers require it for SVG data URIs to render, (2) unescaped special characters like # in colors (use %23 instead), (3) mismatched quotes — if your data URI uses double quotes, wrap the CSS url() in single quotes or vice versa.

Is my SVG data safe?

Yes. The conversion runs entirely in your browser. No data is sent to any server. You can verify this by checking the Network tab in your browser's developer tools.

Can I convert the data URI back to SVG?

Yes. For URL-encoded data URIs, use decodeURIComponent() on the content after the comma. For Base64, use atob() to decode. The original SVG markup is fully recoverable.

SVG to Data URI Converter