Ways to generate SVG sprites using the svg-sprite library as an example

Recently, I solved the task of organizing all the SVG files used in the project as a single sprite. Before that, I had to use a samopisny solution for this task. This time I decided to use the popular svg-sprite library , however I was very surprised at how many different ways of creation it offers. I did not find any single article where all the methods were dismantled, all the information was scattered around blogs and individual publications. Therefore, I decided to put together methods available in the library for generating sprites in one place, at the same time analyzing their advantages and disadvantages. So let's go.

CSS mode

This mode is very similar to the usual way of generating sprites from images. All files are glued into one, the resulting file is put as a block background, and the desired icon is selected by offsetting this background.

The usage example will look like this.

<i class="svg-ei-archive">ei-archive</i> 

and corresponding CSS code

 .svg-ei-archive { background: url("svg/sprite.css.svg") 12.5% 0 no-repeat; width: 50px; height: 50px; } 

A nice feature of svg-sprite is the ability to specify in what form you want to get styles - in the form of pure CSS or under preprocessors LESS, SASS, Stylus. After playing a little with the output templates, you can customize the output of icons in the form of mixins and generate code only when you really need it.

Advantages : the method is simple and clear to everyone who has worked with sprites before.

Disadvantages : it is impossible to specify arbitrary sizes, control the color of the icon. It will not work in the img tag

Defs mode

This mode uses the defs tag, inside which elements are declared for further use. Each element is assigned an id, by which this element will be called in the use tag.

Usage example

 <svg viewBox="0 0 50 50" width="50" height="50"> <use xlink:href="#ei-archive"></use> </svg> 

In order to be able to render an element from the example, an SVG with defs must also be included in the document body. The standard is allowed to use external files in xlink:href , however this is not supported by all versions of Internet Explorer. Fortunately, there is a svg4everybody polyfill that solves this problem.

Advantages : The method is good because it gives you control over the embedded icon through CSS or attributes. You can easily change its size or color.

Disadvantages : Most likely you will need some mechanism (macro, helper, function) that will generate the icon insertion code. When generating, you have to specify the viewBox attribute and dimensions. According to the specification, elements inside defs should not be displayed, so it will not be possible to visually assess how the sprites look after optimization. However, svg-sprite helps with this and can create a file with samples of all the icons.

Currently, there is no point in using this method, its improved version is Symbol mode.

Symbol mode

The principle of operation of this mode is similar to the previous one, but the symbol tag is used to set elements. This element, according to the specification, may contain the viewBox attribute, so there is no need to specify it when using the specified symbol. Also, elements created using symbol are rendered during rendering, which simplifies the visual control of the created sprites. The rest of the application of this method does not differ from the mode defs.

Usage example

 <svg width="50" height="50"> <use xlink:href="#ei-archive"></use> </svg> 

Advantages : Similar to the previous mode (easy change of color and size).

Disadvantages : You will also need an auxiliary mechanism for inserting icons. However, this mode is deprived of other deficiencies of the defs method.

View mode

The basis of this method is the ability to create named viewing areas for your document in the document itself. This is done using the view tag. The sprite created in this way can be used in two ways.

Like a normal background image from the first mode.

 <i class="svg-ei-archive">ei-archive</i> 

and as a separate image embedded using fragment identifiers

 <img src="sprites.svg#ei-archive" width="50" height="50> 

In my opinion it is very convenient. The same icon can be both a picture and a background, depending on the situation. Currently, support for fragment identifiers is completely absent in iOS 9.x, despite the fact that partial support was in the previous version.

Benefits : You can use the icon for both the background and the image. Easy resize if used as image.

Disadvantages : Problems with support in iOS at the moment. Cannot be set as a background on a block of arbitrary size. There is no possibility of changing colors through CSS.

Stack mode

This method also uses named viewing areas, but places them one below the other, like layers in Photoshop. Each region is hidden by default and becomes visible when referenced to it via fragment idetifier

 :root>svg {display:none} :root>svg:target {display:block} 

Accordingly, two methods of use are also available to us.

Like background image

 .svg-ei-archive { background: url(sprites.svg#el-archive) no-repeat 50% 50%; } 

and like a normal image

 <img src="sprites.svg#ei-archive" width="50" height="50> 

The situation with browser support is slightly worse here than in the previous method. In addition to the lack of support in iOS 9, fragment identifiers do not work for background images in Chrome by version 48 inclusive. However, in the future, when the situation with support improves, this method can become very popular because it allows you to use the same icon for both the background and the image without limitations.

Advantages : Similar to the previous method, but there are no restrictions for resizing depending on the method of use.

Disadvantages : Problems with browser support at the moment. There is no possibility of changing colors through CSS. Due to the peculiarities of the method, all the icons are hidden by default, so it’s difficult to visually evaluate the finished sprite.

Bonus mode inline-css

This method is not a standard method for the svg-sprite library, but can be created on its basis. Its meaning is to embed the icon itself in the file style via the data-url. The svg-sprite library provides ample opportunities for customizing output templates and gives access to the source code of the icon itself. Therefore, it is possible to create your own template that will generate the following code.

 .el-archive { background: url("data:image/svg+xml;[icon-data]"); } 

However, in practice, it was not possible to solve this problem with a hitch and the issue requires more detailed consideration.

As a conclusion

The presented methods are not the only ones for creating SVG-sprites. I came across other, more exotic options. What is the best way to decide what you need based on what set of icons you have and what opportunities for customization you need. In my opinion, quite css and symbol modes can be considered as production-ready.