51CTO旗下网站
如何使用Android的VectorDrawable类绘制矢量图
尽管Android系统并不能够直接支持SVG（即可缩放矢量图形），但Lollipop版本却引入了一个名为VectorDrawable的新类，其允许设计人员及开发人员以纯代码方式生成类似的绘制效果。
作者：核子可乐译来源：51CTO| 10:40
绘制矢量图形非难事&&如何使用Android的VectorDrawable类
尽管Android系统并不能够直接支持SVG（即可缩放矢量图形），但Lollipop版本却引入了一个名为VectorDrawable的新类，其允许设计人员及开发人员以纯代码方式生成类似的绘制效果。
在今天的文章中，我们将共同学习如何利用XML文件创建一个VectorDrawable，并将其以动画方式显示在自己的项目当中。这项功能只能在运行有Android 5.0或者更高版本的设备上实现，而且目前还不具备任何支持库实现。本篇教程中的相关源文件可以通过GitHub网站获取。
1.&创建Vector Drawable
从相似角度来看，VectorDrawable与标准SVG图形都是利用path值绘制完成的。不过如何利用SVG path绘制图形并不在本篇文章的探讨范围之内，大家可以点击此处从W3C网站处获取必要的说明资料。在本文当中，我们只需要了解到path标签的作用是进行图形绘制即可。让我们首先从SVG文件入手，看看以下图形是如何被绘制出来的：
这一图形共由五个主要部分所组成：
一个圆角四边形作为CPU主体，该四边形由两条拱状弧线构成。
四组各自包含五根线条的图形，用于充当CPU的外延线路。
以下代码所示为如何以SVG方式绘制以上图形：
&?xml&version=&1.0&&encoding=&utf-8&?&&&&&!DOCTYPE&svg&PUBLIC&&-//W3C//DTD&SVG&1.1//EN&&&http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&&&&svg&version=&1.1&&xmlns=&http://www.w3.org/2000/svg&&xmlns:xlink=&http://www.w3.org/1999/xlink&&x=&0px&&y=&0px&&&&&&&width=&512px&&height=&512px&&viewBox=&0&0&512&512&&style=&enable-background:new&0&0&512&512;&&xml:space=&preserve&&&&path&id=&cpu&&d=&&&&&&M341.087,157.478c7.417,0,13.435,6.018,13.435,13.435v170.174&c0,7.417-6.018,13.435-13.435,13.435H170.913&c-7.417,0-13.435-6.018-13.435-13.435V170.913&c0-7.417,6.018-13.435,13.435-13.435H341.087z&&&&&M390.348,157.478&c0-19.785-16.041-35.826-35.826-35.826H157.479c-19.785,0-35.826,16.041-35.826,35.826v197.043&c0,19.785,16.041,35.826,35.826,35.826h197.043c19.785&0,35.826-16.041,35.826-35.826V157.478z&&&&&&&M193.304,408.261V462h-17.913&v-53.739H193.304z&&&&&M264.957,408.261V462h-17.914v-53.739H264.957z&&&&&M300.783,408.261V462h-17.914v-53.739H300.783z&&&&&M229.13,408.261&V462h-17.913v-53.739H229.13z&&&&&M336.609,408.261V462h-17.914v-53.739H336.609z&&&&&&&M193.304,50v53.739h-17.913V50H193.304z&&&&&M264.957,50&v53.739h-17.914V50H264.957z&&&&&M300.783,50v53.739h-17.914V50H300.783z&&&&&M229.13,50v53.739h-17.913V50H229.13z&&&&&M336.609,50v53.739&h-17.914V50H336.609z&&&&&&&M408.261,318.695H462v17.914h-53.739V318.695z&&&&&M408.261,247.043H462v17.914h-53.739V247.043z&&&&&M408.261,211.217&H462v17.913h-53.739V211.217z&&&&&M408.261,282.869H462v17.914h-53.739V282.869z&&&&&M408.261,175.391H462v17.913h-53.739V175.391z&&&&&&&M50,318.695h53.739v17.914H50V318.695z&&&&&M50,247.043h53.739v17.914H50V247.043z&&&&&M50,211.217h53.739v17.913H50V211.217z&&&&&M50,282.869&h53.739v17.914H50V282.869z&&&&&M50,175.391h53.739v17.913H50V175.391z&&/&&&/svg&&
虽然看起来有点繁杂，但大家其实用不着纠结于以上代码的具体含义，而且这完全不会影响到我们接下来要进行的VectorDrawable绘制工作。不过需要强调的是，我将前面提到的五大图形组成部分在代码中作为独立的区块来处理，这是为了增强代码内容的可读性。
首先，我们需要利用两条拱形弧线来绘制出圆角四边形，而在接下来的内容中我们会探讨如何分别表现出上、下、左、右四个方位的外延线条。为了将上述SVG代码转化为VectorDrawable，大家首先需要在XML当中定义vector对象。以下代码提取自本篇文章示例代码当中的vector_drawable_cpu.xml文件。
&vector&xmlns:android=&http://schemas.android.com/apk/res/android&&&&&&android:height=&64dp&&&&&&android:width=&64dp&&&&&&android:viewportHeight=&600&&&&&&android:viewportWidth=&600&&&&&&&&&&&/vector&&
在此之后，大家可以向其中添加path数据。下列代码同样被拆分成了五个不同的path标签而非将其作为整体处理，这当然也是为了保证内容的可读性。
&&vector&xmlns:android=&http://schemas.android.com/apk/res/android&&&&&&android:height=&64dp&&&&&&android:width=&64dp&&&&&&android:viewportHeight=&600&&&&&&android:viewportWidth=&600&&&&&&&&&&&&&&&path&&&&&&&&&&&&&android:name=&cpu&&&&&&&&&&&&&&android:fillColor=&#000000&&&&&&&&&&&&&&android:pathData=&&&&&&&&&&&&&&&&&&M341.087,157.478&c7.417,0,13.435,6.018,13.435,13.435&v170.174c0,7.417-6.018,13.435-13.435,13.435&H170.913&c-7.417,0-13.435-6.018-13.435-13.435V170.913c0-7.417,6.018-13.435,13.435-13.435H341.087z&&&&&&&&&&&&&&&&&M390.348,157.478&c0-19.785-16.041-35.826-35.826-35.826H157.479c-19.785,0-35.826,16.041-35.826,35.826v197.043&c0,19.785,16.041,35.826,35.826,35.826h197.043c19.785,0,35.826-16.041,35.826-35.826V157.478z&&&&&&&&&&/&&&&&&&&&&&&&path&&&&&&&&&&&&&android:name=&wires_bottom&&&&&&&&&&&&&&android:fillColor=&#000000&&&&&&&&&&&&&&android:pathData=&&&&&&&&&&&&&&&&&&M193.304,408.261V462h-17.913&v-53.739H193.304z&&&&&&&&&&&&&&&&&M264.957,408.261V462h-17.914v-53.739H264.957z&&&&&&&&&&&&&&&&&M300.783,408.261V462h-17.914v-53.739H300.783z&&&&&&&&&&&&&&&&&M229.13,408.261&V462h-17.913v-53.739H229.13z&&&&&&&&&&&&&&&&&M336.609,408.261V462h-17.914v-53.739H336.609z&&&&&&&&&&/&&&&&&&&&&&&&path&&&&&&&&&&&&&android:name=&wires_top&&&&&&&&&&&&&&android:fillColor=&#000000&&&&&&&&&&&&&&android:pathData=&&&&&&&&&&&&&&&&&&M193.304,50v53.739h-17.913V50H193.304z&&&&&&&&&&&&&&&&&M264.957,50&v53.739h-17.914V50H264.957z&&&&&&&&&&&&&&&&&M300.783,50v53.739h-17.914V50H300.783z&&&&&&&&&&&&&&&&&M229.13,50v53.739h-17.913V50H229.13z&&&&&&&&&&&&&&&&&M336.609,50v53.739&h-17.914V50H336.609z&&&&&&&&&&/&&&&&&&&&&&&&path&&&&&&&&&&&&&android:name=&wires_right&&&&&&&&&&&&&&android:fillColor=&#000000&&&&&&&&&&&&&&android:pathData=&&&&&&&&&&&&&&&&&&M408.261,318.695H462v17.914h-53.739V318.695z&&&&&&&&&&&&&&&&&M408.261,247.043H462v17.914h-53.739V247.043z&&&&&&&&&&&&&&&&&M408.261,211.217&H462v17.913h-53.739V211.217z&&&&&&&&&&&&&&&&&M408.261,282.869H462v17.914h-53.739V282.869z&&&&&&&&&&&&&&&&&M408.261,175.391H462v17.913h-53.739V175.391z&&&&&&&&&&/&&&&&&&&&&&&&&&&&&&&&path&&&&&&&&&&&&&android:name=&wires_left&&&&&&&&&&&&&&android:fillColor=&#000000&&&&&&&&&&&&&&android:pathData=&&&&&&&&&&&&&&&&&&M50,318.695h53.739v17.914H50V318.695z&&&&&&&&&&&&&&&&&M50,247.043h53.739v17.914H50V247.043z&&&&&&&&&&&&&&&&&M50,211.217h53.739v17.913H50V211.217z&&&&&&&&&&&&&&&&&M50,282.869&h53.739v17.914H50V282.869z&&&&&&&&&&&&&&&&&M50,175.391h53.739v17.913H50V175.391z&&&&&&&&&&/&&&&&/vector&&
正如大家所见，每个path片段都只需要利用pathData属性进行绘制。现在我们可以将VectorDrawable XML文件作为一个可绘制对象纳入到标准ImageView当中，而且其能够根据应用程序的实际需要任意进行尺寸缩放&&完全不需要再修改任何Java代码。
2.&为Vector Drawables添加动画效果
现在我们已经了解了如何以纯代码方式创建图形，接下来要做的是找点乐子&&为其添加动画效果。在以下动画中，大家会发现作为延伸线路的各组线条会不断指向并远离CPU本体进行移动。
为了达到这一目标，大家需要将包含动画效果的每个片段包含在一个&group&标签当中。经过修改的vector_drawable_cpu.xml版本将如下所示：
&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=&cpu_box&&&&&&&&&&&&path&&&&&&&&&&&&&android:name=&cpu&&&&&&&&&&&&&&android:fillColor=&#000000&&&&&&&&&&&&&&android:pathData=&&&&&&&&&&&&&&M341.087,157.478&c7.417,0,13.435,6.018,13.435,13.435&v170.174c0,7.417-6.018,13.435-13.435,13.435&H170.913&c-7.417,0-13.435-6.018-13.435-13.435V170.913c0-7.417,6.018-13.435,13.435-13.435H341.087z&&&&&&&&&&&&&M390.348,157.478&c0-19.785-16.041-35.826-35.826-35.826H157.479c-19.785,0-35.826,16.041-35.826,35.826v197.043&c0,19.785,16.041,35.826,35.826,35.826h197.043c19.785,0,35.826-16.041,35.826-35.826V157.478z&&/&&&&&&&/group&&&&&&&group&&&&&&&&&android:name=&bottom&&&&&&&&&&&&path&&&&&&&&&&&&&android:name=&wires_bottom&&&&&&&&&&&&&&android:fillColor=&#000000&&&&&&&&&&&&&&android:pathData=&&&&&&&&&&M193.304,408.261V462h-17.913&v-53.739H193.304z&&&&&&&&&M264.957,408.261V462h-17.914v-53.739H264.957z&&&&&&&&&M300.783,408.261V462h-17.914v-53.739H300.783z&&&&&&&&&M229.13,408.261&V462h-17.913v-53.739H229.13z&&&&&&&&&M336.609,408.261V462h-17.914v-53.739H336.609z&&/&&&&&&&/group&&&&&&&group&android:name=&top&&&&&&&&&&&&path&&&&&&&&&&&&&android:name=&wires_top&&&&&&&&&&&&&&android:fillColor=&#000000&&&&&&&&&&&&&&android:pathData=&&&&&&&&&&M193.304,50v53.739h-17.913V50H193.304z&&&&&&&&&M264.957,50&v53.739h-17.914V50H264.957z&&&&&&&&&M300.783,50v53.739h-17.914V50H300.783z&&&&&&&&&M229.13,50v53.739h-17.913V50H229.13z&&&&&&&&&M336.609,50v53.739&h-17.914V50H336.609z&&&/&&&&&&&/group&&&&&&&group&android:name=&right&&&&&&&&&&&&path&&&&&&&&&&&&&android:name=&wires_right&&&&&&&&&&&&&&android:fillColor=&#000000&&&&&&&&&&&&&&android:pathData=&&&&&&&&&&M408.261,318.695H462v17.914h-53.739V318.695z&&&&&&&&&M408.261,247.043H462v17.914h-53.739V247.043z&&&&&&&&&M408.261,211.217&H462v17.913h-53.739V211.217z&&&&&&&&&M408.261,282.869H462v17.914h-53.739V282.869z&&&&&&&&&M408.261,175.391H462v17.913h-53.739V175.391z&&/&&&&&&&/group&&&&&&&group&android:name=&left&&&&&&&&&&&&path&&&&&&&&&&&&&android:name=&wires_left&&&&&&&&&&&&&&android:fillColor=&#000000&&&&&&&&&&&&&&android:pathData=&&&&&&&&&&M50,318.695h53.739v17.914H50V318.695z&&&&&&&&&M50,247.043h53.739v17.914H50V247.043z&&&&&&&&&M50,211.217h53.739v17.913H50V211.217z&&&&&&&&&M50,282.869&h53.739v17.914H50V282.869z&&&&&&&&&M50,175.391h53.739v17.913H50V175.391z&&/&&&&&&&/group&&&&&/vector&&
接下来，我们需要为每个动画类型创建animator文件。在本次示例中，每组线路各使用一个animator，这就意味着共需要四个animator。以下代码所示为上方线路的动画效果，大家还需要为下、左、右线路设定类似的效果。每个animator XML文件都被包含在了本项目的示例代码当中。
&&?xml&version=&1.0&&encoding=&utf-8&?&&&set&xmlns:android=&http://schemas.android.com/apk/res/android&&&&&&&&objectAnimator&&&&&&&&&android:propertyName=&translateY&&&&&&&&&&android:valueType=&floatType&&&&&&&&&&android:valueFrom=&0&&&&&&&&&&android:valueTo=&-10&&&&&&&&&&android:repeatMode=&reverse&&&&&&&&&&android:repeatCount=&infinite&&&&&&&&&&android:duration=&250&&/&&&/set&&
如大家所见，propertyName被设定为translateY，这意味着该动画将沿Y轴方向移动。而valueFrom与valueTo则控制着位移的起点与终点。通过将repeatMode设置为reverse而repeatCount设置为infinite，整个动画会一直循环下去，其效果则在VectorDrawable处体现出来。该动画的duration被设定为250，其时长单位为毫秒。
为了将该动画应用到自己的可绘制文件当中，大家需要创建一个新的animated-vector XML文件，从而将这些animator分配给各VectorDrawable组。以下代码的作用是创建该animated_cpu.xml文件。
&?xml&version=&1.0&&encoding=&utf-8&?&&&animated-vector&xmlns:android=&http://schemas.android.com/apk/res/android&&&&&&android:drawable=&@drawable/vector_drawable_cpu&&&&&&&&&&target&&&&&&&&&android:animation=&@animator/pulse_top&&&&&&&&&&android:name=&top&&/&&&&&&&&&target&&&&&&&&&android:animation=&@animator/pulse_right&&&&&&&&&&android:name=&right&&/&&&&&&&&&target&&&&&&&&&android:animation=&@animator/pulse_left&&&&&&&&&&android:name=&left&&/&&&&&&&&&target&&&&&&&&&android:animation=&@animator/pulse_bottom&&&&&&&&&&android:name=&bottom&&/&&&/animated-vector&&
当所有必要的XML文件都已经准备完成后，大家就可以将animated_cpu.xml加入到ImageView当中进行显示了。
&ImageView&&&&&android:id=&@+id/cpu&&&&&&android:layout_width=&64dp&&&&&&android:layout_height=&64dp&&&&&&android:src=&@drawable/animated_cpu&&/&&
要开始播放动画效果，大家需要从ImageView当中获取Animatable实例并调用start。
&ImageView&mCpuImageView&=&(ImageView)&findViewById(&R.id.cpu&);&Drawable&drawable&=&mCpuImageView.getDrawable();&if&(drawable&instanceof&Animatable)&{&&&&&((Animatable)&drawable).start();&}&
在start被调用之后，CPU图形当中的线路图形就会开始移动&&整个过程只需要使用少量Java代码即可实现。
3.&Vector Drawables的变化方式
对于VectorDrawable来说，最常见的一种使用方式就是将一个图形转化至另一个图形，例如操作栏中的图标由汉堡变成箭头。要做到这一点，源与目标path二者都必须具备同样的格式以保证元素数量上的一致。在本次示例中，我们将如前文图片所示尝试将左箭头转化为右箭头。
&string&name=&left_arrow&&M300,70&l&0,70&-70,-70&0,0&70,-70z&/string&&&&string&name=&right_arrow&&M300,70&l&0,-70&70,70&0,0&-70,70z&/string&&
接下来，大家需要利用path为left_arrow建立一个初始drawable。在示例代码中，我们将其命名为vector_drawable_left_arrow.xml。
&vector&xmlns:android=&http://schemas.android.com/apk/res/android&&&&&android:height=&64dp&&&&&android:width=&64dp&&&&&android:viewportHeight=&600&&&&&android:viewportWidth=&600&&&&&&&&&path&&&&&&&&android:name=&left_arrow&&&&&&&&&android:fillColor=&#000000&&&&&&&&&android:pathData=&@string/left_arrow&/&&/vector&&
CPU动画与这里提到的图形变化示例之间，最主要的区别就体现在animator_left_right_arrow.xml文件当中。
&?xml&version=&1.0&&encoding=&utf-8&?&&&set&xmlns:android=&http://schemas.android.com/apk/res/android&&&&&&&&&&objectAnimator&&&&&&&&&android:duration=&1000&&&&&&&&&&android:propertyName=&pathData&&&&&&&&&&android:valueFrom=&@string/left_arrow&&&&&&&&&&android:valueTo=&@string/right_arrow&&&&&&&&&&android:valueType=&pathType&&&&&&&&&&android:repeatMode=&reverse&&&&&&&&&&android:repeatCount=&-1&/&&&&&/set&&
大家可能已经注意到了，valueFrom与valueTo两项属性会引用左箭头与右箭头的path数据，valueType被设定为pathType而propertyName则被设定为pathData。当以上设定完成之后，该animator将明确如何将一组path数据转化为另一组。当该animator结束之后，我们还需要利用新的animated-vector对象将VectorDrawable分配至objectAnimator。
&&?xml&version=&1.0&&encoding=&utf-8&?&&&animated-vector&xmlns:android=&http://schemas.android.com/apk/res/android&&&&&&android:drawable=&@drawable/vector_drawable_left_arrow&&&&&&&&&&target&&&&&&&&&android:name=&left_arrow&&&&&&&&&&android:animation=&@animator/animator_left_right_arrows&&/&&&/animated-vector&&
最后，大家还需要将该动画drawable分配至ImageView，而后在自己的Java代码中开始运行。
&&ImageView&&&&&&android:id=&@+id/left_right_arrow&&&&&&&android:layout_width=&64dp&&&&&&&android:layout_height=&64dp&&&&&&&android:layout_below=&@+id/cpu&&&&&&&android:src=&@drawable/animated_arrow&&/&&&&mArrowImageView&=&(ImageView)&findViewById(&R.id.left_right_arrow&);&&drawable&=&mArrowImageView.getDrawable();&&if&(drawable&instanceof&Animatable)&{&&&&&&((Animatable)&drawable).start();&&}&
正如大家所见，VectorDrawable类非常易于使用而且允许开发者以自定义方式实现大量简单的动画效果。尽管VectorDrawable类目前只适用于运行有Android 5.0以及更高版本的设备，但随着更多设备开始支持Lollipop及其后续Android版本，其必将发挥更为重要的作用。
【编辑推荐】
【责任编辑： TEL：（010）】
大家都在看猜你喜欢
聚焦热点头条热点热点
24H热文一周话题本月最赞
讲师：90650人学习过
讲师：132128人学习过
讲师：152714人学习过
精选博文论坛热帖下载排行
随着互联网的迅速发展，几乎所有工具软件和程序语言都支持的正则表达式也变得越来越强大和易于使用。本书是讲解正则表达式的经典之作。本书...
订阅51CTO邮刊查看: 774|回复: 195
svg矢量图绘制以及转换为Android可用的VectorDrawable资源
TA的每日心情困 11:11签到天数: 136 天连续签到: 1 天[LV.7]常住居民III帖子交易币下载币
项目需要 要在快速设置面板里显示一个VoWiFi图标（为了能够区分出来图形，我把透明的背景填充为黑色了）
file:///E:/hcz10/Documents/My%20Knowledge/temp/5fd139e8-7e6a-4a24-83e6-381c6c_files/295a0fdd-d44c-45b9-9728-02fdd2974661.png
file:///E:/hcz10/Documents/My%20Knowledge/temp/5fd139e8-7e6a-4a24-83e6-381c6c_files/9e252e29-f8e6-474e-9cca-ad66ee321157.png
由于普通图片放大后容易失真，这里我们最好用矢量图（SVG(Scalable Vector Graphics)）来做图标，而系统状态栏图标多是用vectorDrawable绘制，所以我们的最终目的就是绘制一个上图中样式的 VectorDrawable xml图标。尤其是这种资源文件体积小放大又不失真，干嘛不用呢。
VectorDrawableAndroid L开始提供了新的API VectorDrawable 可以使用SVG类型的资源，也就是矢量图。在xml文件中的标签是&vector&
google官方API介绍：
This lets you create a drawable based on an XML vector graphic. It can be defined in an XML file with the &vector& 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& &
android:name=&rotationGroup&
android:pivotX=&300.0&
android:pivotY=&300.0&
android:rotation=&45.0& &
android:name=&v&
android:fillColor=&#000000&
android:pathData=&M300,70 l 0,-70 70,70 0,0 -70,70z& /&
显示效果（背景色应为透明）
如果想了解绘制原理，调至请调至文末点击W3C的连接。
接下来介绍一些常用的svg绘图工具
1.Inkscape开源的多平台矢量图绘图工具，支持windows OS X Linux。支持导出为svg等格式图片，功能强大，与后面两个将要介绍的比较就是体积有点大，安装包就接近百兆了。
另外用这个生成的SVG文件，会带一些默认的属性，转化成VectorDrawable以后xml文件里也会有一些默认的属性，虽不影响显示效果，但会多出一些不必要的代码。
工作界面：
file:///E:/hcz10/Documents/My%20Knowledge/temp/5fd139e8-7e6a-4a24-83e6-381c6c_files/fb1994e0-cfe2-462e-a203-3a13b96894bf.png
2.Boxy SVG是一个Chrome应用（推荐）。支持导入，另存为，可以选中单个控件调整属性等。可能不好的地方就是你得安装Chrome浏览器吧，还有下载这个应用的时候得FQ。
file:///E:/hcz10/Documents/My%20Knowledge/temp/5fd139e8-7e6a-4a24-83e6-381c6c_files/58a6564f-df25-48b0-84c2-72b.png
3.Janvas - The Online Vector Graphics Editor也是Chrome应用，不过其实就是一个链接，打开后指向下面的地址
但是这个在线编辑器好像只能打开和保存文件到google driver，不推荐
file:///E:/hcz10/Documents/My%20Knowledge/temp/5fd139e8-7e6a-4a24-83e6-381c6c_files/c706cad8--95f0-2.jpg
4.？？这个东西没找到名字，点击下面的连接试用。添加到收藏夹，随时可用。便捷。
转换为VectorDrawable找到两个在线转换的工具，都是Github上的开源项目。
1.Android SVG to VectorDrawableConvert SVG to Android VectorDrawable XML resource file.
可能是这个工具开发比较早，有很多Star，基本的图形转换是可以的，但是，不支持文字！也就是说上面的图，如果我们转换的话，得到的结果只是一个椭圆，文字会丢失。
在线工具：
源码地址：
file:///E:/hcz10/Documents/My%20Knowledge/temp/5fd139e8-7e6a-4a24-83e6-381c6c_files/4aa736d9-f-b5b2-a26fb02d39a7.png
2.SvgToVectorDrawableConverter.WebBatch converter of SVG images to Android VectorDrawable XML resource files.
这个就比较好了，支持文本转换。
在线工具：
源码地址：
file:///E:/hcz10/Documents/My%20Knowledge/temp/5fd139e8-7e6a-4a24-83e6-381c6c_files/-cf76-482f-c2c51.png
效果图这里我把颜色改回了白色。使用的是Boxy SVG绘制，SvgToVectorDrawableConverter.Web转换。
Android Studio支持直接预览VectorDrawable矢量图，有了实时预览，也方便进行一些简单的修改。
file:///E:/hcz10/Documents/My%20Knowledge/temp/5fd139e8-7e6a-4a24-83e6-381c6c_files/bbec-4997-bee6-3bba335cf88b.png
这个图标最后应用到下拉的快速设置里面，在手机上的效果图就不上了。
展示一张少复杂的图吧：
总结本文简单介绍了几款工具，目的能让新手快速的了解一下如何制作出自己需要的矢量图资源文件，在有需要做一张应用到Android应用/系统的矢量图时不至于措手不及。当然如过你牛逼到直接用记事本“绘图”的话，本文应该不适合你。
我发现我特别喜欢发掘一些能够提高生产力的小工具啊，哈哈哈。
其他知其然不知其所以然？想要了解的原理，跳转到W3C查看Scalable Vector Graphics (SVG) 1.1 (Second Edition)
免责声明 []
1、文章内容所有言论和图片纯属会员个人意见，与本论坛立场无关;
2、文章内容有可能转载自其它媒体，本站并不赞同其观点和对其真实性负责;
3、如文章内容侵犯到任何法规、版权等问题，请立即告知本站，本站将及时予与删除并致以最深的歉意;
4、内容仅供学习交流不得用于任何商业用途,下载试用请于24小时内自行删除,因使用所造成的损失全部由使用者本人承担;
该用户从未签到帖子交易币下载币
名动一方, 积分 272, 距离下一级还需 128 积分
名动一方, 积分 272, 距离下一级还需 128 积分
支持起易！！
该用户从未签到帖子交易币下载币
编程初步, 积分 2, 距离下一级还需 28 积分
编程初步, 积分 2, 距离下一级还需 28 积分
支持起易！！
TA的每日心情开心 11:00签到天数: 3 天连续签到: 1 天[LV.2]偶尔看看I帖子交易币下载币
名动一方, 积分 223, 距离下一级还需 177 积分
名动一方, 积分 223, 距离下一级还需 177 积分
谢谢楼主，共同发展
TA的每日心情顶你 13:22签到天数: 1 天连续签到: 1 天[LV.1]初来乍到帖子交易币下载币
名动一方, 积分 239, 距离下一级还需 161 积分
名动一方, 积分 239, 距离下一级还需 161 积分
小学生的福音
TA的每日心情擦汗 03:27签到天数: 1 天连续签到: 1 天[LV.1]初来乍到帖子交易币下载币
编程名人, 积分 729, 距离下一级还需 71 积分
编程名人, 积分 729, 距离下一级还需 71 积分
感谢楼主，万岁
该用户从未签到帖子交易币下载币
编程初步, 积分 12, 距离下一级还需 18 积分
编程初步, 积分 12, 距离下一级还需 18 积分
加油!!!!!!!!!!!!!!!!!!!
该用户从未签到帖子交易币下载币
编程初步, 积分 6, 距离下一级还需 24 积分
编程初步, 积分 6, 距离下一级还需 24 积分
感谢楼主，万岁
该用户从未签到帖子交易币下载币
编程初步, 积分 0, 距离下一级还需 30 积分
编程初步, 积分 0, 距离下一级还需 30 积分
起易有你更精彩
TA的每日心情奋斗 07:37签到天数: 2 天连续签到: 1 天[LV.1]初来乍到帖子交易币下载币
名动一方, 积分 293, 距离下一级还需 107 积分
名动一方, 积分 293, 距离下一级还需 107 积分
感谢楼主，万岁
站长推荐 /1
请关注易锦教育公众号，课程研发、职业规划、最新通告、企业风采等全都在这里啦！-关注惊喜不断哦...
Powered by}