从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont。现在,一种全新的图标使用方式开始流行了起来——SVG symbols图标。
工作原理
SVG symbols的工作原理:symbol元素用来定义一个图形模板对象,它可以用一个use元素实例化。
symbol元素对图形的作用是在同一文档中多次使用,symbol元素本身是不呈现的。只有symbol元素的实例(亦即,一个引用了symbol的use元素)才能呈现:
这段代码使用SVG symbols定义了两个图标,每个symbol元素定义一个图标,图标id分别是heart和arrow,将其放在html文件的body元素内。
通过以下代码引用id为heart的图标:
xlink:href属性值就是‘#’加symbol的id名称,那么只需改变这个属性值就可以引用不同的图标。
自动化处理
更多内容请查看原文:使用SVG symbols建立图标系统完整指南