Using SVG symbols to build a complete guide to icon system

Time:2020-3-24

From the initial use of img pictures to the later use of CSS sprite to reduce server requests, to the popular graphic Font Icon iconcont. Now, a new way of using icons has become popular – SVG symbols.

Working principle

How SVG symbols work: the symbol element is used to define a graphic template object, which can be instantiated with a use element.

The function of symbol element to graphics is to use it multiple times in the same document. Symbol element itself is not rendered. Only instances of the symbol element (that is, a use element that references the symbol) can be rendered:

<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 uses SVG symbols to define two icons. Each symbol element defines an icon. The icon ID is heart and arrow, which are placed in the body element of the HTML file.

The icon with ID heart is referenced by the following code:

<svg>
    <use xlink:href="#heart"/>
</svg>

Xlink: the value of the href attribute is the ID name of ‘#’ plus symbol, so you can reference different icons by changing the value of this attribute.

Automated processing

For more information, please refer to the original text: Complete Guide to establishing icon system with SVG symbols

Recommended Today

The first Python Programming challenge on the Internet (end)

Date of establishment: March 28, 2020Update Date: April 22, 2020 (end)Personal collection Tool.pywebsite:http://www.pythonchallenge.com/Note: please quote or change this article at will, just mark the source and the author. The author does not guarantee that the content is absolutely correct. Please be responsible for any consequences Title: the first Python Programming challenge on the web Find […]