SVG to CSS Converter

This utility transforms SVG code into a Data URI, which is a URL format encoded for direct usage as a background-image source. Put simply, you can insert this converted SVG code directly into CSS, eliminating the necessity of uploading image files and reducing server requests.

Examples

Using double quotes

Your SVG

Encoded SVG

CSS Ready Code

Preview

About The tool

This was tool was developed one weekend so I had a consistent way of converting svgs to css background images easily. The tool is built using React, NextJS, Typescript and Tailwind.