Android SVG Support

Android 在 5.x 版之後加入了對 SVG的支持, SVG stands for scalable vector graphics, 中文叫可伸縮向量圖形, 實際上是 xml 格式的檔案, 內容為描述如何繪出圖形, 特點是放大或縮小不失真

Android主推的 material design 圖形在 Android Studio 中就以 SVG 的方式存在, 右鍵選擇 Vector Asset 就可以在專案中加入一個 SVG 圖形, 實際上已 xml 檔的形式存在


點開該 xml 檔會發現內容其實很簡單, 通常會修改的就是 width/height, viewportWidth/viewportHeight 這些參數


width/height 的意義就是這張圖片實際上在螢幕上占的大小, viewportWidth/viewportHeight則是表示將這張圖片分成幾等分, 在 xml 檔中的 path元素中使用的參數就是以 viewportWidth/viewportHeight 為準, 例如 viewportWidth為 48, path 中 width 24 的點就會在圖片的中央

在 Android 中使用 SVG 的好處有

• 圖片放大縮小不失真
• 不需要為了各種尺寸的螢幕準備不同大小的圖片
• 減少 app 大小, 相對於 png 等圖片檔, xml 是很小的

但是當然也有壞處, 因為 SVG 等於是執行時才畫出圖形, 所以複雜的 SVG大量使用時會造成效能問題