SVG的使用分2种，一种是静态SVG矢量图，就是本文的主角，本章节主要谈论的东西，另一种是SVG矢量动画，是SVG的高级应用，是给静态SVG加上objectAnimator动画，应用的很广泛，是实现androidicon动态交互的核心做法 上面的SVG图大家都看到了，我。

最后，一个SVG文件的内容是可以被复制，它也可以像其他WEB里的元素一样被美化，SVG里有一部分可以被独立出来，并且可以更改图片的颜色，重置描边大小，设置透明度，我们还可以给它用上某种效果例如模糊，甚至动画效果这一切通过CSS和JS就可以。

通过在 @keyframes 中逐帧更改 offsetdistance ，可以实现动画效果我们修改path的 d 属性为 M10 80 C 40 10， 65 10， 95 80 S 150 150， 180 80 ， 相应的也修改小方块的 offsetpath 属性就可以实现小方块。

逐帧动画即是利用一张等间距的动画分解逐帧图片，一般是由 js脚本模拟编写 逐帧动画和GIF动画的差别在于， 脚本可以控制逐帧动画的快慢和动作的暂停，而GIF动画无法在后期通过代码进行动画速率及透明度的修改 做一个逐帧。

通过标签 这可能是最简单的使用SVG的方法，而且是开发者最熟悉的方法SVG文件能够像位图一样通过标签在网页上使用缺点是SVG图像可能包含动画，但链接里面的文件和任何脚本和交互的SVG代码部分将被忽略通过CSS 可以通过CS。