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

概述

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

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

上图是知乎的截图，可以看到铃铛图标是svg的，消息数量是CSS写的，二者缩放到任意体积都可以保持一个同等的清晰度。

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

配置

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

 

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