Android中使用SVG

SVG簡介

• SVG 的檔案裡存儲了繪制圖檔的相關資訊，在要用圖的時候再把圖畫出來，是以在圖檔顯示的時候會花費更多的時間消耗更多的資源。
• SVG 的檔案體積遠小于傳統的位圖檔案，因為沒有存儲任何圖像的像素資訊。
• SVG的檔案畫出來的圖像是矢量圖，是以不會存在失真的問題，理論上支援任何級别的縮放，适應性強于傳統的位圖。

SVG簡單使用

擷取SVG檔案

SVG圖檔下載下傳位址

選擇要下載下傳的圖檔，下載下傳時選擇svg下載下傳

svg2android

獎svg圖檔轉換成android中的drawable文本

在android上顯示svg圖檔

在drawable檔案夾中建立檔案，将之前轉換後的文本資訊複制到裡面

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="1024dp"
    android:height="1024dp"
    android:viewportHeight="1024"
    android:viewportWidth="1024">

    <path
        android:fillColor="#1296db"
        android:pathData="M693.403-9.263l-376.691 4.628c-93.005 1.142-141.47 64.931-141.47
121.987v760.555c0 70.909 48.497 147.571 146.098
145.113l367.435-9.257c88.235-2.223 160.61-37.038
160.001-135.856l-4.628-751.298c-0.55-89.394-34.658-137.298-150.745-135.872zM777.275
882.536c0 38.027-35.535 68.978-79.226 68.978h-372.081c-43.673
0-79.207-30.951-79.207-68.978v-755.926h0.018c0-38.043 35.535-68.978
79.207-68.978h372.063c43.673 0 79.226 30.937 79.226 68.978zM737.025
124.46h-450.014c-5.407 0-9.776 3.851-9.776 8.617v669.925c0 4.749 4.369 8.633
9.776 8.633h450.014c5.407 0 9.794-3.867
9.794-8.633v-669.925c0-4.766-4.387-8.617-9.794-8.617zM704.108
766.6l-379.551-4.628-4.628-592.51 379.551 4.628zM512.018 825.994c-32.969
0-62.476 23.634-62.476 52.691 0 29.058 33.092 58.667 72.035 51.497 32.423-5.97
56.768-24.541 56.768-53.583 0-29.058-33.359-50.606-66.327-50.606zM512.018
914.128c-22.191 0-40.231-15.901-40.231-35.443s18.041-35.459 40.231-35.459c22.173
0 50.361 14.874 50.361 34.416 0 19.542-28.188 36.486-50.361 36.486zM447.319
90.589c0-3.515 3.895-6.353 8.702-6.353h111.975c4.805 0 8.684 2.841 8.684 6.353 0
3.514-3.877 13.472-8.684 13.523l-111.975 1.195c-4.788
0.051-8.684-11.205-8.702-14.719z" />
</vector>
           

布局檔案中的imageview直接調用該檔案

<ImageView
        android:src="@drawable/phone_svg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
           

setColorFilter()可改變圖檔顔色

img_phone.setColorFilter(Color.RED);
           

相容問題

不需要添加任何依賴包

Gradle在編譯時會自動生成Vectordrawable對應的位圖資源(如果你支援的最低sdk小于api21, 若大于等于21就不存在相容性問題了)

缺點是同時打包了位圖與矢量圖資源APK包會變大. 生成哪種分辨率下的位圖資源可以通過下面的Gradle配置指定:

defaultConfig { 
      vectorDrawables.generatedDensities = ['hdpi','xxhdpi']
}
           

使用Support Library 23.2+(不會自動生成位圖)

需要在build.gradle配置檔案中增加如下配置:

android { 
     defaultConfig { 
           vectorDrawables.useSupportLibrary = true  
      }
  }
           

然後在引用Vectordrawable資源時使用app:srcCompat取代android:src

SVG動畫

網上有個開源庫PathAnimView

以下為簡要流程，詳情可以去看作者的部落格極速get花式Path

1、擷取png圖檔

2、利用vmde将圖檔轉成svg格式vmde下載下傳位址

3、将svg圖檔進行轉化Android SVG to VectorDrawable

4、将轉化的結果寫到strings中,如下

<string name="toys">M   C       C     
 C       C     
 C       C     
 C       C     
 C       C       C 
     Z</string>
           

5、布局檔案中使用PathAnimView控件

<com.mcxtzhang.pathanimlib.PathAnimView
        android:id="@+id/pathAnimView1"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_marginTop="260dp"
        android:background="@color/colorAccent"
        android:padding="5dp"/>
           

6、代碼中加載動畫

pathAnimView1 = (PathAnimView) findViewById(R.id.pathAnimView1);
        SvgPathParser svgPathParser = new SvgPathParser();
        try {
            Path path = svgPathParser.parsePath(getString(R.string.toys));
            pathAnimView1.setSourcePath(path);
        } catch (ParseException e) {
            e.printStackTrace();
        }
        pathAnimView1.startAnim();
           

參考文章

SVG 在Android中的應用

Android Vector曲折的相容之路

android 中使用svg

Android SVG技術入門：線條動畫實作原理