SVG to CSS

Convert SVG to CSS data URI for use as background-image, mask, or list bullets

SVG Input

CSS Output

Encoding

URL encoding produces smaller output and works in all modern browsers. Recommended for most use cases.

Examples

Tips

•Optimize your SVG before converting to reduce CSS size
•The xmlns attribute is required and will be added automatically
•Use mask-image for icons that need to match text color
•CSS classes inside SVG won't work with URL encoding