如何在vue项目中引入svg图标

概述


svg,即Scalable Vector Graphics,可缩放矢量图形。

相对于jpg,png图标,svg可以在任意分辨率下保证不会模糊,即便是网页缩放了。

如何在vue项目中引入svg图标_第1张图片
上图是知乎的截图,可以看到铃铛图标是svg的,消息数量是CSS写的,二者缩放到任意体积都可以保持一个同等的清晰度。

而且现在很多ui标注的软件都已经支持直接生成svg,比如sketch,那为何不尝试一下呢。

配置


svg是一种用xml描述的语言,也就是说,html中引入svg,是以嵌入xml的方式进行的。(也有其他的多种方式,比如img直接引入)

如何在vue项目中引入svg图标_第2张图片

 

如上,比如circle标签表示圆,和html是很相似的,只是其用于描述各种图形。

你可能感兴趣的:(前端,vue.js,javascript,elementui)