Improved Image Sprites with SVG

This is part 2 of a series on image sprites. See: Faster Websites with Image Sprites

SVG is a vector graphics format built for the web. What you might not know is that it is a drop-in replacement anywhere you can use a jpeg or png. In this article, I will examine the advantage of using SVG as a replacement image format for PNG in image sprites.

The image sprite that was built in part 1 has four images:

Advantages of SVG Image Sprites

The greatest benefit of SVG over any raster image format is that SVG is resolution independent. The graphics seen by the user will be nice and crisp regardless of their screen resolution or if they have zoomed in or not. Indeed, this is one reason why SVG is going to storm the web. As image sprites tend to be used for line-art icons, the SVG graphic format should be able to closely (if not completely) duplicate a PNG used as an image sprite.

It is possible to make high resolution versions of your images. That is not a very good use of bandwidth when SVG provides a much better solution. My "high-resolution" version of the image sprite is only double the resolution. This results in a doubling of the file size. The image in question has few details that prevent efficient PNG compression. There weren't any patterns or gradients that would have made it much worse.

It would be wrong to assume that, in general, SVG files without compression will be smaller than the equivalent rasterized PNG files at normal resolutions. On the other hand, I didn't go out of my way to remove whitespace or comments from the SVG file.

Of the browsers that I tested, only Chrome seemed to support gzip compressed SVG (.svgz) files locally. Even if this is true, web servers like Apache can be configured to compress text files before sending them. So, with the correct headers set, Firefox, Safari and IE will probably accept a compressed SVG file.

Make a SVG Image Sprite

If you looked at the previous article on image sprites, the css code will look familiar. The only difference is that we are switching to use the svg file as the background image.

I'm cheating here as the PNG image sprite that I've been using is actually made from a SVG document. Otherwise, I would have had to find a good SVG Tutorial. We'll just skip over the step where you create a replacement SVG graphic for your raster image.

.exp-sprite {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-image:url('/media/sprite-tutorial/navigation-sprite.svg');
}
.exp-sprite-right {
  background-position: 0 0;
}
.exp-sprite-left {
  background-position: 0 -50px;
}
.exp-sprite-magnify {
  background-position: 0 -100px;
}
.exp-sprite-warning {
  background-position: 0 -150px;
}

The first css rule makes a span or div tag take up an area smaller than the sprite's dimensions. The other css rules offset the background to move the visible part of the background. The rules are used together to display the desired image.

At normal resolutions, you should see exactly the same set of icons. Zoom in or use a high-resolution device to see the difference.

<div>
  <span class="exp-sprite exp-sprite-right"></span>
  <span class="exp-sprite exp-sprite-left"></span>
  <span class="exp-sprite exp-sprite-magnify"></span>
  <span class="exp-sprite exp-sprite-warning"></span>
</div>

As explained by the caption above, using SVG instead of a raster format like PNG for an image sprite only requires a minor change to your css stylesheet.