本文已参与「新人创作礼」活动,一起开启掘金创作之路。vector2Drawable(批量将png图片转换成android使用的矢量图 )

1,542 阅读2分钟

概述

将适合转换成矢量图的图片,批量处理,转换成适合安卓项目使用的 vector标签的xml。

适合转成矢量图的图,一般为本地加载的图标,图片色彩和形状简单有规律。复杂的图片是不适合转换成矢量图的,即使转换过来,可能也严重失真,且造成转换的矢量图path信息大的问题。

获取常见的矢量图

获取常见的矢量图可以从下面网址去搜索获取

iconfont-阿里巴巴矢量图标库

实现

批量转换图片格式

第一步先统一图片格式,将项目中jpg webp png等图片全部转换成 png图片,png图片有透明度信息。

推荐转换工具 XnConvert

​编辑

​编辑

这款软件转换是相当的快且方便,极力推荐。有破解版本,自寻哦。

将位图转换成矢量图(png转成svg)

第二步将位图转换成矢量图

推荐软件vmde.exe ,支持批量处理,选项和支持的格式较多,操作简单方便,有破解版本。

​编辑

保持透明度和选择格式,可以选择Svg

​编辑

处理完成,生成对应的svg格式文件

​编辑

将svg转换成android使用的vector标签的xml

方法一:通过studio 客户端转换单个文件

弊端:不能批量转换

​编辑

​编辑

方法二:使用 工具批量处理

工具地址

GitHub - Ashung/svg2vectordrawable: JavaScript module and command-line tools for convert SVG to Android vector drawable.

先下载Node.js ,再安装Node.js,安装完成。 下载地址 下载 | Node.js 中文网

安装详情可以查看website upgrading…

npm install svg2vectordrawable -g

转换一个下所有 SVG 文件为 Vector Drawable 文件。

s2v -f input_folder -o output_folder

注意事项

1)png转svg过程中,可能会有部分图片报错,造成转换中断,这是因为png图片的信息无法生成对应的矢量图,将对应的图片踢除,继续转换即可。

2)png转svg过程中,需要保持透明度,否则之前的透明度会变成黑色的path信息

3)png转svg过程中,默认生成的Svg文件宽高信息与像素值并不匹配,需要手动设置好。默认会变大很多,这会导致在实际使用的给ImageView设置Src时与原png图显示有差距,相当于修改了图片的宽高尺寸。这点必须处理