Automating SVG Sprites with Gulp

If you have been looking for a gulp task that creates SVG sprites, and you want to know how to use them, you are on the right track. Before we show you how you can make an SVG sprite by means of a gulp task, we need to ask ourselves why we should even start using SVG sprites in the first place. Can’t we just keep using PNGs or icon fonts?

Before using SVG sprites, consider the browsers you want to support though. If you are still targeting IE8, Safari 5, iOS 4.3, Android 2.3 or any of the earlier versions, you better keep using other compatible Icon systems. But if you are more of a “only the last two to four major versions”-type of developer (Aye!), then start digging into this blog.

SVG sprites are (not font) awesome

These days, mobile devices have become all too important. Couple that with the fact that network performance on a mobile device is limited by latency, not bandwidth, and you understand why we need to reduce the amount of requests as much as we can.

One of the strengths of an SVG sprite is just that: The fact that it reduces the number of requests your application makes. So if your application contains 50 icons, you can bundle them all into one sprite (and thus, into one request).

The two most important benefits in the use of SVG sprites are that they:

• come in a vector format, which means that the images look crisp on any screen;

• are easy to maintain (compared to icon fonts, for example, SVG sprites are easier to update, style and transform).

But how to make an SVG sprite? The easiest way is to create a Gulp or Grunt task to automate the creation of your SVG sprite.

How we used Gulp to automate SVG sprites

In our case, we made a gulp task to automate the creation of our SVG sprite. The most important npm package in the gulp task is gulp-svg-sprite, which is a “Gulp plugin wrapping around svg-sprite which takes a bunch of SVG files, optimizes them and bakes them into SVG sprites”.

In essence, the gulp task that we made minifies the SVG files in the source directory (config.src), combines them into one sprite (with the option to also generate an example page), and outputs it to the destination folder (svgDest in our case). Take a look at our Gulp task file:

var gulp = require('gulp');
var svgSprite = require('gulp-svg-sprite');
var config = require('../config').svg;
var path = require('path');
var glob = require('glob');
var size = require('gulp-size');

gulp.task('svg', function () {
 var svgDest = config.dest;

 function makeSvgSpriteOptions(dirPath) {
   return {
     mode: {
       symbol: {
         dest: '.',
         example: true,
         sprite: 'main.svg'
       },
     }
   };
 }

 return glob(config.src, function (err, dirs) {
   dirs.forEach(function (dir) {
     gulp.src(path.join(dir, '*.svg'))
       .pipe(svgSprite(makeSvgSpriteOptions(dir)))
       .pipe(size({showFiles: true, title: svgDest}))
       .pipe(gulp.dest(svgDest))
   })
 }); 
 
});

Our Gulp task: Quick breakdown

function makeSvgSpriteOptions(dirPath) {
   return {
     mode: {
       symbol: {
         dest: '.',
         example: true,
         sprite: 'main.svg'
       },
     }
   };
 }

In the first part, you pass along the general configuration options. You can check the documentation and decide which options to use. That being said, our option example: true also generates an HTML page that showcases how to use the sprite. As you can see in the illustration below, the page identifies each icon with an ID:

In the second part, you’re going to bundle your SVGs:

return glob(config.src, function (err, dirs) {
   dirs.forEach(function (dir) {
     gulp.src(path.join(dir, '*.svg'))
       .pipe(svgSprite(makeSvgSpriteOptions(dir)))
       .pipe(size({showFiles: true, title: svgDest}))
       .pipe(gulp.dest(svgDest))
   })
 });

Here, you’ll first need to define your config.src and your svgDest.Then the task will loop over all your SVGs, apply your predefined options and finally output them into your destination folder. And that’s basically it. Your folder structure should then look something like this:

svg-src
    - icon-calender.svg
    - icon-check.svg
    - icon-check-rounded.svg

output ?  svg
    - main.svg
    - sprites.symbol.html

Using your SVG sprite

Using your SVG sprite is a piece of code (read: a piece of cake). The only thing you’ll need to do is to include this inline code:

<svg>
  <use xlink:href="main.svg#icon-check"></use>
</svg>

Conclusion

The use of SVG sprites is a more efficient way to maintain a large number of icons. In many ways, using SVG sprites is better than using an icon font. They’re more manageable than icon fonts, they’re straight up vectors, and they’re cacheable and responsive without losing their sharpness. The only real downside of an SVG sprite is browser support, as mentioned earlier. If you have to cover deeper browser support, you should still use icon fonts, but if there’s no need, SVG sprites are the way to go.