SVG to CSS Background

You have an SVG icon and want to use it as a CSS background image without an HTTP request. Encoding it as a data URI lets you embed the SVG directly in your stylesheet. This tool converts SVG code to a CSS background-image data URI in both Base64 and URL-encoded formats.

Why Use SVG as a CSS Background?

Embedding SVG as a CSS data URI eliminates one HTTP request per image, simplifies deployment (no separate image files), and makes it easy to use SVGs in pseudo-elements like ::before and ::after — which cannot reference external image files directly.

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

Base64 vs URL Encoding

Base64 encodes the SVG as a Base64 string prefixed with data:image/svg+xml;base64,. It’s universally supported and works in all CSS contexts. The output is slightly larger than the original SVG (Base64 adds ~33% overhead).

URL encoding encodes special characters (spaces as %20, < as %3C, etc.) while leaving most SVG syntax readable. This produces smaller output than Base64 for simple SVGs and is supported in all modern browsers. For SVGs with Unicode content, Base64 is safer.

Optimization Tips

Before converting, minimize the SVG:

• Remove comments (<!-- ... -->)
• Remove unnecessary attributes like id, class, style if not needed
• Remove xmlns:xlink if not using xlink references
• Simplify paths if possible

Smaller SVG = smaller data URI = faster stylesheet parsing.

Frequently Asked Questions

What is the maximum SVG size for a data URI? There is no hard limit in CSS, but large data URIs (> 32KB) can cause performance issues. For large SVGs, serving them as separate files with caching is more efficient.

Does this work in all browsers? Yes. SVG data URIs in CSS background-image are supported in all modern browsers (Chrome, Firefox, Safari, Edge) and IE9+.

Can I change SVG colors for dark mode? With a data URI, the SVG colors are fixed at encoding time. For dynamic theming, use an <img> tag with CSS filter or an inline <svg> element which can be styled with CSS variables.

Is my SVG sent to a server? No. All conversion runs entirely in your browser. Your SVG code is not transmitted anywhere.