Icons With SVG Sprites

Overview

The goal is to create a single .svg file containing all the icons that will be used on a website.

Creating the icons

Artboard titles are used for the exported svg filenames and for the object ids in the final svg file.

Save all the icons in a single Illustrator document.

Each icon is in its own layer, and each icon is placed on its own artboard.

Ultimately the illustrator file name becomes a prefix for the icon object ids in the production svg file. So it's a good idea to keep the filename short, and to avoid spaces in the file name.

The artboard names are used in the exported SVG file names, which are in turn used as the object ids of the icons within the final production SVG. It's a good idea to avoid spaces in the artboard titles, and to keep them as short as possible.

Exporting the SVG

SVG export options in Illustrator

• File > Export...
  • Select a location that is inside the web project, but separated from the production files, e.g. /images/icons/src/.
  • Format: SVG (svg)
  • Use Artboards: checked
  • With the Use Artboards option checked, separate .svg files are created for each artboard in the Illustrator file.
  • The icon file names are the following format: [IllustratorFileName]_[ArtboardName].svg
  • Using gulp-svgstore to combine the SVG files, these file names are used as the object ids within the final SVG file. So spaces in artboard names are not a good idea.
• SVG Options dialog
  • Styling: Internal CSS
  • Font: SVG
  • Images: Preserve (presumably there are no embedded images)
  • Object IDs:' Layer Names
    (This setting is important. These are the object ids that will be used to reference the individual icons in HTML.)
  • Decimal: 4
  • Minify: checked
  • Responsive: checked

Combining SVG files

Using gulp

Use the gulp-svgstore package. Documentation on how to create a task can be found in the readme file.

Install with npm install gulp-svgstore gulp-svgmin --save-dev

var gulp = require('gulp');
var svgstore = require('gulp-svgstore');
var svgmin = require('gulp-svgmin');
var path = require('path');

gulp.task('svgstore', function () {
    return gulp
        .src('.images/icons/src/*.svg')
        .pipe(svgmin(function (file) {
            var prefix = path.basename(file.relative, path.extname(file.relative));
            return {
                plugins: [{
                    cleanupIDs: {
                        prefix: prefix + '-',
                        minify: true
                    }
                }]
            }
        }))
        .pipe(svgstore())
        .pipe(gulp.dest('./images/icons/'));
});

Run gulp svgstore to create the production SVG file with all the icons merged into it.

Inlining SVG into HTML

CSS:

.icon {
	display: inline-block;
	width: 50px;
	height: auto;
}
.icon-divider {
	width: 25px;
}
.icon-red {
	fill: red;
}
.icon-red:hover {
	fill: #ff6600;
}

HTML:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="icon icon-red">
	<use xlink:href="<?=LOCAL_WEB_ROOT?>images/icons/icons.svg#icons_cart"></use>
</svg>

• #icons_cart is the object id of the icon within the file to use.
• viewBox attribute
  • Arguments: origin-x origin-y width height
  • Basically, the SVG graphic is cropped to this box, then it is scaled to fit the dimensions specified for its container (the <svg> element.)
  • Negative values can be specified for origin-x and origin-y which would have the effect of adding padding to the left or top of the SVG graphic.
  • A value of 0 for width or height basically disables the display of the SVG graphic.
  • Negative values are not allowed for width or height.

Notes

External links

• SVG demo page, BFH Handwriting staging site
• Icon System with SVG Sprites, CSS-Tricks, March 2014
• How SVG Fragments Work, CSS-Tricks, Nov. 2014
• Understanding SVG Coordinate Systems and Transformations (Part 1), Sara Soueidan, July 2014