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... > Export As...
  • (It's possible that Export for Screens would be useful also. It hasn't been tested.
  • 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 default is to export all the artboards in the Illustrator file. Enter the index of individual artboards in the Range field to selectively export icons.
  • 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.

Using SVG as background images

The fill color of inline SVG images can be specified inline. This is not true of SVG images passed to the CSS url() function. Only paths to SVG files or SVG code itself can be passed to url().

The fill color of SVG is specified with the fill attribute of the svg or path tags, for example:

<svg viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" rx="10" ry="10" width="220" height="220" fill="#ff6600" />
</svg>

In order to use the SVG code above as the background image of an element:

.my-svg-bg-image-class {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%20240%20240%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20x%3D%2210%22%20y%3D%2210%22%20rx%3D%2210%22%20ry%3D%2210%22%20width%3D%22220%22%20height%3D%22220%22%20fill%3D%22%23ff6600%22%20%2F%3E%0A%3C%2Fsvg%3E%0A');
}

So the URL is made up of two parts. First, data:image/svg+xml;utf8, followed by the SVG XML.

The SVG code must be URL encoded with a tool like urlencoder.org, for example. So everything inside and including the <svg> tag to the closing </svg> tag.

The SVG code for an existing SVG image can be obtained by dropping the SVG in a browser and then navigating to "view source".

The position, size, and repeating properties of the background image are controlled with the CSS properties background-position, background-size, and background-repeat.

See the CodePen "SVG background image in CSS" for a working example.

Scaling SVG images

Use the viewBox attribute of the <svg> element to scale SVG icons.<ref>How To Scale SVG - CSS Tricks<ref>

Applying a hover effect

Goal

Change the color of an SVG image when the mouse hovers over it.

If the hover action is applied directly to the image itself, the hover effect won't apply if the mouse is over any interior part of the image that is not filled in.

Solution

Set the hover action to the <svg> tag containing the image.

HTML

<svg>
    <path d="M8.17,24.2852H93.8837a7.1429,7.1429,0,0,0,0-14.2857H8.17A7.1429,7.1429,0,0,0,8.17,24.2852ZM93.8837,38.5714H8.17a7.1429,7.1429"></path>
</svg>

CSS

svg:hover path {
    fill: blue;
}

Notes

See also

• SVG Properties and CSS - CSS-Tricks
• 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
• SVGViewer