CSS & HTML

When to use SVG data URIs

Published November 2, 2026 · SVGMod editorial

A data URI lets an SVG travel inside CSS, HTML or JavaScript rather than as a separate file. That can be elegant for tiny decorative assets—and wasteful for everything else.

What an SVG data URI contains

A typical value starts with data:image/svg+xml, followed by encoded SVG markup. The browser decodes the string and treats it as an image resource. There is no separate HTTP request for that asset.

Good use cases

• Small CSS background icons that belong to a component.
• Custom bullets, cursors and decorative patterns.
• Self-contained HTML emails, prototypes or offline documents.
• Generated graphics that only exist at runtime.

Data URIs are especially convenient when the image is inseparable from a stylesheet and too small to justify managing another request.

When to use a normal SVG file

Large illustrations, shared icons and frequently reused brand assets generally work better as cacheable files. A data URI is downloaded again whenever its containing CSS or HTML changes. It also cannot be cached independently.

Base64 adds roughly 33% to binary payload size and makes markup unreadable. URL-encoded SVG is often the more compact text representation.

Using a data URI in CSS

After generating a URL-encoded value, place it inside a quoted url(). Quotes avoid parsing problems with spaces and special characters.

.check-icon {
  background-image: url("data:image/svg+xml,...");
  background-repeat: no-repeat;
  background-size: 1em;
}

Accessibility still matters

CSS background images do not provide accessible names. Use them for decoration, or provide the equivalent meaning in visible text or an appropriate accessible label. For meaningful inline SVG, use proper title and accessibility attributes instead of hiding the graphic inside CSS.

Security and maintainability

Only embed SVG from sources you trust, and inspect exported markup before placing it in a document. Keep the original SVG in source control so future edits do not require reverse-engineering an encoded string.

URL encoding and Base64 are not interchangeable

URL encoding escapes characters that would otherwise conflict with the surrounding CSS or HTML. It preserves much of the SVG text in a recognizable form. Base64 converts bytes into a different text alphabet; it is useful when a pipeline explicitly requires it, but it usually adds about one third to the encoded payload and obscures the source.

For a CSS background, a URL-encoded SVG normally needs the quotes, angle brackets, hash characters and other reserved characters handled correctly. A literal # in a color is especially important: left unescaped in a URL, it begins a fragment rather than representing part of a hex color. Using a converter is safer than manually replacing a handful of characters and hoping the whole document is covered.

.status-dot {
  width: 1rem;
  height: 1rem;
  background: url("data:image/svg+xml,%3Csvg ... %3E") center / contain no-repeat;
}

Do not paste the ellipsis in this abbreviated example into production. Generate the complete value from a validated SVG, then keep it inside the quoted url().

A caching decision you can apply

Ask where the asset changes and where it is reused. If the icon changes only when its component CSS changes, embedding may be convenient. If the same logo appears in several stylesheets and pages, a normal file gives the browser one reusable cache entry. If a single HTML document must work without any accompanying files, a data URI can make that document genuinely self-contained.

• One tiny decorative icon, one component: a URL-encoded data URI is reasonable.
• A shared brand asset: use a versioned SVG file with long-lived caching.
• Many repeated inline icons: compare a sprite before embedding more copies in CSS.
• A large or frequently edited illustration: keep it as a separate, readable asset.

HTML, CSS and JavaScript have different escaping rules

A value that works in a stylesheet is not automatically safe to concatenate into an HTML attribute or a JavaScript template literal. Quotes can terminate attributes, and user-controlled markup can create injection risks. Treat the generated string as data for one specific context rather than a universal snippet. In HTML, prefer a normal img element with a useful alt decision; in CSS, use data URIs primarily for decoration.

Verify the result in the real page

Check the Network panel to see whether removing a request actually reduces the total bytes transferred. Watch for the same encoded asset appearing in several CSS rules, which duplicates its payload. Test dark mode and forced-colors mode if the icon uses fixed colors. Finally, make sure a Content Security Policy allows the data: image source where your application requires one.

If the result needs to be downloaded by a system that does not support SVG, use PNG or WebP export instead of wrapping vector markup in another encoding. If the SVG itself is unnecessarily large, optimize the source first; encoding a bloated file does not make it efficient.