SVG簡介
- SVG 的文件里存儲了繪制圖片的相關信息，在要用圖的時候再把圖畫出來，所以在圖片顯示的時候會花費更多的時間消耗更多的資源。
- SVG 的文件體積遠小于傳統的位圖文件，因為沒有存儲任何圖像的像素信息。
- SVG的文件畫出來的圖像是矢量圖，所以不會存在失真的問題，理論上支持任何級別的縮放，適應性強于傳統的位圖。
CSDN同步發(fā)布
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
compile 'com.github.mcxtzhang:PathAnimView:V1.0.0'
以下為簡要流程，詳情可以去看作者的博客極速get花式Path
1、獲取png圖片
2、利用vmde將圖片轉成svg格式vmde下載地址
3、將svg圖片進行轉化Android SVG to VectorDrawable
4、將轉化的結果寫到strings中,如下
<string name="toys">M 3.33 3.52 C 7.15 1.59 12.31 4.86 12.95 9.01 C 15.02 20.49 16.86 32.02 18.84
43.51 C 19.10 45.60 20.73 47.74 23.00 47.70 C 33.34 47.83 43.69 47.73 54.04
47.73 C 55.56 47.81 57.80 47.37 58.39 49.31 C 57.98 50.42 57.23 50.97 56.14
50.98 C 45.42 51.04 34.69 50.98 23.97 51.01 C 20.36 51.33 16.61 48.88 15.90
45.24 C 13.66 33.35 11.97 21.34 9.68 9.46 C 9.18 6.31 5.59 6.39 3.20 5.74 C 3.23
5.18 3.30 4.07 3.33 3.52 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技術入門：線條動畫實現原理
