SVG Sprites

SVGs are great. They can be used inline in a HTML document and also in CSS. It makes sense to use when for example you may have a logo or perhaps some kind of illustration like below.

But SVGs are also used for decoration as well, meaning that you might want to have background SVG applied using CSS. Think social media icons for example. But its a pain to create a sprites manually and if you’re doing that in 2017 and think to yourself, “gee I wish this was easier”! Well fear not, thats exactly what I’m going to show you now.

Lets begin.

Prerequisites

We need to have a few things installed:

• NodeJS and NPM
• GulpJS
• Knowledge of command line

Project setup

Next we need to setup the project so cd into the project folder and run npm init.

Then lets install the packages we need using npm npm i -D gulp gulp-svg-sprite which will install gulp and gulp-svg-sprite. Once installed we’re ready to get going.

Lets grab some SVGs that we can build a sprite out of, I’m going to grab some from flaticon.com and save those to the src directory.

Next we need to create gulpfile.js and add the configuration we need for the gulp-svg-sprite plugin so that we can generate a sprite. The example is taken from plugin repository but we need to make some minor tweaks to it. We need to wrap the code in a gulp.task and then return the gulp.src like so:

gulp.task("sprite", function() {
	return gulp
		.src("**/*.svg", { cwd: "src" })
		.pipe(svgSprite(config))
		.pipe(gulp.dest("dist"));
	});

We also need to change the input and output directories from what we copied and then add a default task to gulpfile to call the sprite task.

gulp.task("default", ["sprite"]);

So we should have the below now:

All we need to do now is run gulp which will run the default task which will inturn call the sprite task.

You should now have a dist folder and it should look like this:

What you’ll notice is that there’s a sprite.css file which references a sprite.css-xxxxxxx.svg file. The unique ID is for cache busting so that we always have a fresh version of the generated sprite. Opening the CSS you’ll notice the following:

1. The class names are the same as the svg file in the src folder.
2. There is a xxxxxxx-dims class name which has the width and height set. This comes from the src svg files as well.
3. All files reference the same sprite.

We can now include that css file in a HTML page and start using it so lets set that up now.

<link rel="stylesheet" href="dist/css/sprite.css">

We’ll use a div and give it two classes svg-001-faucet and svg-001-faucet-dims. This will apply the sprite, width and height. Refresh the front-end and voila! we have a svg sprite applied as a background.

Lets repeat the process for the other icons.

Bam! And we still have the same number of requests in the network.

Obviously the dimensions of the svg items in the sprite are pretty big but if you get source SVGs down to the correct size - matching your styleguide requirements then you should have a good long term solution.

The astute of you may have noticed some repetition in the sprite.css file. There are multiple references to the sprite. Wouldn’t it be great if it was only references once? Well you can do that too with a custom templating solution - but i’ll leave that for another time.

If you need to have a fallback for the legacy browsers then you can take the SVG and run it through conversion to a PNG. I’ve used SVG2PNG with great success.

Don’t forget to optimise your assets for production!

You can find the src for the project on github.

Thanks for reading!