svg矢量图绘制以及转换为Android可用的VectorDrawable资源

简介: 项目需要 要在快速设置面板里显示一个VoWiFi图标(为了能够区分出来图形,我把透明的背景填充为黑色了) 由于普通图片放大后容易失真,这里我们最好用矢量图(SVG(Scalable Vector Graphics))来做图标,而系统状态栏图标多是用vectorDrawable绘制,所以我们的最终目的就是绘制一个上图中样式的Android VectorDrawable xml图标。

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

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

VectorDrawable

Android 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" >
<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文件里也会有一些默认的属性,虽不影响显示效果,但会多出一些不必要的代码。
工作界面:
 

2.Boxy SVG

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

3.Janvas - The Online Vector Graphics Editor

也是Chrome应用,不过其实就是一个链接,打开后指向下面的地址
但是这个在线编辑器好像只能打开和保存文件到google driver,不推荐

4.??

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

转换为VectorDrawable

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

1.Android SVG to VectorDrawable

Convert SVG to Android VectorDrawable XML resource file.
可能是这个工具开发比较早,有很多Star,基本的 图形转换是可以的,但是, 不支持文字!也就是说上面的图,如果我们转换的话,得到的结果只是一个椭圆,文字会丢失。

2.SvgToVectorDrawableConverter.Web

Batch converter of SVG images to Android VectorDrawable XML resource files.
这个就比较好了, 支持文本转换

效果图

这里我把颜色改回了白色。使用的是Boxy SVG绘制,SvgToVectorDrawableConverter.Web转换。
Android Studio支持直接预览VectorDrawable矢量图,有了实时预览,也方便进行一些简单的修改。
这个图标最后应用到下拉的快速设置里面,在手机上的效果图就不上了。
展示一张少复杂的图吧:

总结

本文简单介绍了几款工具,目的能让新手快速的了解一下如何制作出自己需要的矢量图资源文件,在有需要做一张应用到Android应用/系统的矢量图时不至于措手不及。当然如过你牛逼到直接用记事本“绘图”的话,本文应该不适合你。
我发现我特别喜欢发掘一些能够提高生产力的小工具啊,哈哈哈。

其他

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

 

相关文章
|
XML Android开发 数据格式
android中SVG 的使用姿势
android中SVG 的使用姿势
android中SVG 的使用姿势
|
8月前
|
Java Android开发
Android 保存资源图片到相册最新写法适用于Android10.0及以上
Android 保存资源图片到相册最新写法适用于Android10.0及以上
578 0
|
8月前
|
编解码 监控 前端开发
Android平台GB28181设备接入端如何降低资源占用和性能消耗
Android平台GB28181设备接入端如何降低资源占用和性能消耗?
|
8月前
|
Java Android开发
Android 中使用数组资源文件定义数组
Android 中使用数组资源文件定义数组
116 0
|
XML Java 程序员
插件化框架设计(二) Android 资源加载机制详解(一)
Android 提供了一种非常灵活的资源系统,可以根据不同的条件提供可替代资源。因此,系统基于很少的改造就能支持新特性,比如 Android N 中的分屏模式。这也是 Android 强大部分之一。本文主要讲述 Android 资源系统的实现原理,以及在应用开发中需要注意的事项。
152 0
|
10月前
|
存储 Android开发 开发者
关于安卓媒体资源变动监听(ContentResolver)应用
关于安卓媒体资源变动监听(ContentResolver)应用
178 0
|
11月前
|
XML Java Android开发
【Android】正确使用资源res文件
首先有的UI改颜色,没用,发现无法更改按钮背景颜色。 我的AS下载的是最新版本,Button按钮的背景颜色一直都是亮紫色,无法更改。 为什么呢? 首先在你的清单文件中看你应用的是哪个主题。
240 0
|
12月前
|
Web App开发 编解码 前端开发
Android | 音视频方向进阶路线及资源合集
但是系统相机和系统控件VideoView的局限性都是可定制型太差,系统相机的图像分辨率,视频码率以及VideoView的进度条等.
153 0
|
XML 编解码 C#
.NET MAUI 安卓 UI 资源设置
本文主要介绍使用 MAUI 开发安卓应用时,如何更换和处理 UI 资源:应用名称,图标,主题配色,状态栏,闪屏。
435 0
.NET MAUI 安卓 UI 资源设置