All tools

SVG to CSS

Encode an SVG into a URL-encoded or Base64 data URI ready to drop into a CSS background.

CSS background
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ea7a18' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");

URL-encoding keeps the data URI smaller and readable; Base64 is more widely compatible. Drop the result straight into a CSS background-image. Runs locally.