DEV Community

Hidayt Rahman
Hidayt Rahman

Posted on

Add SVGs with the CSS background image

SVG supports animation, transparency, gradients, and is easily scalable without losing quality.

This is the reason we use a lot SVG on the web page instead of PNG and other image format.

It's easy to use in various way with CSS.

Using SVG file

selector {
   background-image: url( '/path/image.svg' );
}
Enter fullscreen mode Exit fullscreen mode

Using SVG embed code

This one is bit tricky, Its excepts entire SVG code in the url function.
Please take care of ' and " by putting code inside the url.

selector  {
   background-image: url('data:image/svg+xml,<svg>Add your own SVG</svg>');
}
Enter fullscreen mode Exit fullscreen mode

Image styling must be applied directly to its SVG code, Additional styling wont have any effect on encoded SVG image.

Thanks

.{happy:code}

Top comments (0)