SVG to CSS Data URI Studio

Encode SVG markup into optimized CSS data:image/svg+xml URIs without Base64 overhead

SVG Presets

Select sample icons and repeating vector patterns

Raw SVG Markup

Paste your vector markup below

171 B raw

~5% smaller than Base64

URI: 242 B vs Base64: 254 B

Optimized

Interactive Canvas Preview

background-image: url("data:image/svg+xml,%3Csvg width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Ccircle cx=%222%22 cy=%222%22 r=%221.5%22 fill=%22%236366f1%22 fill-opacity=%220.3%22 /%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;

data:image/svg+xml,%3Csvg width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Ccircle cx=%222%22 cy=%222%22 r=%221.5%22 fill=%22%236366f1%22 fill-opacity=%220.3%22 /%3E %3C/svg%3E

<img src="data:image/svg+xml,%3Csvg width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Ccircle cx=%222%22 cy=%222%22 r=%221.5%22 fill=%22%236366f1%22 fill-opacity=%220.3%22 /%3E %3C/svg%3E" alt="Embedded SVG" width="48" height="48" />

:root {
  --icon-embedded: url("data:image/svg+xml,%3Csvg width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Ccircle cx=%222%22 cy=%222%22 r=%221.5%22 fill=%22%236366f1%22 fill-opacity=%220.3%22 /%3E %3C/svg%3E");
}