Encode SVG Data URIs for CSS Backgrounds

Use a data URI for a small, stable asset

A data URI can place a small SVG directly inside a stylesheet or document. This avoids a separate file reference, but it also makes the surrounding source harder to read. Use it deliberately for a simple decorative pattern or repeated interface detail. Keep an editable SVG source elsewhere so later changes do not require reconstructing encoded markup.

Encode characters that have URL meaning

A hash character in an SVG color such as #334155 has special meaning in a URL. Encode it as %23 inside the data payload. Other punctuation and whitespace also need a consistent encoding strategy. Use a URL-encoding function on the SVG markup rather than hand-fixing one broken character at a time. Keep the MIME type and separator outside the encoded payload.

Check CSS quoting separately

The CSS url() wrapper has its own syntax. A valid SVG can still fail if quotation marks terminate the CSS string or if the data URI is assembled incorrectly. Inspect the computed background-image in browser developer tools and open the resulting URL when diagnosing a problem. Test the exact output produced by your build pipeline, because minification may change the surrounding representation.

Compare the maintenance tradeoff

An external SVG can be shared and cached separately across pages. An embedded data URI travels with the containing stylesheet and may be repeated if several bundles include it. Compare actual delivered files before claiming a performance improvement. Data URI backgrounds are decorative content; put essential instructions and accessible names in the document rather than hiding them in a background image.

Reference and further reading

Official documentation