Dev Tools

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
Preview
Size comparison
282 B
Raw SVG
315 B
URL-encoded
394 B
Base64
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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4gPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz4gPGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyIiB5Mj0iMTYiLz4gPGxpbmUgeDE9IjgiIHkxPSIxMiIgeDI9IjE2IiB5Mj0iMTIiLz4gPC9zdmc+");
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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4gPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz4gPGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyIiB5Mj0iMTYiLz4gPGxpbmUgeDE9IjgiIHkxPSIxMiIgeDI9IjE2IiB5Mj0iMTIiLz4gPC9zdmc+");
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4gPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz4gPGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyIiB5Mj0iMTYiLz4gPGxpbmUgeDE9IjgiIHkxPSIxMiIgeDI9IjE2IiB5Mj0iMTIiLz4gPC9zdmc+");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
Was this page helpful?

Related tools

Text to ImageImage CompressorImage CropperImage ResizerImage Flip & MirrorImage Grayscale & Sepia

About SVG to CSS Background

Convert an SVG into a CSS background — either a URL-encoded data URI or a base64 string — so you can embed icons directly in stylesheets without extra HTTP requests.

How to use

  1. Paste your SVG markup.
  2. Choose URL-encoding (smaller, recommended) or base64.
  3. Copy the generated background-image CSS.

Frequently asked questions

URL-encoding or base64 — which is better?
URL-encoded SVG is usually smaller and more readable in CSS; base64 is a safe fallback for tricky markup.
Why embed SVG in CSS?
Inlining avoids an extra network request and keeps small icons bundled with your styles.