The power of sprites
SVG allows us to create icons in a file format that is resolution independent, which is awesome, but due to the limitations of the HTTP protocol we don't want to make another file request for every icon in our website. This will soon be changing with the HTTP/2 protocol.
In order to avoid having to make a separate request for each icon we can go back to our old friend the sprite, except this time in SVG. To create a sprite in SVG we use the <symbol> tag and apply an ID for referencing later and the viewBox attribute for defining the canvas size. Inside of the symbol icon we create our shapes, text and any other elements that make up our icon.
Inside of the symbol tag we can also add additional elements for accessibility, such as the <title> and <desc> tags. We create our icons inside of a <defs> tag in order to define them for later use and to ensure they're not output onto the page.
There are a number of ways you can create sprites in SVG. They can be created using vector software – such as Adobe Illustrator CC or Sketch – by simply placing the icons onto an art board and exporting the file as an SVG. However, the code they produce needs some editing in order to use as an icon system. Another way is to create an icon system manually. This isn't too difficult and you have complete control over the markup. SVG sprites can also be incorporated into build systems like gulp or grunt, whereby you choose a folder containing SVG files and configure the build to output a single SVG sprite.
Once we've created or generated our SVG sprite, there are a couple of ways we can use it. We could copy the contents of the file and put it at the top of our page – this is called inlining. Alternatively, if we're using php we could use the file_get_contents() function to include the file globally. The only downside is that the file will not be cached because it's treated as code by the browser and not an image.
How to create an SVG sprite
For this tutorial we'll be placing the SVG inside the body of the website, but we'll see how it works using the file externally. The basic code requires an SVG tag and the empty <defs> tag.
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
</defs>
</svg>
Inside the <defs> tag we'll create our first icon using the symbol tag, we need to give the icon the ID and viewBox attributes. Inside, we'll provide a title and shapes to make up our icon.
<symbol id="facebook" viewBox="0 0 24 24">
<title>Facebook</title>
<path d="..."/>
</symbol>
Now we've created our first icon, we'll do the same for the rest of them. Making sure to provide a unique ID and include the viewBox attribute.
<symbol id="twitter" viewBox="0 0 24 24">
...
</symbol>
<symbol id="linkedin" viewBox="0 0 24 24">
...
</symbol>
Now we've defined all of our icons, we can pull them out and use them on the page wherever we need them.
<svg class="icon icon--facebook">
<use xlink:href="#facebook" href="#facebook"></use>
</svg>
In order to use the sprite as an external file, we need to update the use element to reference the file and then the ID.
<svg>
<use
xlink:href="images/sprite.svg#facebook"
href="images/sprite.svg#facebook">
</use>
</svg>
We can repeat the previous step in order to output all of our icons. If we wrap an <a> tag around the icon and add classes to both the <a> and <svg> we can style our icons with CSS.
<a href="#" class="icon-container icon-container--twitter">
<svg class="icon icon--twitter">
<use xlink:href="#twitter" href="#twitter"></use>
</svg>
</a>
Now we have our icons and they have individual class names, we can apply different fill colours to each of our icons.
.icon--facebook { fill: #3b5998; }
.icon--twitter { fill: #1da1f2; }
.icon--linkedin { fill: #0077b5; }
This article was originally published in issue 267 of Web Designer magazine. Subscribe to Web Designer here.
Related articles:
