My Tool Studio
CSS

SVG to CSS Converter

This SVG to CSS converter turns SVG code into a data URI you can use as a CSS background-image, a list bullet, a class, a recolorable mask icon or a CSS variable. Paste the markup, upload an .svg file or drop one on the input box. An optimize option strips editor metadata and rounds long decimals before encoding, and shows how many bytes it saved. The Replace colors panel finds the fill, stroke and stop colors and lets you swap them. Choose URL-encoded or base64 output and one of seven wrappers, preview it contained or tiled, then copy or download a .css file. A second tab decodes a data URI back into SVG code. For example, a small checkmark icon becomes a 291-byte background-image line with no extra file request.

Always freeNo sign upRuns in your browser
CSS Output
Your encoded CSS will appear here.

Browser support

CSS helpers

Clean-up before encoding

Optimize (strip editor metadata, round decimals)

Removes the XML declaration, doctype, comments, Inkscape, Sodipodi and Sketch metadata, and empty defs. Shapes, ids and styles are left alone.

Replace colors

Hex or currentColor values in fill, stroke and stop-color show up here once you paste an SVG.

How to use

01

Add your SVG

Paste the full <svg> markup, click Upload .svg, or drop a file on the input box. Files up to 1 MB are accepted. Sample loads a small checkmark icon to try.

02

Clean up and pick a format

Leave Optimize on, change any color under Replace colors, then choose Modern (URL-encoded) or Legacy (base64) and one of the seven CSS helpers, such as Recolorable icon.

03

Check and copy

Check the preview as Contain or Tile on a light, dark or checker backdrop, then Copy CSS or download it. To reverse a data URI, open the Data URI to SVG tab.

Why SVG to CSS Converter

URL-encoded vs base64 SVG data URIs

Both formats embed the same SVG. The difference is how the text is escaped. The sizes below are for the tool's sample checkmark icon, which is 252 bytes after whitespace is collapsed.

In the Modern output, double quotes are swapped for single quotes and characters such as <, >, # and % are percent-encoded. If the SVG already contains single quotes, double quotes are encoded as %22 instead so attributes stay intact. Gzip on your server shrinks both formats further, and URL-encoded text usually compresses better than base64.

URL-encoded (Modern)Base64 (Legacy)
Starts withdata:image/svg+xml,data:image/svg+xml;base64,
Sample icon size291 bytes362 bytes
Readable in the stylesheetYes, tags and attributes stay visibleNo
Size overheadA few bytes per escaped characterAbout one third
Browser supportAll current browsersAll browsers, including very old ones

Example: an SVG icon as a list bullet and a background

Load the Sample and choose the CSS bullets helper. The output is a single line you can put on a list: ul.checks { list-style-image: url("data:image/svg+xml,..."); }. Each list item then shows the checkmark instead of a dot. If the icon is too large, lower width and height in the SVG before converting.

For a background, choose Advanced background-image. It writes background-image plus background-repeat: no-repeat, background-position: center center and background-size: cover. For icons inside buttons, change cover to a fixed size such as 16px 16px and add padding so text does not sit on top of the icon.

The Inside class helper wraps the same value in a .svg-bg class with background-size: contain, which fits the whole icon inside any box without cropping.

Common questions

What's the difference between Modern and Legacy SVG encoding?
Modern percent-encodes only the characters that must be escaped, so the result stays readable and is usually smaller. Legacy base64-encodes the whole SVG, which is about a third larger but works in very old browsers. Modern is the right choice for current browsers.
Why put an SVG data URI in CSS instead of linking a file?
The icon arrives with the stylesheet, so there is no extra request and no flash while it loads. That suits small icons, bullets and patterns. For large or many images, separate files cache better and keep the CSS small.
What does the SVG optimize option remove?
The XML declaration, doctype, comments, metadata blocks, Inkscape, Sodipodi and Sketch attributes, and empty defs. It also rounds numbers to the decimal places you pick. It does not change shapes, ids, classes or style blocks, so it is safe for most files but less thorough than a full optimizer like SVGO.
How do I change the color of an SVG before converting it to CSS?
Use the Replace colors panel. It lists up to 12 hex or currentColor values found in fill, stroke and stop-color, each with a color picker. Pick a new color and the encoded output and preview update. Colors set by name, rgb() or classes are not listed.
How can an SVG data URI icon follow the text color?
Pick the Recolorable icon (mask-image) helper. It uses the SVG as a mask and paints the element with background-color: currentColor, so the icon takes the color of the surrounding text and changes on hover. A plain background image cannot do that, because currentColor falls back to black inside it.
How do I use inline SVG in CSS for list bullets?
Pick the CSS bullets helper. It writes list-style-image with your data URI, which you put on a ul or li rule. The bullet shows at the SVG's own size, so set width and height in the SVG to something small like 12 or 16.
Does the SVG need the xmlns attribute to work as a data URI?
Yes. As a standalone image the SVG must include xmlns='http://www.w3.org/2000/svg' on the root svg element, or the browser will not render it. Inline SVGs in HTML can skip it, which is why copied markup sometimes lacks it.
Is base64 or URL-encoding smaller for SVG in CSS?
URL-encoding is usually smaller. For the sample checkmark icon, the URL-encoded data URI is 291 bytes and the base64 one is 362 bytes. Base64 always adds about a third to the size, while URL-encoding only adds a few bytes per escaped character.
Why isn't my SVG previewing in the converter?
The input must contain an <svg> tag. If it does and the preview is still empty, check for the xmlns attribute, broken tags, or references to external files and fonts, which do not load inside a data URI.
Can this tool decode a data URI back into SVG code?
Yes. Open the Data URI to SVG tab and paste a url("data:...") value, a whole CSS line or the bare data URI. URL-encoded and base64 payloads are both decoded. You can copy the SVG, download it as a file, or send it back to the encoder to edit and re-encode.

More CSS tools

View all

CSS Clip Path Generator

Visual clip-path editor with SVG import and PNG tracing

CSS

CSS Gradient Generator

Build linear, radial and conic gradients

CSS

CSS Box Shadow Generator

Build layered box shadows with presets

CSS

CSS Border Radius Generator

Round corners, per corner or as blobs

CSS