Mega contact CTA with sprite roll-over on hover
get in touch
creating the graphic
Using the sprite method allows us to combine several graphics into one single SVG file and implement the visuals via code. Depending on our method, we can then use CSS to control the SVG. This technique can be used to present static graphics, interactive motion effects and even animation.
The principle of sprites is simple: a single file contains multiple images which can vary in size/proportion. The X (horizontal) and/or Y (vertical) coordinates are used to control the position of the image's content to display the relevant portion of the graphic, if required at set time intervals.
fallback for SVG sprite via CSS
For browsers which do not support SVG (check caniuse.com for details), we'll use a PNG again as fallback ~ via this clever approach from css-tricks:
background: url(fallback.png); background: url(background.svg), linear-gradient(transparent, transparent);
This combines two features that, together, target the perfect combo. If a browser supports both multiple backgrounds and linear gradients, it supports SVG too. So here we declare the SVG with a completely transparent linear-gradient. If that fails in an older browser, the fallback declared above will kick in.
You might add a slight performance hit on modern browsers from having to calculate the transparent gradient, but it's probably negligible. quoted from A Complete Guide to SVG Fallbacks.