Image sprites are multiple individual images in a single image file that are positioned as backgrounds on elements via CSS. Combining images into a single file reduces the number of server calls made when loading the page and the single file has a smaller size than the cumulative total of all its individual images as separate files. Sprites can be a bit fussy to make and can be a pain to update, but their efficiency makes up for it.
Since all current browsers support SVG images they are a better choice than PNGs, since they scale to any size and keep their sharpness on screens with high resolutions, particularly phones. (With a PNG sprite we often made a 2x sprite for phones to account for the increased pixel depth.) But that ability to scale can also create problems.
Since SVG can scale they don’t have a native size. They will try to scale within their container. That means you have to explicitly set a width and height for the sprite. There are two places you must do that: in the CSS and in the file itself. The CSS setting is very straightforward. Just set the background size to the height and width that gives you the size you want while maintaining the correct aspect ratio.
Setting the size inside the SVG is a little trickier. In an example I made, my artboard in Illustrator was 72px by 1872px, which was the intended usage size for the graphic.
But when I applied it, I noticed that the sprites progressively fell out of alignment, each one going a pixel or two lower than it should have been, with the cumulative result being very noticeable as I got further down the sprite.
The reason for this was that the internal size of the SVG did not match what was set in the artboard’s dimensions. SVG’s internal size is set with the “viewbox” property, which takes four values, min-x, min-y, width and height. When I opened the SVG file with a text editor I discovered that these values did not match the artboard:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 63.29698 1852.04219">
It appears that the SVG ignored the artboard dimensions and instead used the actual width and height of the imagery, in effect trimming the whitespace from the sides and bottom of the sprite. Since the first sprite was aligned at the top (y=0) the vertical trimming was happening at the bottom, and the horizontal trimming was using the widest individual image as its boundary. I solved this problem by placing an empty square 72 x 72 (the size of my sprite blocks) in the last sprite frame, which had the effect of propping open both the width and height to the maximum specified in the artboard. I still had to go into the SVG with a text editor to make the height a whole number, as it was a few hundredths of a pixel over despite my best efforts at precision alignment.