Codifica código SVG en URIs data:image/svg+xml optimizadas para CSS sin la sobrecarga de Base64
Selecciona iconos de muestra y patrones vectoriales repetitivos
Pega tu código vectorial a continuación
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");
}