The complete guide to SVG

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 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's a couple 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 or 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

01. Create the framework

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="">

02. Create our symbol

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">
 <path d="..."/>

03. Repeat

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 id="linkedin" viewBox="0 0 24 24">

04. Use the icon

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>

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.


05. Class names

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>

06. The CSS

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, the creative web design magazine – offering expert tutorials, cutting-edge trends and free resources. Subscribe to Web Designer here.

Related articles: