This tutorial describes two ways to create sprites containing many images. However, it uses SVGs rather than the more well-known bitmap techniques.
SVGs are ideal for logos, diagrams, and icons for several reasons:
- It’s easy to created and manipulate SVGs on the client or server.
- Unlike bitmaps, SVGs can be scaled to any size without losing quality.
- Unlike webfont icons, SVGs remain pin-sharp and can apply multiple colors, gradients, and even complex filters.
What are Image Sprites?
Image sprites have been a good-practice technique for many years. If you require a number of regularly used graphics, you place them in a single image rather than individual files. For example:
This example contains eight 24×24 icons in a single 192px × 24px file. The file may offer slightly better compression and it only requires a single HTTP request for all icons to become visible. Loading eight separate icons is unlikely to take much longer over HTTP/2, but the images could appear at different times and would only be cached on first use.
If you wanted to show the right-most printer icon, CSS can display the correct image by positioning the background:
#print { width: 24px; height: 24px; background: url('sprite.png') -168px 0; } Various tools can be used to calculate pixel positions and generate CSS code:
- CSS Sprites Generator
- cssspritestool.com
- Spite Cow
SVG Image Sprites
Multiple SVG images can also be placed into a single SVG file and each can be referenced by an ID rather than a pixel position.
The most common technique is to define individual images within an SVG <symbol>. For example, this SVG contains a green circle, red square, and blue triangle:
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <symbol id="circle"> <circle cx="50" cy="50" r="45" stroke-width="5" stroke="#0f0" fill="#0f0" fill-opacity="0.5" /> </symbol> <symbol id="square"> <rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#f00" fill="#f00" fill-opacity="0.5" /> </symbol> <symbol id="triangle"> <path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#00f" fill="#00f" fill-opacity="0.5" /> </symbol> </svg> A single sprite can be used any number of times throughout a page with SVG <use>:
<svg width="100" height="100"> <use xlink:href="./spriteuse.svg#circle" /> </svg> <svg width="100" height="100"> <use xlink:href="./spriteuse.svg#square" /> </svg> <svg width="100" height="100"> <use xlink:href="./spriteuse.svg#triangle" /> </svg> Unfortunately, older browsers such as IE11 and below won’t load the external image. The best workaround is to embed the full SVG into the HTML markup and reference each sprite using its target. For example:
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <symbol id="circle"> <circle cx="50" cy="50" r="45" stroke-width="5" stroke="#0f0" fill="#0f0" fill-opacity="0.5" /> </symbol> <!-- further images --> </svg> <!-- display circle --> <svg width="100" height="100"> <use xlink:href="#circle" /> </svg> Continue reading How to Use SVG Image Sprites on SitePoint.
