SVG簡(jiǎn)介
- SVG 的文件里存儲(chǔ)了繪制圖片的相關(guān)信息霍弹，在要用圖的時(shí)候再把圖畫(huà)出來(lái)肮韧，所以在圖片顯示的時(shí)候會(huì)花費(fèi)更多的時(shí)間消耗更多的資源谓形。
- SVG 的文件體積遠(yuǎn)小于傳統(tǒng)的位圖文件拟烫，因?yàn)闆](méi)有存儲(chǔ)任何圖像的像素信息宣蔚。
- SVG的文件畫(huà)出來(lái)的圖像是矢量圖向抢，所以不會(huì)存在失真的問(wèn)題，理論上支持任何級(jí)別的縮放胚委，適應(yīng)性強(qiáng)于傳統(tǒng)的位圖挟鸠。
CSDN同步發(fā)布
SVG簡(jiǎn)單使用
獲取SVG文件
SVG圖片下載地址
選擇要下載的圖片，下載時(shí)選擇svg下載
svg2android
獎(jiǎng)svg圖片轉(zhuǎn)換成android中的drawable文本
在android上顯示svg圖片
在drawable文件夾中新建文件亩冬，將之前轉(zhuǎn)換后的文本信息復(fù)制到里面
<?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直接調(diào)用該文件
<ImageView
android:src="@drawable/phone_svg"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
setColorFilter()可改變圖片顏色
img_phone.setColorFilter(Color.RED);
兼容問(wèn)題
不需要添加任何依賴(lài)包
Gradle在編譯時(shí)會(huì)自動(dòng)生成Vectordrawable對(duì)應(yīng)的位圖資源(如果你支持的最低sdk小于api21, 若大于等于21就不存在兼容性問(wèn)題了)
缺點(diǎn)是同時(shí)打包了位圖與矢量圖資源APK包會(huì)變大. 生成哪種分辨率下的位圖資源可以通過(guò)下面的Gradle配置指定:
defaultConfig {
vectorDrawables.generatedDensities = ['hdpi','xxhdpi']
}
使用Support Library 23.2+(不會(huì)自動(dòng)生成位圖)
需要在build.gradle配置文件中增加如下配置:
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
然后在引用Vectordrawable資源時(shí)使用app:srcCompat取代android:src
SVG動(dòng)畫(huà)
網(wǎng)上有個(gè)開(kāi)源庫(kù)PathAnimView
compile 'com.github.mcxtzhang:PathAnimView:V1.0.0'
以下為簡(jiǎn)要流程兄猩，詳情可以去看作者的博客極速get花式Path
1、獲取png圖片
2鉴未、利用vmde將圖片轉(zhuǎn)成svg格式vmde下載地址
3枢冤、將svg圖片進(jìn)行轉(zhuǎn)化Android SVG to VectorDrawable
4、將轉(zhuǎn)化的結(jié)果寫(xiě)到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淹真、代碼中加載動(dòng)畫(huà)
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 在A(yíng)ndroid中的應(yīng)用
Android Vector曲折的兼容之路
android 中使用svg
Android SVG技術(shù)入門(mén)：線(xiàn)條動(dòng)畫(huà)實(shí)現(xiàn)原理
