自扁平化设计风格开始，小图标在我们网页设计中是一个很重要的元素。在项目输出中，我们一般会以切透明png格式图片，或是用字体图标来实现小图标。现在很多网站会使用html5中 SVG元素结合路径动画效果，来实现很好的小图标动画效果，例如：北京大学和华西医院，看下图：

由于上图是gif截图软件 截图的，所以失真了，大家可以打开他们网站看看。

查看小图标对应的代码，你会发现每个小图标都是一段以SVG开始 的一段代码。那么什么是SVG呢？

或许你会发现，在下载矢量图标的时候，图片的格式就是SVG的。是的，SVG就是可以绘制矢量图形的语言。官方的介绍SVG 是使用 XML 来描述二维图形和绘图程序的语言。

如何快速获取图标的SVG代码呢？

自己去写，不太现实，确实有点复杂，我们可以通过一些方法来获取SVG代码

1、 如果图标是从阿里巴巴矢量图库下载的，可以直接拷贝SVG代码

2、 如果自己设计的图标，最好用可绘制矢量图形的软件如AI软件制作，保存成SVG格式的矢量图标，然后用sublime打开就能获取到SVG代码。

3、 SVG 编辑器来创建复杂的图形

SVG代码已经获取到了，那么下面就是要看看如何实现路径动画效果了。

以北京大学网站最下方图标为例，要实现这样的效果，需要一个js插件-vivus.js

这个插件的demo地址：  可以点击这个页面的View on GitHub 进行下载

由于上面的地址是全英文，为了方便大家，我在jQuery之家也找到这个插件的介绍

介绍：Vivus是一款可以执行SVG路径动画的轻量级Javascript库。Vivus可以绘制SVG图形的外观。通过该svg路径动画插件，你可以使用同步或异步的方式来执行SVG图像路径的动画。

要制作这种SVG线条绘制效果，需要使用CSS 的strokeDashoffset 属性。而stroke-dashoffset属性要和stroke-dasharray

联合使用才能，看出效果，所以要想弄清楚这个动画的原理，就需要清楚这两个属性的含义。下面我简单介绍一下，有不清楚的地方，可以在网上查看了解。

stroke-dasharray：用于创建虚心，值可以是一个数，也可以是一个数组，没数量上限，每个数字交替表示划线与间隔的宽度；

stroke-dashoffset：则是虚线的偏移量，正数往左偏移，负数往右偏移。

仔细观察北京大学网站上的小图标，就能发现，图标的动画过程，就是stroke-dashoffset值的变动过程，当值为0时图标全部显示，随着数字变大后又变小到0的过程，就是图标从全显示到部分不显示又到全部显示的过程，也就是整个路径动画的效果。

Vivus.js这个插件的使用，上述地址写的都很详细，这里就不在赘述。可以通过这个js来丰富一下我们的图标动画，让页面有一个不同的视觉体验。