关于Android VectorDrawable xml 转为SVG并修改

前言

一般遇到客户要求修改xml 文件VectorDrawable 资源, 需要客户提供图标, 当客户无法提供图标时,就可以参考此篇文章对原图标进行修改

将xml 转为SVG图片

首先需要有一个svg图片作为参考, 国内svg下载网址可以去阿里巴巴图标库下载

打开下载后的svg格式如下

svn格式.png

而VectorDrawable xml 格式如下

xml格式.png

1. 将我们参考的svg图片复制一份, 重命名为我们要转化的xml文件名字

2. width/height 同步, viewBox 后两个参数同步android:viewportWidth/viewportHeight 如上需要修改成

   width="12" height="15" viewBox="0 0 12 15"

3. 将 android:pathData 信息复制到 path -> d, android:fillColor 修改至 fill, 多个path 也是如此, 注意修改fill

效果如下

修改后的svg.png

用浏览器打开, 推荐用Microsoft Edge, 图标尺寸过小时可按ctrl加鼠标鼓轮上滑 放大

volte.png

能正常打开时才能进行下一步修改

修改SVG图片

安装AI

推荐用Adobe Illustrator CS6 软件

用AI 打开svg软件

会发现图标过小, 是因为我们设置的viewBox 过小了,如下方法可解决

1. alt 加鼠标进行放大(不推荐)

2. 直接修改viewBox 宽高倍数(不推荐)

3. 点击 视图->画饼适应窗口大小(推荐)

修改图片大小/图层缩放

窗口->画板, 点击画板后面图标可修改图片大小, 参考如下:

画板.png

画板选项.png

可以拖拽边界对图层进行适配大小, 拖拽前后对比如下:

修改前.png

修改后.png

变换矩阵

一般svg修改若涉及矩阵变换, 手动拖拽无法完全适配, 这时候就可以通过变换来适配了

在对象 -> 变换 -> 提供移动/旋转/对称/缩放/倾斜, 具体输入参数参考自己需求

导出文件

文件->存储为 ...

转换成xml

这时候就可以通过AndroidStudio自带工具生成

步骤:

点击res->drawable 鼠标右键 ->new -> Vector Assect 选择对应的svg路径 -> next -> finish

AS1.png

AS2.png

通过as自带工具查看是否生成成功

vectorDrawable.png

总结

此篇文章仅供参考