SVG to CSS Converter

Convert SVG markup to CSS data URIs for background-image, mask, cursor, and list-style.

SVG Input

Options

Usage

Encoding

Specify size

Width (px)

Height (px)

Preview

262 bytes

Generated CSS

.element {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E %3Ccircle cx='50' cy='50' r='40' fill='%236366f1' opacity='0.8'/%3E %3Crect x='20' y='20' width='20' height='20' fill='%23ec4899'/%3E %3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100px 100px;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the SVG to CSS Converter?

Convert SVG files to CSS background-image data URIs. Embed SVG icons directly in CSS without external file references.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the SVG to CSS Converter

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Paste SVG code

Paste the raw SVG markup (the contents starting with <svg ...>).

Optimize the SVG

The tool removes unnecessary whitespace and attributes to minimize the data URI length.

Copy the CSS

Click Copy to get a background-image CSS rule with the embedded SVG data URI.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

svg-embedded.css

.icon-arrow {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' stroke='%231d1d1f' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

SVG is URL-encoded, not Base64-encoded, to keep the output readable and editable. URL-encoded SVG is typically smaller than Base64 for simple icon shapes.

Pro tips

Pro tips for better results

★

Use currentColor to make SVG icons themeable

Replace hardcoded stroke and fill colours in the SVG with currentColor before converting. Then set the icon's color in CSS: .icon { color: #0071e3; }. This lets you change the icon colour in one CSS property.

FAQ

Frequently asked questions

Not directly. Once embedded as a data URI, the SVG colours are baked in. For colour-variable icons, use inline SVG in HTML with currentColor, or generate separate data URIs for each colour variant.

There is no hard limit, but keep SVG data URIs below 4KB for performance. Complex illustrations should be external SVG files. Data URIs are most effective for simple icons (checkmarks, arrows, chevrons) below 1KB.