SVG → CSS

Convert SVG markup to CSS background-image or mask-image using data URIs. Shows both URL-encoded and base64 variants with size comparison.

SVG input

CSS background-image (URL-encoded)

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Ccircle cx='12' cy='12' r='10'/%3E %3Cline x1='12' y1='8' x2='12' y2='16'/%3E %3Cline x1='8' y1='12' x2='16' y2='12'/%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;

CSS background-image (base64)

background-image: url("data:image/svg+xml;base64,");
background-repeat: no-repeat;
background-size: contain;

CSS mask-image (URL-encoded)

-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Ccircle cx='12' cy='12' r='10'/%3E %3Cline x1='12' y1='8' x2='12' y2='16'/%3E %3Cline x1='8' y1='12' x2='16' y2='12'/%3E %3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Ccircle cx='12' cy='12' r='10'/%3E %3Cline x1='12' y1='8' x2='12' y2='16'/%3E %3Cline x1='8' y1='12' x2='16' y2='12'/%3E %3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;

CSS mask-image (base64)

-webkit-mask-image: url("data:image/svg+xml;base64,");
mask-image: url("data:image/svg+xml;base64,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;

Was this page helpful?

SVG → CSS

Related tools