SVG to CSS Background

Convert SVG code to a CSS background-image data URI. URL-encode or Base64 for inline use.

Encoding

CSS Property

SVG Code

Preview

CSS Declaration

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'%3E %3Ccircle cx='50' cy='50' r='40' fill='%233b82f6' opacity='0.8'/%3E %3Ccircle cx='50' cy='50' r='20' fill='%2360a5fa'/%3E %3C/svg%3E");

Full CSS Block

.element {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'%3E %3Ccircle cx='50' cy='50' r='40' fill='%233b82f6' opacity='0.8'/%3E %3Ccircle cx='50' cy='50' r='20' fill='%2360a5fa'/%3E %3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

Data URI Only

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'%3E %3Ccircle cx='50' cy='50' r='40' fill='%233b82f6' opacity='0.8'/%3E %3Ccircle cx='50' cy='50' r='20' fill='%2360a5fa'/%3E %3C/svg%3E

Original: 208 bytesData URI: 243 bytesEncoding: URL-encoded