SVG SPRITE

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.

sweet links via SVG additions

Sprites also offer a very efficient method to implement icons for clear and accessible links, be that as part of the interface or to highlight specific links. By using a single file for multiple visuals means a single call to server only. Once cached - all visuals are ready and loaded, great for performance.

Let's take the example of links for downloading an image in a specific format. To present clear and accessible links, we can use a visual reference to show each file format as icon, assigning these via CSS automatically by link destination. Combining these icons into a sprite image will keep this light and fast :)

To use one sprite sheet for any icons used on our site, we'll combine all graphics into one file. The layout of the graphics is flexible though a clear grid helps with easier coordinates. To finalise the file, we'll optimise the SVG as always and consider our final design and setup to decide which method to use for the SVG.
Check out the sample page for more details on the 3 SVG methods →

via SVG background

• image as jpg
• image as png
• image as hdr
• image as pdf

via inline SVG / definitions