SVG to CSS Background

Inlining an SVG as a background

Any SVG can live directly inside a CSS background-image as a data URI, which removes a network request and keeps the icon in the same file as the rule that uses it. The SVG markup is wrapped in url("data:image/svg+xml,...") after a few characters are escaped so they do not break the CSS string.

Escape, do not always Base64

You can Base64-encode the SVG, but for text-based SVG that bloats the output by about a third and makes it unreadable. URL-encoding only the characters that matter keeps the result smaller and still editable. At minimum you must handle # (used in hex colors), <, >, and the quote style that would otherwise close the CSS string.

Example

.icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h12'/%3E%3C/svg%3E");
  background-size: contain;
}

Note the single quotes inside the SVG and double quotes around the whole url(); mixing them avoids an escape war. The %3C and %3E are the encoded angle brackets.

Pitfalls

A literal # in a fill color terminates the data URI in some browsers, so encode it as %23. Keep an xmlns attribute on the root svg or the image will not render as a background. For large or repeated icons, consider running the file through the SVG minifier first so the inlined string stays short.

FAQ

Can I recolor the SVG with CSS? Not through background-image; the color is baked into the markup. Use an inline <svg> or a mask if you need currentColor.

Why is my background blank? Usually a missing xmlns, an unescaped quote, or a viewBox that does not match the path coordinates.

Base64 or URL-encoded? URL-encode text SVG for size and legibility; reach for Base64 only when the SVG embeds binary data like a raster image.