前言 : 在做安卓开发时, 界面设计就离不开矢量图标,它可能是你的菜单栏的图标或者是桌面应用图标等等, 这些小图标应该怎么找?有时候又需要调整图标或者图片的大小, 有时候有需要适合相对应的分辨率的图标.本文章主要讲述如何将SVG格式转换为安卓的Vector 的XML格式的图标.

• VectorDrawable是用xml文件定义一系列点、线、曲线及其颜色信息的 矢量图 。
  • 其最主要的优点是缩放不损失图片质量。
  • 可以通过使用多个xml矢量图文件来做动画，从而避免适配多分辨率使用多张图片。
  • 从android 5.0（api 21），系统提供了VectorDrawable与AnimatedVectorDrawable来支持矢量图。

VectorDrawable 定义一个静态的drawable对象。类似svg格式，每个 矢量图 被定义成由path和gourp对象构成的树状结构。每个path包含了对象的几何轮廓，group包含了变化的具体规则。所有的path会按照xml中定义的顺序依次绘制。

下载矢量图标SVG

• https://www.iconfont.cn/
  

• 图标资源 : 阿里巴巴矢量图标库

• 

• 下载SVG文件

• 

附 : 阿里巴巴矢量图库提供多种格式下载

将SVG转换成VectorDrawable

• svg转换Vector网站

点击 Download 可直接下载

也可直接复制上面的代码来使用

工具地址GitHub地址 可自行下载, 该静态网页我已托管到 https://svg2xml.vercel.app 该站点, 无需下载也可直接使用

参考博客 : 如何将SVG转换成VectorDrawable XML资源

图片素材查找

介绍几个比较有意思的图片素材网站

• 一个免费制作logo的网站
  

• 才华横溢的摄影作者在这里免费分享最精彩的素材图片和视频
  

• 免费正版高清图片素材库
  

• 发表情包
  

mkdir classes javac -d classes -classpath lib/mxgraph-core.jar -sourcepath src src/com/mxgraph/ svg 2 xml / Svg 2 Xml Gui.java java -classpath lib/mxgraph-core.jar:classes com.mxgraph. svg 2 xml . Svg 2 Xml Gui 运行 Svg 2 Xml Gui。 左侧的文件系统定义了要 转 换的文件或文件夹。 右边的一个定义了目的地。 如果选择一个文件，则将仅为那个模板生成一个模板 XML 文件。 如果选择多个文件，则将为所选模板生成单个模板 XML 文件 第二步：将 SVG 图标 转换成 XML 文件，使用 转 换工具。 链接: https://pan.baidu.com/s/1fEjep7oK8xGneNEcX690ww?pwd=sv3t 提取码: sv3t ，解压后如下图，一个静态的网页： svg 资源 阿里巴巴矢量 资源 网站:http://www.iconfont.cn/ 感觉一般的 svg 到 Android 可用的 xml 差异有点规律，主要的就是path 秉承着能用代码解决的问题，绝对不动手。能够靠智商解决的问题，绝对不靠体力的大无畏精神： 写段代码批处理一下，要比一个一个在网上 转 换方便一些。 1.样例 svg <? xml version="1... 从AI中导出的 SVG 图，有时会报错：internal error parsing svg ，估计是从AI导出的设置不对， Android Studio的解析工具并不支持所有 svg 的属性，报错的机会还是挺多的哈！以上这个网址很好的解决这个问题，能够快速将 svg 图 转 为 vector xml 文件直接Download，赋值到项目中用，非常方便。 矢量图能不受显示范围大小的限制且不失真，不需要放多套PNG图片来做适配，能随意自己更改矢量图的大小而不再需要去求同事给新切图。 而我目前所在的公司出图放在蓝湖上，能选择下载PNG或 SVG 格式的图片。 项目中有个类似于电影院选座一样的控件，每个小框内有个图片，能放大，放大后普通的小PNG图片会失真，很丑。 1、下载得到 SVG 图片。 2、 Android Studio（开发工具）中在draw... async function svg 2png( svg , png) { const image = await loadImage( svg ) const canvas = createCanvas(image.width, image.height) const ctx = canvas.getContext('2d') ctx.drawImage(image, 0, 0) const buffer = canvas.toBuffer() fs.writeFileSync(png, buffer) svg 2png('input. svg ', 'output.png') 此代码将“input. svg ”文件 转 换为“output.png”文件。