The front end of the world is changing so fast, sudden, SVG has much to replace as a web page display Icon Font potential implementation of an icon, compared Icon Font, it has the following advantages:
-
Zoom lossless restorer, clear display
-
Semantic good
-
CSS can be used to control the icon style and animations
-
Reduce http requests
If you want to look at the specific svg icon font and specific contrast contrast, you can refer to the CSS Trick's "Inline SVG vs Icon Font" article.
SVG icons using the following method:
1. img, object, embed tag direct reference SVG
The main disadvantage of this method is that each icon is to be saved as a single SVG file, requesting used alone, increased the number of HTTP requests.
<img src="http://www.w3school.com.cn/svg/rect1.svg" width="300" />
2.Inline SVG, SVG directly written in HTML
Inline SVG As part of the HTML document, no need to request separately. Temporary need to modify the shape of an icon is also more convenient. However, the use of more complicated Inline SVG, SVG need to insert a chunk of code that does not fit on the page handwritten icon reuse them too much trouble.
<body>
<svg width="100%" height="100%">
<rect x="20" y="20" width="250" height="250" style="fill:#fecdddd;"/>
</svg>
</body>
3. SVG Defs/Symbols
Some websites (such as providing production Icon Font features icomoon ) has provided an output SVG Sprites. And FIG sprite bitmap as a conventional, all icons lined up at certain intervals after the whole composition of a large image, can effectively reduce the number of web request.
More convenient, we can use a similar reference in their use of the icon.
<svg class="icon">
<use xlink:href="/img/posts/svg-icons.svg#circle-check"></use>
</svg>
<svg class="icon">
<use xlink:href="/img/posts/svg-icons.svg#circle-cross"></use>
</svg>
This is the way I recommend, in addition to its own production, some projects also provide SVG Sprites download, as Tabler-iconsThe .
Reference article: