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.
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.