SVG to CSS Converter — Turn SVG Markup Into CSS Data URI Backgrounds

SVGs are everywhere in modern web design — icons, decorative shapes, dividers, hero illustrations. But embedding raw SVG markup inside HTML bloats the document, clutters templates, and makes it harder to cache assets separately. One clean solution is to turn that SVG into a CSS data URI: a single string you can drop into a stylesheet as a background image, a list bullet, or a reusable utility class.

This converter takes your SVG markup and produces ready-to-use CSS. Pick an encoding mode, choose how you want the output wrapped, and copy the result into your stylesheet. No signup, no upload, no server — everything happens in your browser.

Why convert SVG to CSS

Inline SVG is powerful. It lets you style individual parts with CSS, animate strokes, and recolor fills on the fly. But not every SVG needs that level of control. When a graphic is purely decorative — a checkmark bullet, a diagonal divider, a textured background — turning it into a CSS background has real advantages.

Smaller HTML. Moving decorative SVGs out of the markup and into a stylesheet keeps templates lean. The HTML becomes easier to read, and the SVG lives in one place instead of repeated across dozens of components.

Cacheable stylesheets. A background image declared in CSS can be cached by the browser alongside the rest of your stylesheet. Inline SVGs travel with every HTML response, which means they are re-downloaded on every page load unless the entire HTML is cached.

Reusable classes. Once an SVG is a data URI, you can wrap it in a class like .svg-bg and apply it to any element. Need the same chevron icon on twenty list items? One class, no copy-paste.

No extra HTTP requests. Data URIs are embedded directly in the stylesheet. For small decorative graphics, this eliminates a round-trip to the server. No 404s, no broken icons, no CORS headaches.

The trade-off is that data URI backgrounds cannot be styled with CSS the way inline SVG can. You cannot change the fill color of a shape from the page's stylesheet, and you cannot animate internal elements. For static decorative graphics, that is usually fine. For interactive icons, inline SVG is still the better choice.

How to use

Paste your SVG

Open the SVG source textarea and paste your SVG markup. It should start with an <svg> tag. A single icon, a full illustration, or even a multi-path graphic all work. As you type or paste, the CSS output updates immediately — there is no Convert button to click.

Choose an encoding mode

The Encoding mode group controls how the SVG is encoded into the data URI.

• Modern encoding URL-encodes the markup and produces data:image/svg+xml,.... This is the most readable option and works in all current browsers.
• Legacy encoding base64-encodes the markup and produces data:image/svg+xml;base64,.... This is larger but compatible with older browsers such as IE9 and is sometimes required when the SVG contains characters that are awkward to URL-encode.

Pick modern unless you have a specific reason to support legacy environments.

Choose a CSS wrapper

The CSS wrapper group controls how the data URI is wrapped in CSS output.

• Raw data URI — just the url("...") string, ready to paste anywhere.
• Simple background — a single background-image declaration.
• Full background rule — a set of useful background declarations including background-image, background-repeat, background-position, and background-size.
• List bullet image — a list-style-image declaration, handy for custom list markers.
• Reusable class — wraps the full background rule in a .svg-bg class you can apply to any element.

Copy the result

Click Copy CSS to write the output to your clipboard. A short confirmation appears for a second or two. The output textarea is read-only, so you can also select and copy manually if you prefer.

Examples

Here is a small SVG — a simple checkmark icon — and the CSS it produces under different settings.

Input SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#0aa" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="4 12 10 18 20 6"/>
</svg>

Modern encoding, raw data URI:

url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230aa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E")

Legacy encoding, raw data URI:

url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGFhIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHBvaW50cz0iNCAxMiAxMCAxOCAyMCA2Ii8+PC9zdmc+")

Modern encoding, full background rule:

background-image: url("data:image/svg+xml,...");
background-repeat: no-repeat;
background-position: center;
background-size: contain;

Modern encoding, reusable class:

.svg-bg {
  background-image: url("data:image/svg+xml,...");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

Notice how the modern encoding keeps the SVG mostly readable — you can still recognize the tag structure — while the legacy base64 version is opaque but universally safe.

Tips

Always include the xmlns attribute. An SVG without xmlns="http://www.w3.org/2000/svg" may render correctly in a browser window but fail when used as a background image. This converter adds the namespace automatically if it is missing, so you do not have to worry about it.

Keep file size in mind. A data URI is typically about 33% larger than the equivalent binary file, and base64 encoding adds a further overhead. For icons and simple shapes this is negligible. For complex illustrations with thousands of paths, the resulting CSS can become large enough to slow down stylesheet parsing. Use data URIs for small decorative graphics; serve complex artwork as separate SVG files.

currentColor does not work in data URIs. Inline SVG can use fill="currentColor" so the icon inherits the text color. A data URI background is a separate document — it cannot read the parent page's color value. If you need to recolor an icon from CSS, either use inline SVG or generate a separate data URI for each color.

Do not rely on background images for meaningful content. Screen readers generally ignore CSS background images. If the SVG conveys information — an error icon, a status indicator — it should be in the HTML with proper aria-label or alt text, not hidden in a stylesheet. Use data URI backgrounds for decoration only.

Test in your target browsers. Modern encoding works in every browser released in the last decade. If you must support IE9–IE11 or very old mobile browsers, switch to legacy base64 encoding to avoid edge cases with special characters.

FAQ

Is my SVG uploaded to a server?

No. The entire conversion runs in your browser using client-side JavaScript. The SVG you paste never leaves your device. There is no API call, no upload, and no logging.

What is the difference between modern and legacy encoding?

Modern encoding URL-encodes the SVG markup and produces a shorter, more readable string. Legacy encoding base64-encodes the markup, which is larger but compatible with older browsers and avoids issues with certain special characters. For new projects, modern encoding is the better default.

What happens if my SVG is missing the xmlns attribute?

The converter injects xmlns="http://www.w3.org/2000/svg" into the root <svg> tag if it is not present. Without it, SVG backgrounds can fail to render in some browsers, so this is applied automatically.

Can I use the output as a list bullet?

Yes. Choose the List bullet image wrapper to get a list-style-image declaration. Apply it to a ul or li element and the SVG becomes the list marker.

Does the converter validate my SVG?

It does not validate against the SVG specification. It normalizes the markup, encodes it, and wraps it in CSS. If the SVG is malformed, the output may not render, but the tool will not crash — it will simply produce an empty or best-effort result.

Can I change the fill color of the SVG from my CSS after converting?

Not directly. A data URI background is a separate document and cannot inherit currentColor from the page. To recolor, edit the SVG source and convert again, or use inline SVG instead.

Related tools

• CSS Formatter — beautify and indent your stylesheets after pasting in the generated CSS.