What is an SVG data URI and why use it in CSS?

An SVG data URI is a base64- or URL-encoded version of SVG markup embedded directly in a CSS property or HTML attribute as a data: URL. Using SVG as a CSS background eliminates HTTP requests for icon image files, making pages load faster and reducing server load. It's especially useful for small icons, logos, and decorative elements.

Should I use URL-encoding or Base64 for SVG backgrounds?

URL-encoding (percent-encoding) is generally preferred for SVG data URIs because it produces smaller output than Base64 for typical SVG files. URL-encoded SVG is also human-readable in the source code. Base64 is universally compatible but increases file size by approximately 33% and produces opaque encoded strings.

Why should I minify SVG before converting to a data URI?

Minifying SVG removes unnecessary comments, XML declarations, and collapses whitespace. This reduces the size of the resulting data URI. Smaller data URIs reduce CSS file size and parsing time. For production use, always minify SVG before embedding it as a data URI.

Can I use an SVG data URI in an HTML tag?

Yes. You can use an SVG data URI as the src attribute of an tag: . This embeds the SVG directly in HTML without a separate HTTP request. The tool generates a ready-to-use tag alongside the CSS outputs.

Why does the data URI look larger than the original SVG?

Data URIs add overhead from the scheme prefix (data:image/svg+xml,...) and encoding. URL-encoding typically adds 10–30% overhead for SVG. Base64 adds approximately 33% overhead. For very small SVG icons (under 200 bytes), this overhead is negligible. For larger SVGs, consider serving them as separate files instead.

SVG to CSS Background Converter Online

You want to use an SVG pattern as a CSS background-image without an extra HTTP request. The SVG needs to be URL-encoded into a data:image/svg+xml,... URI, but manually encoding <, >, ", and # characters is error-prone — miss one # in a color value and the entire background breaks silently.

Why This Converter (Not the SVG Optimizer)

PureDevTools has an SVG Optimizer for minifying SVGs. This tool converts SVG code to a CSS-ready background-image data URI — with URL encoding or Base64 encoding, optional SVG minification, and configurable background-size, background-repeat, and background-position. Generates CSS background-image, background shorthand, and HTML <img> tag. Everything runs in your browser.

What Is an SVG Data URI?

A data URI (also called a data URL) is a scheme that lets you embed file content directly inside a URL string. For SVG files, the data URI looks like this:

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...%3E%3C/svg%3E

Or in Base64 format:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0...

You can use this data URI anywhere a URL is expected — in CSS background-image, HTML <img> tags, or even inline styles.

Why Embed SVG as a CSS Background?

No Extra HTTP Requests

Each image file your browser loads requires a separate HTTP request. For small SVG icons and decorative elements, embedding them as CSS data URIs eliminates these requests entirely. This reduces round-trip latency and speeds up page rendering — especially on high-latency connections.

Inline Caching

CSS files are cached aggressively by browsers. When your SVG is embedded in CSS, it inherits the CSS file’s cache lifetime automatically, without needing to configure separate cache headers for image files.

Dynamic Theming

SVG data URIs work seamlessly in CSS custom properties (var(--icon)), making it easy to swap SVG icons based on theme or state without JavaScript.

Privacy-Friendly

Unlike external SVG files hosted on CDNs, embedded data URIs never make requests to third-party servers. This is useful for cookie-consent and privacy policy compliance.

URL-Encoding vs Base64

URL-Encoding (Recommended)

URL-encoded SVG replaces special characters like <, >, #, and { with percent-encoded equivalents (%3C, %3E, %23, %7B). Double quotes are replaced with single quotes to avoid breaking CSS string delimiters.

Advantages:

Smaller output than Base64 for typical SVG files (usually 5–15% smaller)
Remains partially human-readable in the source code
No character set overhead

Example:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");

Base64

Base64 encodes the binary representation of the SVG using a 64-character alphabet. The result is always ASCII-safe and universally parseable.

Advantages:

No encoding edge cases — handles any Unicode characters safely
Compatible with every browser and tool

Disadvantages:

Increases file size by ~33% (every 3 bytes become 4 characters)
Output is opaque and not human-readable

Example:

background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...");

SVG Minification

Before encoding, this tool can minify your SVG by:

Removing the XML declaration (<?xml version="1.0" encoding="UTF-8"?>) — browsers don’t need it for inline SVG
Removing DOCTYPE declarations — similarly unnecessary for data URIs
Stripping comments () — comments add bytes without visual effect
Collapsing whitespace — multiple spaces and newlines become a single space
Removing whitespace between tags — > < becomes ><

Minification reduces the encoded size of the data URI, which directly reduces your CSS file size.

CSS background Properties

The tool generates three types of CSS output:

background-image Property

The most specific property — sets only the image source:

background-image: url("data:image/svg+xml,...");

Use this when you want to add a background image to an element that already has other background-* properties set separately.

background Shorthand

The shorthand combines image, position, size, and repeat in one declaration:

background: url("data:image/svg+xml,...") center / contain no-repeat;

The order is: image position / size repeat. This is the most concise way to set all background properties at once.

CSS Class Block

A ready-to-paste CSS class:

.icon {
  background: url("data:image/svg+xml,...") center / contain no-repeat;
}

Common background-size Values

Value	Description
`contain`	Scale the image to fit inside the element, maintaining aspect ratio
`cover`	Scale the image to fill the element, maintaining aspect ratio (may crop)
`auto`	Use the image’s intrinsic size
`100% 100%`	Stretch to exactly fill the element (may distort)
`32px 32px`	Fixed pixel size
`50%`	Half the width of the element

Practical Use Cases

SVG Icons as CSS Backgrounds

.icon-clock {
  background: url("data:image/svg+xml,...") center / contain no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

Custom Checkbox or Radio Inputs

input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg...%3E");
}

Decorative Patterns with repeat

.patterned-bg {
  background: url("data:image/svg+xml,...") 0 0 / 40px 40px repeat;
}

CSS Custom Properties for Theming

:root {
  --icon-arrow: url("data:image/svg+xml,...");
}

.arrow { background-image: var(--icon-arrow); }

Browser Support and Compatibility

SVG data URIs as CSS backgrounds are supported in all modern browsers (Chrome, Firefox, Safari, Edge) and Internet Explorer 9+. There are no polyfills or feature flags required.

Note: Some older versions of Internet Explorer have a 32KB limit on data URI sizes. For production, ensure your encoded SVG stays well below this limit.

Performance Considerations

Small icons (< 1KB): Data URIs are ideal — the HTTP request overhead exceeds the size savings from serving separately.
Medium icons (1–5KB): Evaluate on a case-by-case basis. Data URIs increase initial CSS parse time.
Large SVGs (> 5KB): Serve as separate SVG files and reference them by URL. Large data URIs bloat CSS files and block rendering.

For icon sets, consider using an SVG sprite sheet or icon font library instead of individual data URIs.

SVG to CSS Background Converter