Following on from our recent blog post about SVG Sprites which gave an introduction and overview to using SVGs in a sprite, this post will outline the processes and tools we use for creating and using an SVG Sprite at Liquid Light.

Creating and maintaining large SVG sprites can be cumbersome and time consuming, so we decided to automate the process. Rather than managing a single large SVG sprite and tracking the coordinates of each icon individually, we wanted to be able to edit each icon and have the creation and co-ordinate generation automated.

In practice this means that we are able to put all our SVG icons into a folder and the SVG sprite is created and optimised automatically along with a Sass map or names and co-ordinates. By using Sass mixins we are then able to include our sprites by using a very simple bit of code:

button {
    &:before {
        @include sprite(search);
        content: '';
    }
}

**All the code can be found in a repo over on **Github

Automating the process

To integrate SVG sprites into our workflow, we decided we wanted a task runner to create the sprite - this meant that we could individually create and update the individual icons without editing and updating the whole image. Gulp is the task runner of choice, running (amongst other things) gulp-svg-sprites. We also wanted the CSS to be created automatically - with the dimensions and background positions calculated upon creating. This gives the advantage of being able to alter an icons dimensions and the CSS updates to reflect this.

By default, the gulp-svg-sprites plugin generates its own CSS, but typo3 has its own classes so we needed a way to create the dimensions and positions as variables, and allow us to use them on existing selectors. For this, we decided to turn to Sass.

Using Sass, the icons are stored in an array - or “map” (find out more about Sass maps). Using some custom mixins, we are able to call on any icon in the sprite and, upon compilation, output the dimensions and background position of each icon.

This blog post is not an introduction to Gulp or Sass (there are plenty of awesome ones around the web for that e.g. ones by Mark Goodyear, Sitepoint and Codefellows ) but rather a post detailing the specific workflow we have for creating and using SVG Sprites. It will run you through the gulp plugins, the gulp tasks we have set up and the specific mixins we use.

The Gulp Plugins - Installation

To run the gulp tasks we first need to install some packages from npm. Run the command below to install the required packages (and gulp itself) and saves them to your package.json.

$ npm install gulp gulp-size gulp-svg-sprite gulp-util --save-dev

Note: If you don’t already have a package.json run npm init to create one.

A quick run down of why each of the plugins are there

• gulp-size - This outputs the size of various files for the user
• gulp-svg-sprite - this is the heavy lifter, creating the SVG sprite and CSS
• gulp-util - Used for outputting coloured messages to the screen

Once installed, ensure you inlcude them at the top of the gulpfile.js.

var gulp = require('gulp');
var $ = {
	gutil: require('gulp-util'),
	svgSprite: require('gulp-svg-sprite'),
	size: require('gulp-size'),
}

We declare them in a $ object to group them.

The Gulp Task - gulpfile.js

At the top of the gulpfile, we delcare a basePaths and paths object. This enables us to group and use paths as variables - making it easier to update and transport to other projects.

We have several gulp tasks to make the sprite and accompanying files (see below). The first task spritewatches a specified folder; any SVG files added or edited trigger the task and the sprite (with accompanying scss file) is created.

Individual SVG files are passed through a SVG optimiser before being combined into a sprite to ensure the sprite file is as small as possible.

We store all our paths and plugins in objects at the beginning of the file, but they can simply be replaced in the appropriate places below (a full file download can be found in the Github repo).

Warning: Mac safari produced different results (when using ems for background position) than any other browser when the sprite was created in a vertical or horizontal way. Diagonal is the only layout where all browsers behaved the same

Warning: Make sure your sprite does not exceed dimensions of 2300px x 2300px - otherwise <= iOS7 won’t display the image at all.

gulp.task('sprite', function () {
	return gulp.src(paths.sprite.src)
		.pipe($.svgSprite({
			shape: {
				spacing: {
					padding: 5
				}
			},
			mode: {
				css: {
					dest: "./",
					layout: "diagonal",
					sprite: paths.sprite.svg,
					bust: false,
					render: {
						scss: {
							dest: "css/src/_sprite.scss",
							template: "build/tpl/sprite-template.scss"
						}
					}
				}
			},
			variables: {
				mapname: "icons"
			}
		}))
		.pipe(gulp.dest(basePaths.dest));
});

#sass