SVGBase

SVG to CSS Converter

Turn your SVG into a CSS background-image. Preview the result, choose URL or Base64 encoding, then copy the code or download a CSS file. Free, with no sign-up.

SVG source

Your SVG content is preserved during encoding.

CSS output
Local processing · No uploads · 256 KB SVG limit

Add class="svg-background" to your element. The full rule includes a 240px example height; change it to fit your layout.

Live CSS background preview

Preview background

Add an SVG to generate CSS and preview its background.

This preview uses your generated CSS. SVG images do not run scripts or load external resources. Preview background colors are not included in the download.

Next steps

All SVG tools

How to use SVG as a CSS background

  1. 1

    Add your SVG

    Paste SVG markup, upload a .svg file, or try the example. Your SVG stays in your browser.

  2. 2

    Check the background

    Choose the encoding, size, position and repeat. The live preview uses the CSS you will copy.

  3. 3

    Use the CSS

    Copy the full rule and add its class to an element, or copy just the background-image value. Download a .css file when you want to save it.

HTML and CSS example

This uses the same leaf SVG as Try an example. Paste the CSS into your stylesheet, or save it as sample-background.css. Place the link in your HTML head and the div in the body. Change the filename and the 240px example height to fit your page. This sample is decorative; provide a text alternative for meaningful artwork.

HTML

<link rel="stylesheet" href="sample-background.css" />
<div class="svg-background" aria-hidden="true"></div>

Leaf rendered by the sample CSS

CSS

.svg-background {
  width: 100%;
  height: 240px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22leaf%22%20x2%3D%221%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%2344796b%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23214d42%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20fill%3D%22url%28%23leaf%29%22%20d%3D%22M80%20136C18%20116%2016%2045%2080%2024c64%2021%2062%2092%200%20112Z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M80%2052v84m0-44%2025-24M80%20112%2055%2088%22%20fill%3D%22none%22%20stroke%3D%22%23f2eee3%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

Choose the output you need

Full CSS rule

A ready-to-use class with the image, an example height, sizing, position and repeat settings.

background-image declaration

One CSS property to paste into an existing selector. Keep using your own layout and sizing rules.

Raw Data URI

The encoded image URL, ready for an image source or another field that accepts a Data URI.

SVG background not showing?

Give the element a visible size

An empty element needs a width and height to show its background. Keep the svg-background class on the element. The full CSS rule includes width: 100% and a 240px example height; adjust both to suit your layout.

Check the SVG namespace

An SVG used as an image needs xmlns="http://www.w3.org/2000/svg" on its root element. If the converter offers Add SVG namespace, use it and check the preview again.

Embed the artwork’s resources

External images, fonts and styles do not load inside an SVG background image. Embed required resources in the SVG. Its currentColor also does not inherit the HTML element’s text color; use inline SVG or an SVG mask for themeable icons.

Check your website’s image policy

If the preview works here but the image is blocked on your site, check the browser console for a Content Security Policy error. Your site’s img-src policy, or its default-src fallback, needs to allow data: images. Ask your site administrator to review that setting.

SVG to CSS questions

Does this turn the artwork into CSS shapes?

The tool embeds your SVG inside a CSS background-image as a Data URI. Paths, gradients and other SVG content stay SVG; the output is a CSS rule that displays that image.

Should I choose URL encoding or Base64?

Both embed the SVG without a separate image URL. URL encoding keeps the SVG as escaped text, while Base64 encodes its UTF-8 bytes. Compare the actual output sizes for your artwork; neither option is a compression tool.

Will my colors, styles and gradients change?

Encoding preserves your original SVG content, including styles and gradients. An SVG loaded as an image has browser restrictions: scripts and external resources are not supported. Embed required resources in the SVG and check the preview.

Can I change its color with CSS currentColor?

An SVG background image has its own color context. Its currentColor does not inherit the text color of the HTML element. For a single-color icon that needs hover or theme colors, use an SVG mask or inline SVG.

Is a Data URI always better than an SVG file?

A Data URI can be convenient for small icons and backgrounds and avoids a separate image request. Larger artwork or images shared across pages can benefit from an external, independently cached SVG file. Choose based on your page and reuse needs. Save SVG code as a separate file.

Is this free, and is my SVG uploaded?

Yes, it is free and requires no sign-up. Encoding and preview happen in your browser. Your SVG is not uploaded. The tool accepts UTF-8 SVG files up to 256 KB.