SVG to CSS converter
This tool converts SVG code into a Data URI, an encoded URL format that 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 image files.
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 code before inserting your code.
- Classes don't work within URL-encoded data URIs, 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 properties that will help position and size the design as desired. We comment those properties out, so you may want to play with them.