本文為菜鳥窩作者 吳威龍 的連載

菜鳥窩是專業(yè)的程序猿在線學(xué)習(xí)平臺，提供最系統(tǒng)的 Android 項目實戰(zhàn)課程

如需轉(zhuǎn)載，請聯(lián)系菜鳥窩公眾號（cniao5）,并注明出處。

[toc]

前言：

SVG 格式圖片很多優(yōu)點，但是 android 程序員關(guān)心的優(yōu)點無非是：SVG 較 GIF、JPEG 的優(yōu)勢。
首先簡要解釋一下矢量圖像格式和位圖圖像格式的區(qū)別。矢量圖像用點和線來描述物體，所以文件會比較小，同時也能提供高清晰的畫面，適合于直接打印或輸出。而位圖圖像的存儲單位是圖像上每一點的像素值，因此一般的圖像文件都很大，會占用大量的網(wǎng)絡(luò)帶寬。SVG 是一種矢量圖形格式，GIF、JPEG 是位圖圖像格式。有了兩者的概念后，SVG 較 GIF、JPEG 的優(yōu)勢顯而易見。

• 任意放縮：
  用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細節(jié)等。
• 文本獨立：
  SVG 圖像中的文字獨立于圖像，文字保留可編輯和可搜尋的狀態(tài)。也不會再有字體的限制，用戶系統(tǒng)即使沒有安裝某一字體，也會看到和他們制作時完全相同的畫面。
• 較小文件：
  總體來講，SVG 文件比那些 GIF 和 JPEG 格式的文件要小很多，因而下載也很快。
• 超強顯示效果：
  SVG 圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕分辨力和打印分辨力。
• 超級顏色控制：
  SVG 圖像提供一個 1 600 萬種顏色的調(diào)色板，支持 ICC 顏色描述文件標(biāo)準(zhǔn)、RGB、線性填充、漸變和蒙版。

如何使用

這里推薦一個圖標(biāo)網(wǎng)站：阿里巴巴矢量圖標(biāo)庫
搜索找到需要的圖片，選擇 svg 下載

這里寫圖片描述

下載好的文件是這樣的：

這里寫圖片描述

把這個文件導(dǎo)入 AS 中,即可使用

這里寫圖片描述

這里寫圖片描述

注意導(dǎo)入后的 SVG 文件，和導(dǎo)入前是不一樣的。

這里寫圖片描述

這樣就可以和之前引用 jpg、png 圖片那樣使用 svg 矢量圖了。

下面介紹一種炫酷的繪制動畫效果。

SVG 繪制動畫

demo 演示：

這里寫圖片描述

這里寫圖片描述

使用的第三方庫

 //svg函數(shù)庫
    compile 'com.jrummyapps:animated-svg-view:1.0.1'
    compile 'com.android.support:animated-vector-drawable:${latest_version}'

具體實現(xiàn)過程請看源碼：

SVGDemo

《Android群英傳》作者帶你解鎖設(shè)計布局的新姿勢 http://mp.weixin.qq.com/s/k7gCBJpiXK0g8Ed2FVHQ3A