How to generate SVG-sprites-for example, svg-sprite

Recently I decided the goal is to organize all the SVG files used in the project, in the form of a sprite. I had to use samopisnye solution for this problem. This time I decided to use popular library svg-sprite, but was surprised how many different ways to create it offers. Any one single article which was pulled all the ways I have found, all information has been scattered across blogs and individual posts. So I decided to make available in the library ways to generate sprites in one place, simultaneously analyzing their advantages and disadvantages. So there you go.

the

CSS Mode

This mode is very similar to the common method of generating sprites from images. All files are merged into one, the resulting file is placed as a background block, and the desired icon is selected by displacement of this background.

Example usage would look like this

the

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

and the corresponding CSS code

the

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

Nice feature svg-sprite is the ability to specify how you want to style in pure CSS or preprocessors LESS, SASS, Stylus. A little play around with the template output, you can display icons in the form of mixins and generate code only when it is really needed.

Advantages: the method is simple and clear to anyone who has previously worked with sprites.

Disadvantages: you cannot specify an arbitrary size, to control the color of the icons. You cannot use the img

the

defs

This mode uses the defs, within which you declare the elements for future use. Each element is assigned an id by which this element will be invoked in the use.

usage Example

the

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

to a use in the example could render the element with the SVG defs must also be included in the body of the document. The standard allows to use external files in the xlink:href, but this is not supported by all versions of Internet Explorer. Fortunately, there was polifil svg4everybody, which solves this problem.

Advantages: the Method is good because it provides you control over embedded icon using CSS or attributes. You can easily change its size or color.

Disadvantages: most Likely will need some mechanism (macro to helper function) that will generate code of the insertion icons. At generation it is necessary to specify the attribute viewBox and sizes. According to the specification elements inside defs should not be displayed, so it will be impossible to visually assess the look of the sprites after optimization. However, svg-sprite helps in this and can create a file with samples of all icons.

currently, to use this method makes no sense, its improved version is the Mode symbol.

the

symbol

the Principle of operation of this mode is similar to the previous one, but to specify the elements by using the symbol. This element, according to the specification, may contain the attribute viewBox, so there is no need to specify it when using the specified symbol. Elements created using symbol appear when rendering, which simplifies visual inspection of the generated sprites. Otherwise, this method does not differ from the Regime defs.

usage Example

the

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

Disadvantages: You will also need a support mechanism to insert icons. However, other disadvantages of the method defs, this mode is deprived.

the

view Mode

the basis of this method is the ability to create named viewports for your document in the document itself. This is done using the view. Created so the sprite can be used in two ways.

As a normal background image of the first mode

the

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

and as a separate image embedded with fragment identifiers (fragment identifiers).

the

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

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

Advantages: you Can use the icon for the background and image. Easily change the size if used as an image.

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

the

stack

This method also uses named the viewport, however, has their one under another, like layers in Photoshop. Each area is hidden by default and becomes visible when you link to it through fragment idetifier

the

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

Accordingly, we are also available two way use.

As a background image

the

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

as usual.

the

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

the situation with the support of browsers here a little worse than in the previous method. In addition to the lack of support in iOS 9, fragment identifiers don't work for background images in Chrome, for 48 version inclusive. However, in the future, when the situation with the support improves, this method can become very popular because it allows you to use the same icon for the background and image with no restrictions.

Advantages: Similar to the previous method, but there is no limit to the size changes depending on the usage.

Disadvantages: Problems with support for browsers at the moment. There is no possibility to change colours via CSS. Due to the peculiarities of the method all icons are hidden by default, so a visual estimate of the finished sprite is difficult.

the

the Bonus mode is inline css

This method is not a standard way to svg-sprite, but can be created on its basis. Its meaning is to embed the icons in the file styles through data-url. Library svg-sprite provides wide opportunities for customization of the templates of the output and gives access to the source code of the icon itself. Therefore, it is possible to create a template that will generate the following code.

the

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

However, in practice, to solve this problem with a swoop failed and the issue requires more detailed consideration.

the

In conclusion

Presents are not the only ways to create SVG sprites. I came across other, more exotic options. What better way to have dealt with you on the basis of which set of icons available and what options for customization do you need. In my opinion it is a production-ready can be considered a symbol and css modes.

Article based on information from habrahabr.ru