Android studio使用svg矢量图自适应不同的分辨率， svg矢量图绘制以及转换为Android可用的VectorDrawable资源

最近公司项目使用大屏幕显示屏，21寸和32寸的，这对于Android开发屏幕适配很烦恼，不过通过百度知道了，我们之前用的切图都是位置图，适配需要工程师自己处理，现在知道了尽然有svg格式的矢量图，可以自动适配，看到这个真是好消息啊。

需要UI工程师制作出svg图片，然后在Android studio中直接导入就好了。导入方法：

1，首先安装工具SVG2VectorDrawable,安装步骤：File——setting——plugins:直接搜索SVG2VectorDrawable，然后点击安装，安装完成之后会重启Android studio。

2，svg图片是要导入到drawable文件夹下面的（切记：因为.svg文件在导入Android studio之后会变成.xml文件，中间是转换成VectorDrawable资源文件了），也就是说.svg文件是不能直接在Android studio中使用的，不能直接拷贝到drawable资源文件夹里面，需要通过导入的方式：鼠标放在drawable文件夹上右击——new——Vector Asset：

Asset Type这里选中Local file ; 在Path: 这里找到你的本地svg文件路径，其他的一般不需要改动;然后next就可以了，导入成功你会看到drawable中会出现ic_decorate.xml文件，这样就算svg文件导入成功了，在布局文件中就可以使用ic_decorate.xml了，这个图片资源文件只能在布局文件中使用，不能在代码中引用。

还有的时候svg文件无法导入：

导入之后，next按钮无法点击，并且左边有个错误提示，我查了很多资料，就我理解是，这个svg矢量图有点复杂，Android studio无法直接导入，有些属性不支持，那么这种情况就需要我们手动将svg格式转换成Android可用的VectorDrawable资源文件了，下面就是转换方法：

很简单，直接使用在线工具就可以了，我使用的工具是：http://inloop.github.io/svg2android/   需要用谷歌浏览器打开

打开之后直接将本地的svg文件拖入这里就可以自动转换了

拖入就会直接转换为VectorDrawable资源文件了 ，然后点击doenload就可以下载了，下载的文件是.xml文件，这个文件就可以直接拷贝到drawable文件夹下面直接使用了。

下面是转载别人的博客介绍：svg矢量图绘制以及转换为Android可用的VectorDrawable资源

项目需要 要在快速设置面板里显示一个VoWiFi图标（为了能够区分出来图形，我把透明的背景填充为黑色了）

由于普通图片放大后容易失真，这里我们最好用矢量图（SVG(Scalable Vector Graphics)）来做图标，而系统状态栏图标多是用vectorDrawable绘制，所以我们的最终目的就是绘制一个上图中样式的Android VectorDrawable xml图标。尤其是这种资源文件体积小放大又不失真，干嘛不用呢。

VectorDrawable

Android L开始提供了新的API  VectorDrawable 可以使用SVG类型的资源，也就是矢量图。在xml文件中的标签是

google官方API介绍：

https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html

This lets you create a drawable based on an XML vector graphic. It can be defined in an XML file with the  element.

The vector drawable has the following elements:

具体属性和方法请参考官方说明

下面是一个官方例子：

<vector xmlns:android="http://schemas.android.com/apk/res/android"

android:height="64dp"

android:width="64dp"

android:viewportHeight="600"

android:viewportWidth="600" >

<group

android:name="rotationGroup"

android:pivotX="300.0"

android:pivotY="300.0"

android:rotation="45.0" >

<path

android:name="v"

android:fillColor="#000000"

android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />

group>

vector>

显示效果（背景色应为透明）

绘制svg图

如果想了解绘制原理，调至请调至文末点击W3C的连接。

接下来介绍一些常用的svg绘图工具

1.Inkscape

开源的多平台矢量图绘图工具，支持windows OS X Linux。支持导出为svg等格式图片，功能强大，与后面两个将要介绍的比较就是体积有点大，安装包就接近百兆了。

另外用这个生成的SVG文件，会带一些默认的属性，转化成VectorDrawable以后xml文件里也会有一些默认的属性，虽不影响显示效果，但会多出一些不必要的代码。

工作界面：

官网： https://inkscape.org/

2.Boxy SVG

是一个Chrome应用（推荐）。支持导入，另存为，可以选中单个控件调整属性等。可能不好的地方就是你得安装Chrome浏览器吧，还有下载这个应用的时候得。

3.Janvas - The Online Vector Graphics Editor

也是Chrome应用，不过其实就是一个链接，打开后指向下面的地址

http://www.janvas.com/XOSYSTEM/PROJECTS/janvas_apps_suite_3.0_public/janvas_application.php

但是这个在线编辑器好像只能打开和保存文件到google driver，不推荐

4.？？

这个东西没找到名字，点击下面的连接试用。添加到收藏夹，随时可用。便捷。

http://www.yyyweb.com/ctools/demo.php?t=http%3A%2F%2Feditor.method.ac%2F&h=2000&c=&n

转换为VectorDrawable

找到两个在线转换的工具，都是Github上的开源项目。

1.Android SVG to VectorDrawable

Convert SVG to Android VectorDrawable XML resource file.

可能是这个工具开发比较早，有很多Star，基本的 图形转换是可以的，但是， 不支持文字！也就是说上面的图，如果我们转换的话，得到的结果只是一个椭圆，文字会丢失。

在线工具： http://inloop.github.io/svg2android/

源码地址： https://github.com/inloop/svg2android

2.SvgToVectorDrawableConverter.Web

Batch converter of SVG images to Android VectorDrawable XML resource files.

这个就比较好了， 支持文本转换。

在线工具： http://a-student.github.io/SvgToVectorDrawableConverter.Web/

源码地址： https://github.com/a-student/SvgToVectorDrawableConverter

效果图

这里我把颜色改回了白色。使用的是Boxy SVG绘制，SvgToVectorDrawableConverter.Web转换。

Android Studio支持直接预览VectorDrawable矢量图，有了实时预览，也方便进行一些简单的修改。

这个图标最后应用到下拉的快速设置里面，在手机上的效果图就不上了。

展示一张稍复杂的图吧：

总结

本文简单介绍了几款工具，目的能让新手快速的了解一下如何制作出自己需要的矢量图资源文件，在有需要做一张应用到Android应用/系统的矢量图时不至于措手不及。当然如过你牛逼到直接用记事本“绘图”的话，本文应该不适合你。

我发现我特别喜欢发掘一些能够提高生产力的小工具啊，哈哈哈。

其他

知其然不知其所以然？想要了解的原理，跳转到W3C查看Scalable Vector Graphics (SVG) 1.1 (Second Edition)

https://www.w3.org/TR/SVG11/Overview.html