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 encodedSVG
image.
Thanks
.{happy:code}
Top comments (0)