位图转化为矢量图

最新推荐文章于 2025-11-21 08:34:32 发布

原创最新推荐文章于 2025-11-21 08:34:32 发布 · 8.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#矢量图 #位图 #vector

2016-学习总结专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何将UI提供的位图转化为Android工程中的矢量图。首先通过VectorMagic工具将PNG图片转换为SVG格式，再导入Android Studio的drawable文件夹，完成矢量图资源的创建。

前言： 上一篇文章BottomNavigationView+ViewPager实现底部导航栏中的底部菜单项使用的图片是矢量图，AndroidStudio本身带了一些矢量图，但是有时候并不符合我们的需求。所以我们需要自己画矢量图，但是简单的矢量图还可以，path少pathData数据简单，稍微复杂一些的图就不那么容易弄了。我们希望把UI给的位图使用工具转化为矢量图，这样就简单多了。下面我演示一下把png图片转化为矢量图。

第一步：逆向思维——首先要思考当有矢量图图后，怎么导入工程的drawable文件夹下， 右键drawable文件夹——>new——>Vertor Assert，然后呈现你眼前的如下：
图1，使用系统自带位图

Asset Type默认选中Material Icon选项，这个选项表示使用AndroidStudio自带的矢量图；Name就是矢量图的名称；点击图中Icon的小安卓图标，可以进入矢量图库进行选择；Size是矢量图的尺寸，默认是24dp*24dp，勾选Override选项以后，可以自己设置大小；Opacity是图标的不透明度；最后一行的那个选项，设置图片是否需要镜像反转，当布局方向是RTL（不了解的可以百度一下），即从右到左布局时才有用。一般不勾选这个选项。
图2，选择本地文件

Asset Type勾选Local file表示使用本地导入的矢量图，括号已经注明，只能是SVG和PSD格式的文件，到这里，我们目标其实已经很明确了，只要把位图转化成SVG或者PSD格式的文件就可以了。

第二步：位图转化为SVG， 用png转化为SVG格式文件，需要下载一个工具——VectorMagic，我这里是下载了一个中文破解版的，当然也可以下载其他网站的VectorMagic，只要能用就可以；使用VectorMagic工具的步骤如下：
第一步，选择图片第二步，自动处理第三步，如无特殊设置直接点击进按钮即可第四步，将处理结果保存为svg格式的文件

上面四步没有复杂的操作，第四步需注意，另存为时，文件格式为svg格式。 我是message_normal.png图片做处理的，处理后生成一个message_normal.svg文件
处理结果

第三步：将svg文件导入AndroidStudio中 如第一步中的图2所示，选择本地的文件，找到message_normal.svg，点击next，接下来的一个页面不用做任何处理，直接点击Finish就可以了，然后就会在drawable文件夹下生成一个ic_message_normal.xml的文件，打开文件就可以在androidstudio的Preview中看到效果。

Ok，到这里，文章就结束了，有不对的地方欢迎指正。