前言
一般遇到客戶要求修改xml 文件VectorDrawable 資源, 需要客戶提供圖標, 當客戶無法提供圖標時,就可以參考此篇文章對原圖標進行修改
將xml 轉為SVG圖片
首先需要有一個svg圖片作為參考, 國內svg下載網址可以去阿里巴巴圖標庫下載
打開下載后的svg格式如下
而VectorDrawable xml 格式如下
將我們參考的svg圖片復制一份, 重命名為我們要轉化的xml文件名字
-
width/height 同步, viewBox 后兩個參數同步android:viewportWidth/viewportHeight 如上需要修改成
width="12" height="15" viewBox="0 0 12 15"
將 android:pathData 信息復制到 path -> d, android:fillColor 修改至 fill, 多個path 也是如此, 注意修改fill
效果如下
用瀏覽器打開, 推薦用Microsoft Edge, 圖標尺寸過小時可按ctrl加鼠標鼓輪上滑 放大
能正常打開時才能進行下一步修改
修改SVG圖片
安裝AI
推薦用Adobe Illustrator CS6 軟件
用AI 打開svg軟件
會發(fā)現圖標過小, 是因為我們設置的viewBox 過小了,如下方法可解決
1. alt 加鼠標進行放大(不推薦)
2. 直接修改viewBox 寬高倍數(不推薦)
3. 點擊 視圖->畫餅適應窗口大小(推薦)
修改圖片大小/圖層縮放
窗口->畫板, 點擊畫板后面圖標可修改圖片大小, 參考如下:
可以拖拽邊界對圖層進行適配大小, 拖拽前后對比如下:
變換矩陣
一般svg修改若涉及矩陣變換, 手動拖拽無法完全適配, 這時候就可以通過變換來適配了
在對象 -> 變換 -> 提供移動/旋轉/對稱/縮放/傾斜, 具體輸入參數參考自己需求
導出文件
文件->存儲為 ...
轉換成xml
這時候就可以通過AndroidStudio自帶工具生成
步驟:
點擊res->drawable 鼠標右鍵 ->new -> Vector Assect 選擇對應的svg路徑 -> next -> finish
通過as自帶工具查看是否生成成功
總結
此篇文章僅供參考
