Add an SVG Sprite as a Background Image
Learn how to use an SVG sprite to display your icons. Sprites are great because they add only a single HTTP request, are easy to add to markup and can be sized easily with the help of the background-size property.
This is a good option if you know the icons aren’t going to change much and you don’t mind manually editing the SVG sprite.
However, adding/editing icons once a sprite is created is cumbersome to do by hand, because you have to know the size and position of each icon and modify accordingly.
[00:00] We'll be working with the following SVG sprite. Let's locate a few important pieces before we get to implementation. First off, the outer SVG tag has an XML name space tag. It has an XML name space X link tag. It has a width and a height which is the total height of all of the icons as they'll be stacked on top of each other.
[00:22] Next, there's a defs or definitions block that wraps each icon. Each icon is wrapped in a G or group tag that has an ID. Every icon that we want to use is defined after the defs block here using a use tag.
[00:41] On each icon, the X attribute is always zero but the Y attribute is always the increment of the previous icon's Y attribute. For instance, this first icon is 50 pixels tall, so the next icon starts 50 pixels down to make room for the first icon.
[01:00] Each icon has an X link href tag which corresponds to the ID of the icon defined above. In this case, plug corresponds with the group with the ID of plug. The fill attribute is the color of the icon. Let's start in our HTML by adding an i tag with a class of icon and icon plug.
[01:25] I'll copy this icon and change plug to star and umbrella. I'll duplicate all of these. I'm going to make a little bit of room. I'll paste them again. To each one of these icons, I'll add a class of icon small. In our CSS, let's target the icon class.
[01:52] Since there's no content inside of these I elements, let's add in a width of three em and a height of three em. Another issue is that the I element by default is an in-line element, so the height does not have any effect. To fix this, let's add display in-line block.
[02:11] Next, I'll add a background image. In the URL, put the path to the SVG sprite. I'll also set background repeat to no repeat. I'll set background size to cover. This ensures that the background image will fill the allotted space for each icon.
[02:32] You'll notice that for every icon we have the same plug icon being shown. So let's reposition the sprite. First, I'll target icon plug. I'll set its background position to zero zero. Copy this. I'll set icon star change its background position to zero negative three em. Now you can see the star icons are showing up for the correct element.
[03:06] The negative three em comes from the height of the icon class specified here. Since the first icon in the sprite is at zero zero, I have to shift the sprite up by the height of the first icon, in this case, three em.
[03:22] Finally, I'll target icon umbrella. I'll change its background position to negative six em. Again, this negative six em comes from the height of the previous two icons.
[03:37] Now, I'll target icon small. [inaudible] height. Next, I'll target icon star, icon small, and set its background position to zero, negative two em. I'll do the same for icon umbrella, say icon umbrella, icon small, set its background position to zero, negative four em.