文章目錄

• 一、SVG 矢量圖簡介
• 二、Android 中生成 Vector 矢量圖資源
• 三、參考資料

一、SVG 矢量圖簡介

---

Android SVG 參考文檔 : https://developer.android.google.cn/studio/write/vector-asset-studio

SVG 全稱 Scalable Vector Graphics , 可縮放矢量圖 ; 矢量圖不會隨著圖像縮放 , 出現圖像質量降低的情況 ;

png , jpeg 等位圖會隨著圖像縮放 , 出現模糊的情況 ;

Android 中使用 SVG 矢量圖 , 能極大的減少占用空間的大小 ;

應用中使用的小圖標 , 一般都使用 SVG 格式 ;

PhotoShop 或 illustrator 等繪圖軟件 , 可以直接導出 SVG 格式的圖片 ;

SVG 圖片顯示 :

SVG 圖片數據 : SVG 格式的圖片文件 , 是一個 XML 格式的文本 ;

<?xml version="1.0" encoding="utf-8"?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve"> <metadata> Svg Vector Icons : http://www.sfont.cn </metadata> <g><g><path d="M289.2,572.1c-33,19.2-73.3,28.8-120.7,28.8h-57.6v-28.8H82.1c-3.9,0-7.3-3.5-10.1-10.6c-2.9-7.1-4.3-15.5-4.3-25.4c0-7.2,1.1-14.6,3.2-22.1c-17.4-0.6-31.9-2.2-43.5-4.7C15.8,506.7,10,503.6,10,500s5.8-6.7,17.3-9.2c11.6-2.6,26-4.1,43.5-4.7c-2.1-7.5-3.2-14.9-3.2-22.1c0-9.9,1.4-18.4,4.3-25.4c2.9-7.1,6.2-10.6,10.1-10.6h28.8v-28.8h57.6c47.4,0,87.7,9.6,120.7,28.8h501.3c12.6,2.1,28.6,4.8,48,8.1c19.4,3.3,31.5,5.4,36.3,6.3c26.7,4.5,49.2,10.6,67.6,18.2c18.3,7.7,30.8,14.8,37.6,21.4c6.8,6.6,10.1,12.6,10.1,18s-3.4,11.4-10.1,18c-6.8,6.6-19.3,13.7-37.6,21.4c-18.3,7.7-40.8,13.7-67.6,18.2c-4.8,0.9-16.9,3-36.3,6.3c-19.4,3.3-35.4,6-48,8.1H289.2L289.2,572.1z M793.2,458.6c15.9,10.8,23.9,24.6,23.9,41.4s-8,30.6-23.9,41.4l36.5,13.5c20.4-14.4,30.6-32.7,30.6-54.9s-10.2-40.5-30.6-54.9L793.2,458.6z M291.5,579.3h457.1c-65.2,11.4-133.6,23.4-205.4,36c-17.1,0-34.1,3.6-50.9,10.8c-16.8,7.2-29.3,14.4-37.4,21.6l-12.6,10.8L312.6,788.2c-7.8,7.8-18.4,14.6-31.8,20.3c-13.4,5.7-26.8,8.6-40.3,8.6h-43.2l-41.9-209h13.1C215.7,608.1,256.7,598.5,291.5,579.3L291.5,579.3z M168.5,391.9h-13.1l41.9-209h43.2c13.8,0,27.3,2.9,40.5,8.6c13.2,5.7,23.7,12.5,31.5,20.3l129.7,129.7c1.2,1.2,2.9,2.8,5,4.7c2.1,2,6.7,5.4,13.7,10.4c7.1,5,14.3,9.3,21.8,13.1c7.5,3.8,16.7,7.2,27.7,10.4s21.8,4.7,32.7,4.7l205.4,36H291.5C256.7,401.5,215.7,391.9,168.5,391.9L168.5,391.9z"/></g></g> </svg>

SVG 圖片語法格式參考 : https://www.runoob.com/svg/svg-rect.html

二、Android 中生成 Vector 矢量圖資源

---

但是在 Android 中 , 不能直接使用標準的 SVG 文件 , 使用 Vector Assets 實現對 SVG 圖片格式的支持 , Vector 矢量圖也是 XML 文件 , 根節點必須是 <vector> , 并且內容格式也有一定的不同 ;

SVG 圖片的根節點是 <svg> ;

Vector 資源的根節點是 <vector> ;

在 Android Studio 中 , 右鍵點擊 res 資源目錄 , 選擇 " New / Vector Asset " 選項 ,

彈出 " Asset Studio " 對話框 , 如果使用 Android 內置的圖標 , 選擇 " Clip Art " 選項 ,

點擊 " Clip Art " 對應行的圖片按鈕 , 即可選擇 Android 內置的材料設計 ICON 圖標 ;

如果 UI 設計了 SVG 圖像 , 可以選擇 " Local file ( SVG, PSD ) " 選項 , 從外部文件路徑中 , 選擇一張圖片 ;

點擊 Next 選擇保存位置 ,

點擊 " Finish " 按鈕后 , 在 res/drawable 中生成了對應的 " ic_plane.xml " Vector 矢量圖資源 ;

三、參考資料

---

參考文檔 :

• 添加多密度矢量圖形 SVG : https://developer.android.google.cn/studio/write/vector-asset-studio

• 縮減、混淆處理和優化應用 : https://developer.android.google.cn/studio/build/shrink-code

• SVG 語法格式 : https://www.runoob.com/svg/svg-tutorial.html

博客資源 :

• GitHub 項目源碼 : https://github.com/han1202012/SVG

• 下載地址 :

總結

以上是生活随笔為你收集整理的【Android 安装包优化】Android 中使用 SVG 图片 ( SVG 矢量图简介 | Android 中生成 Vector 矢量图资源 )的全部內容，希望文章能夠幫你解決所遇到的問題。

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