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.

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;

Related tools

SVG OptimizerImage

Optimize SVG by removing comments, metadata, and whitespace.

SVG-Edit — Vector Graphics EditorImage

Create and edit SVG vector graphics with shapes, paths, and text, in your browser.

Icônes — Icon Explorer & BrowserImage

Search 200,000+ open-source icons across 170+ sets with instant fuzzy search, then copy or download each as SVG, JSX, Vue, and more.

SVG Wave GeneratorCSS

Generate customizable SVG wave dividers with amplitude, frequency, and layers.

Blob Shape GeneratorCSS

Generate organic blob shapes using cubic bezier curves with SVG and CSS output.

Text to ImageImage

Render text as a PNG image with customizable font, size, colors, and style.

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

Paste your SVG markup.
Choose URL-encoding (smaller, recommended) or base64.
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.