本教程介绍了两种创建包含许多图像的精灵的方法。不过，它使用的是SVG，而不是更著名的位图技术。
SVG是标识、图表和图标的理想选择，原因有几个。
- 在客户端或服务器上创建和操作SVG很容易。
- 与位图不同，SVG可以被缩放到任何尺寸而不损失质量。
- 与网络字体的图标不同，SVG保持了针尖般的锋利，并且可以应用多种颜色、梯度，甚至是复杂的过滤器。
什么是图像精灵？
多年来，图像精灵一直是一种良好的实践技术。如果你需要一些经常使用的图形，你可以把它们放在一个单一的图像中，而不是单独的文件。比如说。
这个例子在一个192px × 24px的文件中包含八个24×24的图标。这个文件可能会提供稍好的压缩，而且它只需要一个HTTP请求，所有的图标就会变得可见。通过HTTP/2加载八个独立的图标不太可能花费更多的时间，但图像可能会在不同的时间出现，并且只会在第一次使用时被缓存。
如果你想显示最右边的打印机图标，CSS可以通过定位背景来显示正确的图像。
#print
{
width: 24px;
height: 24px;
background: url('sprite.png') -168px 0;
}
可以使用各种工具来计算像素位置并生成CSS代码。
SVG图像精灵
多个SVG图像也可以放在一个SVG文件中，每个图像都可以通过一个ID而不是一个像素位置来引用。
最常见的技术是在一个SVG <符号>中定义单个图像。例如，这个SVG包含一个绿色的圆形、红色的方形和蓝色的三角形。
<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>
一个单一的精灵可以在整个页面中使用任意次数的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>
不幸的是，旧的浏览器，如IE11及以下的浏览器，不会加载外部图像。最好的解决方法是将完整的SVG嵌入到HTML标记中，并使用其目标来引用每个精灵。比如说。
<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>
