0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
SVG to CSS
Convert SVG code to a data URI ready to use as a CSS property: background-image, mask-image or CSS variable. Supports URL and Base64 encoding.
Format
CSS Property
Options
SVG Code
Lines:0Characters:0

How it works

It converts an SVG's code into a Data URI ready to use in CSS, so you can embed the icon directly in the stylesheet without a separate file or an additional HTTP request.

It offers two encodings: URL-encoded (percent-encoding), shorter and more readable, recommended for SVG; and Base64, somewhat longer but universally compatible.

The result can be generated as background-image, as mask-image (to color the icon with CSS), or as a reusable CSS variable. Minifying the SVG beforehand reduces the size even more.

Examples

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">…</svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…%3C/svg%3E");URL encoding keeps the SVG almost readable and is usually shorter than Base64.
-webkit-mask-image: url("data:image/svg+xml,…"); mask-image: url("data:image/svg+xml,…");As mask-image, the icon's color is controlled with the element's background-color property.

Use cases

  • Embed SVG icons as background-image without adding HTTP requests to the page.
  • Use an SVG as a mask (mask-image) to recolor it from CSS based on the theme or state.
  • Store an icon in a CSS variable and reuse it across several selectors.
  • Reduce the weight of inline icons by minifying the SVG before embedding it.

Frequently asked questions

Is URL-encoded or Base64 better?

For SVG, URL-encoded is usually the best option: it produces a shorter and more readable Data URI because SVG is text. Base64 gives maximum compatibility, but adds around 33% in size.

Why use mask-image instead of background-image?

With background-image the icon keeps its original colors. With mask-image the SVG defines only the shape and CSS provides the color, ideal for monochrome icons that change with the theme.

What does the minify option do?

It removes comments and collapses the SVG's whitespace before encoding it, so the final Data URI is smaller without changing the drawing.

Is my SVG uploaded to a server?

No. The conversion happens entirely in your browser; the SVG never leaves your computer.

See also