當前位置：首頁 > 运维知识 > Android >内容正文

Android

SVG在Android上的使用

發布時間：2024/1/1 Android 50 豆豆

生活随笔收集整理的這篇文章主要介紹了 SVG在Android上的使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

阿里巴巴圖片庫：https://www.iconfont.cn/collections/detail?cid=9638

一：位圖和矢量圖的概念

位圖又叫點陣圖或像素圖，計算機屏幕上的圖是由屏幕上的發光點（即像素）構成的，每個點用二進制數據來描述其顏色與亮度等信息，這些點是離散的，類似于點陣。多個像素的色彩組合就形成了圖像，稱之為位圖（像GIF、JPEG、PNG等都是位圖圖像格式）。
矢量圖又叫向量圖，是用一系列計算機指令來描述和記錄一幅圖，一幅圖可以解為一系列由點、線、面等到組成的子圖，它所記錄的是對象的幾何形狀、線條粗細和色彩等。生成的矢量圖文件存儲量很小，特別適用于文字設計、圖案設計、版式設計、標志設計、計算機輔助設計（CAD）、工藝美術設計、插圖等。

二：什么是SVG

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用于網絡的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
SVG 是萬維網聯盟的標準
SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體

三：SVG的代碼實現

svg代碼：

但是在android中是不支持svg代碼，具體教程可查看W3school：https://www.w3school.com.cn/svg/index.asp

在android studio中以Vector代碼形式來顯示svg圖片：

說到矢量圖，順便講下Vector，在Android中指的是Vector Drawable，也就是Android中的矢量圖，可以說Vector就是Android中的SVG實現(并不是支持全部的SVG語法,現已支持的完全足夠用了)，其實svg格式再android studio的顯示就是轉為Vector

四：SVG和平時用的位圖有什么區別

SVG是需要顯示的時候再把圖形繪制出來,所以顯示的時候肯定會耗費一些資源(但是位圖也需要渲染,具體誰占用的資源更多,需要根據設備來看)
因為是用的時候實時繪制,所以SVG不適合太過復雜的圖片
SVG屬于矢量圖片,不怕縮放失真
SVG使用代碼繪制,文件比較小
SVG的圖像無法像位圖圖像那么細膩、多層次、多細節

? ? 總結來看,如果是特定的icon圖標或者一些不復雜的地方,使用SVG會更好

放幾張圖對比下：以下2張圖片，分別是分別率為1024x1024的png和svg的圖片，明顯svg格式的圖片大小不png小的多的多

以下圖片是設置同樣寬高的svg和png的2張圖片，明顯png格式的圖片已經變得模糊了

五：SVG在Android中怎么用

? ? 1：Android5.0（即API21）開始支持SVG

? ? ? ?對于大家minSDK19的開發習慣來說,還是有一些限制的,那怎么做像下兼容呢，這就涉及到了支持庫，從AppCompat23.2開始，Google開始支持在低版本上使用Vector。（所謂的兼容也是個坑爹的兼容，即低版本非真實使用SVG,而是生成PNG圖片）

? ? ? ?API查看網址：https://developer.android.google.cn/reference/android/graphics/drawable/VectorDrawable?hl=en

? ?2：5.0之前怎么使用SVG

? ? ? 對于5.0之前的兼容，同樣用的是VectorDrawable，兼容需要做到以下幾點：

? ? ? 1.Android Plugin for Gradle 2.0 or higher

? ? ? 2.在項目的gradle文件中添加兼容庫依賴23.2.0以上

dependencies {compile 'com.android.support:appcompat-v7:23.2.0' }

? ? 3.還需要打開一個兼容vectorDrawables的開關

android {defaultConfig {vectorDrawables.useSupportLibrary = true} }

完成以上3步，即可開始創建Vector了

注意：

a：如果我們沒有設置 vectorDrawables.useSupportLibrary = true 的話，則在build項目的時候，gradle會為vcetor創建不同分辨率下的png序列，即預柵格化我們的vector為真正的png圖片并會被加入到apk中，無形中增加了apk的大小。這也是官方提到的另一種vector向后兼容的一種方式，如果對性能要求高的，對apk大小要求不高的，可以用這種方式，畢竟手機在將vector柵格化的時候需要一些時間，比直接加載png的費時。下圖為gradle自動將vector轉化為不同分辨率的

以上的這個實在設置minSdkVersion 21 即最小兼容版本小于5.0以下時，未設置vectorDrawables.useSupportLibrary = true 出現的效果，在21以上不需要設置

b：在適配的最低版本小于5.0時，在沒有設置vectorDrawables.useSupportLibrary = true時，調用和平常的png等的調用方式相同，但是會將cector的圖片轉為png存在各個尺寸的drawable里）

? ? ? 平常設置圖片的方式有哪些呢：https://blog.csdn.net/u012693479/article/details/78211550

c：在測試的過程中，發現當適配的最低版本小于5.0時，運行在5.0以下的手機，且設置了vectorDrawables.useSupportLibrary = true時，在布局里不能用android:background和android:src 否則會奔潰，setImageResource可以正常使用，其他平常設置圖片的方法不能正常使用

，如果是5.0以上的手機則都是正常的調用

?3：Vector Asset的使用

? ? ? 在點擊File—>New—>Vector Asset ,也可在res—>New—>Vector Asset打開Configure Vector Asset窗口

其中Clip Art代表選擇android studio自帶的 Vector Drawale圖片，Local file（SVG,PSD）代表加載本地存在的SVG,PSD格式的圖片，將其轉化為xml放于drawable文件中

【Clip Art（剪切圖）】

Name：xml文件名稱
Clip Art：可以選擇AS自帶的圖標

Size：設置矢量圖的大小
Color：設置矢量圖的顏色
Opacity：設置不透明度
Enable auto mirroring for RTL layout：為RTL布局啟用自動鏡像

詳細描述RTL模式：https://blog.csdn.net/NoMasp/article/details/52074538

這些是android Studio自帶的Vector Drawale圖片，搜索框盤邊的2個選項分別為，左一：每個圖標的不同類型，最右邊：篩選不同類型的圖標

【Local file（本地SVG文件或者PSD文件）】

Name：xml文件名稱
Size：設置矢量圖的大小
Opacity：設置不透明度
Enable auto mirroring for RTL layout：為RTL布局啟用自動鏡像
Path：選擇本地矢量圖（比如svg圖片）
從本地導入上面預留好的svg文件，如下：
?

?最上邊的箭頭，引進來的SVG格式圖片會轉為xml格式，在drawable包下顯示

具體怎么調用呢

? ? 1：最低版本設置為5.0以上?

? ? ? ?調用方式和普調的圖片一樣

? ? 2：如果項目最低的版本要求是在5.0以下

? ? ? a: 則不要在xml里用android:background這個來調用vector的圖片，否則app運行在5.0以下是會奔潰的，5.0以上不會

? ? ? b:Activity需繼承AppCompatActivity,則可在布局中用ImageView,不是的話需用android.support.v7.widget.AppCompatImageView．
? ? ? ? ?加上xmlns:app=”http://schemas.android.com/apk/res-auto”,再將drawable設置到app:srcCompat如下：

<ImageViewandroid:layout_width="100dp"android:layout_height="100dp"app:srcCompat="@drawable/ic_baseline_access_alarm_24" />

? ? ? Java代碼設置 mImageView.setImageResource(R.drawable.ic_baseline_access_alarm_24);

? ? ?c:轉成Drawable使用

? ? ?圖片有時是需要轉成Drawable來使用，如TextView中的Drawable．為了兼容Android L以下版本，需要按照以下方法進行轉換．

方法一：

VectorDrawableCompat vectorDrawableCompat = VectorDrawableCompat.create(getResources(), R.drawable.ic_baseline_backspace_24, null);

方法二：Activity中加靜態代碼塊

static {AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);}

然后常規圖片資源獲得Drawable的方法去處理

Drawable drawable = ContextCompat.getDrawable(this,R.drawable.ic_baseline_backspace_24);

如果沒加靜態代碼塊，５.0下會Crash.

AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);的方法描述解釋了如何兼容AndroidL下版本使用SVG與注意事項．
建議使用第一種方法，較靈活．

六：語法

具體語法詳情見：https://www.cnblogs.com/yuhanghzsd/p/5466846.html
?

總結

以上是生活随笔為你收集整理的SVG在Android上的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Android
svg

上一篇：小米11发布：3999元的首款高端旗舰机
下一篇： Android 基于google Zxi