Beginning from using img pictures to later use css sprite to reduce server requests, to the font of popular graphics icon Iconfont. Now, a new way to start using the icons pop up --SVG symbols icon.
working principle
The working principle of SVG symbols: symbol element defines a template graphic objects, which can be used to instantiate a use element.
the role of the graphic symbol for the element is used multiple times in the same document, symbol element itself is not presented. Only examples of symbol elements (ie, a reference to the use of elemental symbol) to render:
<svg>
<symbol viewBox="0 0 24 24" id="heart">
<path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z">
</path>
</symbol>
<symbol viewBox="0 0 32 32" id="arrow">
<path fill="#0f0f0f" d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M22.8,13.6l-6,8C16.6,21.9,16.3,22,16,22 s-0.6-0.1-0.8-0.4l-6-8c-0.2-0.3-0.3-0.7-0.1-1S9.6,12,10,12h12c0.4,0,0.7,0.2,0.9,0.6S23,13.3,22.8,13.6z">
</path>
</symbol>
</svg>This code defines two SVG symbols using icons, each icon element defines a symbol, icon id are heart and arrow arrow, which is placed in the body element html file.
The following code is referenced by the heart icon id:
<svg>
<use xlink:href="#heart"/>
</svg>xlink: href attribute value is the '#' symbol name plus id, then just change the value of this property can refer to a different icon.
Automated processing
For more information, please see the original: the establishment icon in the system a complete guide to using SVG symbols