SVG to CSS converter

This tool converts SVG code into a Data URI, an encoded URL format that can be used as a background-image source. In plain terms, you can place this converted SVG code directly into CSS and avoid the need for uploading image files, cutting down on the number of server requests.

Go faster: copy-paste graphics right into your CSS Get freebies

SVG Input

Insert your SVG code below:

CSS Output

Tips below for better output.

Browser support:

Modern

Legacy (IE9+)

CSS Helpers:

URL wrapper

Basic background-image

Advanced background-image

CSS bullets (list-style-image)

Inside class

Tips for converting SVG to CSS

When using the tool above to convert SVG code to Data URI, follow these tips for best results.

Optimize your SVG code to take out unnecessary code and keep your CSS shorter. Here is a guide on SVG Optimization.
Remove commented-out code before inserting your code.
When using the legacy browser support option, classes won't work within URL-encoded data URIs. You should replace classes with the direct use of SVG attributes, such as fill='#F00'
When you use an SVG as a background image in CSS, there are a few CSS properties that will help position and size the background design as desired. Learn how to add SVGs as CSS Backgrounds.