SVG的使用分2種，一種是靜態(tài)SVG矢量圖，就是本文的主角，本章節(jié)主要談?wù)摰臇|西，另一種是SVG矢量動畫，是SVG的高級應(yīng)用，是給靜態(tài)SVG加上objectAnimator動畫，應(yīng)用的很廣泛，是實現(xiàn)androidicon動態(tài)交互的核心做法 上面的SVG圖大家都看到了，我。

最后，一個SVG文件的內(nèi)容是可以被復(fù)制，它也可以像其他WEB里的元素一樣被美化，SVG里有一部分可以被獨立出來，并且可以更改圖片的顏色，重置描邊大小，設(shè)置透明度，我們還可以給它用上某種效果例如模糊，甚至動畫效果這一切通過CSS和JS就可以。

通過在 @keyframes 中逐幀更改 offsetdistance ，可以實現(xiàn)動畫效果我們修改path的 d 屬性為 M10 80 C 40 10， 65 10， 95 80 S 150 150， 180 80 ， 相應(yīng)的也修改小方塊的 offsetpath 屬性就可以實現(xiàn)小方塊。

逐幀動畫即是利用一張等間距的動畫分解逐幀圖片，一般是由 js腳本模擬編寫 逐幀動畫和GIF動畫的差別在于， 腳本可以控制逐幀動畫的快慢和動作的暫停，而GIF動畫無法在后期通過代碼進(jìn)行動畫速率及透明度的修改 做一個逐幀。

通過標(biāo)簽 這可能是最簡單的使用SVG的方法，而且是開發(fā)者最熟悉的方法SVG文件能夠像位圖一樣通過標(biāo)簽在網(wǎng)頁上使用缺點是SVG圖像可能包含動畫，但鏈接里面的文件和任何腳本和交互的SVG代碼部分將被忽略通過CSS 可以通過CS。