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' );
}

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>');
}

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

Thanks

.{happy:code}