Android圖片之svg

1.SVG是什麼
2.SVG優點
3.SVG使用
4.獲取SVG
5.封裝使用
6.SVG動畫

1.SVG是什麼？

SVG(Scalable Vector Graphics，可伸縮向量圖形 )是W3C推出的一種開放標準的文字式向量圖形描述語言，它是基於XML、專門為網路而設計的影象格式，SVG是一種採用XML來描述二維圖形語言，所以它可以直接開啟xml檔案來修改和編輯

2.向量圖的優點

• 1.向量圖使用點和線來描述圖形，所有檔案會比較小，同時也能提供高清晰的畫面。
• 2.向量圖縮放自由且不會是真，完全適配於任何解析度的螢幕。
• 3.向量圖是以xml語言來描述的，所以它修改自如。
• 4.向量圖色彩解析度非常高清，同時支援濾鏡。
• 5.跨平臺，因為向量圖是純文字格式來描述的，所以不受平臺的限制。

缺點：SVG 是在要用圖的時候再把圖畫出來，所以在圖片顯示的時候會花費更多的時間消耗更多的資源；此外，SVG 並不太適合層次過於複雜細節過於繁多的圖片。

3.使用SVG

Google在Android5.X中提供了兩個新API來支援SVG：

• 1.VectorDrawable
• 2.AnimatedVectorDrawable

3.1在Android Studio 使用SVG向量圖

在drawable資料夾上右鍵->new->Vector Asset

選擇自帶的圖示或者從本地選取

<b>android:width與android:height</b>:對應向量圖的實際大小(向量圖是可以無限大, 但通常情況下一個圖片都應該有一個原始大小, 假如你將此VectorDrawable作為一個ImageView的src, ImageView的大小都設定為wrap_content, 則ImageView對應的實際大小就是這裡設定的大小)

<b>android:viewportWidth與android:viewportHeight</b>:是指當前Drawable對應的虛擬Canvas的大小, 之所以說是虛擬的是因為實際上並不存在這樣一個Canvas, 又之所以需要這個值是因為在+ + <path/>標籤中的路徑資料要基於具體的座標系來繪製.

<b><path/>標籤</b>:對應路徑資訊, 這裡的path與我們自定義繪製圖形時用的Path原理一樣, 就是記錄一些繪圖操作, 具體對應其中的pathData.PathData中對應的路徑描述符號不需要我們去記, 通常情況下由繪圖軟體生成svg圖片再從svg檔案中提取.

關於Path中的字母含義說明：

<b>向量圖建立完成後使用方法跟其他格式的圖片用法一樣。</b>

4.獲取SVG圖片

android提供的向量圖有時不能滿足我們的需求，我們需要自己獲取，讓美工切圖或者從其他網站獲取，這裡我們推薦阿里巴巴的一個網站。
阿里巴巴向量圖示庫

我們可以將svg圖片下載下來，但是Android不支援直接在專案中使用svg的圖片，我們這裡<b>提供三種解決方案：</b>

4.1.使用支援庫PathView

https://github.com/geftimov/android-pathview
不僅支援直接使用svg，還可以自定義路徑，使用是 svg動畫。詳情請看github介紹

4.2.將SVG轉換為VectorDrawable

http://inloop.github.io/svg2android/
該線上網站可以將svg轉換為VectorDrawable

4.3將向量圖製作成字型圖示

<b>step1:</b>從iconfont平臺選取圖示下載到本地，複製字型檔案到專案的assets目錄。

<b>step2:</b>開啟下載下來的檔案，並開啟demo.html,找到圖示對應的HTML實體字元碼。

<b>step3:</b>開啟res／values／strings.xml，新增string值。

<resources>
<string name="app_name">My Application</string>
<string name="icon_cart"></string>
<string name="icon_wl"></string>
</resources>

<b>step4:</b>為TextView設定string值。

<b>step5:</b>為TextView指定文字。

 @Override
 protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      mTv = (TextView) findViewById(R.id.tv_main);
      Typeface iconfont = Typeface.createFromAsset(getAssets(),    "iconfont.ttf");
      mTv.setTypeface(iconfont);
 }

5.封裝使用

上面的使用的方式需要對每一個TextView指定字型，並且需要下載圖示並獲取對應的字元編碼，使用起來非常的麻煩，github上提供了一個開源的庫封裝了操作，簡化了使用：
https://github.com/mikepenz/Android-Iconics

<TextView
    android:text="{gmd-chart} Chart"
    android:textColor="@android:color/black"
    android:layout_width="wrap_content"
    android:layout_height="56dp"
    android:textSize="16sp"/>

6.SVG動畫

6.1 使用AnimatedVectorDrawable來實現動畫

SVG學習--AnimatedVectorDrawable的使用

6.2 使用三方庫-PathView