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

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

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

VectorDrawable

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

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

工作界面:

官网:https://inkscape.org/

 

2.Boxy SVG

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

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

 

时间: 2024-09-27 17:46:37

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

WPF中材质制作:图片和矢量图之争

如果要做下面这样的一个东西作为背景.你会如何做呢? 图1. 目标背景效果 方案一,用PS画出来.然后把这个PNG图片作为背景色.这个方案可以,但是 如果想让这个线的颜色可配置呢?如何线的粗细不确定呢?无论哪个问题,用像 素图的方式都不好解决. 方案二,用WPF的矢量图绘制.这个方案可以比较容易地解决上面两个问题. 但是无论我们用哪种方式,都不会把整个图的大小画出来.而是画是一个最小 的图元,然后重复. 标量图方案 对于PS画的标量而言,有下面这样的一个图就可以了.然后在要绘制的区域内 无限重复.

jQuery 生成svg矢量二维码_jquery

jQuery 生成矢量svg二维码,并提供PNG,和SVG的页面下载,减轻服务端的压力. 代码如下所示: <html> <head> <title>jQuery 生成svg矢量二维码</title> </head> <body> <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></scr

用FLASH绘制矢量图以假乱真

用FLASH也可绘制较为真实的矢量图,首先找一张手机的图片,导入FLASH,作为背景图层. 新建图层,此图层建立在背景图层之上.可适当设置背景图层中图片的Alpha值,用线条工具勾画出手机的基本轮廓. 复制手机轮廓图层,将不必要的线条删除,为手机上色.注意保留原始轮廓图层以备以后使用.在这里使用渐变是关键,要仔细观察背景图片中的色彩和明暗程度.可用滴管工具汲取背景图层手机的颜色,这样可以使绘制出的手机更为真实.  为手机按键添加效果. 再次复制手机轮廓图层,删除不需要的线条,为手机按键勾边. 进

Android矢量图之VectorDrawable类自由填充色彩_Android

2014年6月26日的I/O 2014开发者大会上谷歌正式推出了Android L,它带来了全新的设计语言Material Design,新的API也提供了这个类VectorDrawable .也就是android支持SVG类型的资源也就是矢量图.想到矢量图,自然就会想到位图,何为矢量图,何为位图?先来说说位图吧,我们经常用的png,jpg就是位图了,他是由一个单元一个单元的像素组成的.当小icon遇到大屏幕手机的时候,icon如果被撑开那就是马赛克一样啦.这可不是我们想要的.而矢量图正式和它相

Android矢量图之VectorDrawable类自由填充色彩

2014年6月26日的I/O 2014开发者大会上谷歌正式推出了Android L,它带来了全新的设计语言Material Design,新的API也提供了这个类VectorDrawable .也就是android支持SVG类型的资源也就是矢量图.想到矢量图,自然就会想到位图,何为矢量图,何为位图?先来说说位图吧,我们经常用的png,jpg就是位图了,他是由一个单元一个单元的像素组成的.当小icon遇到大屏幕手机的时候,icon如果被撑开那就是马赛克一样啦.这可不是我们想要的.而矢量图正式和它相

如何玩转Android矢量图VectorDrawable_Android

从5.0(API等级21)开始,android开始支持矢量图了.关于什么是矢量图以及矢量图有什么优缺点不在本文的涉及范围之内,具体可以参考矢量图百科.不过这里要提一下它的优点: 保存最少的信息,文件大小比位图要小,并且文件大小与物体的大小无关任意放大矢量图形,不会丢失细节或影响清晰度,因为矢量图形是与分辨率无关的. 从以上两个优点来看,在项目中使用矢量图至少可以缩小我们apk包的尺寸,而且可以在屏幕适配时提供很大的方便,因为矢量图是分辨率无关的. 前面也说了,矢量图从21才开始支持.那么如果我想

如何玩转Android矢量图VectorDrawable

从5.0(API等级21)开始,android开始支持矢量图了.关于什么是矢量图以及矢量图有什么优缺点不在本文的涉及范围之内,具体可以参考矢量图百科.不过这里要提一下它的优点: 保存最少的信息,文件大小比位图要小,并且文件大小与物体的大小无关 任意放大矢量图形,不会丢失细节或影响清晰度,因为矢量图形是与分辨率无关的. 从以上两个优点来看,在项目中使用矢量图至少可以缩小我们apk包的尺寸,而且可以在屏幕适配时提供很大的方便,因为矢量图是分辨率无关的. 前面也说了,矢量图从21才开始支持.那么如果我

PHP绘制3D图形之自定义图形及矢量图

本篇介绍自定义及矢量图实例.首先绘制一个三尖角星体,分别由"前面","后面"和三个"侧面"组成. 自定义多边形 代码: <?php require_once('Image/3D.php'); $image = new Image_3D(); $image->setColor(new Image_3D_Color(255, 255, 255)); //创建光源 $light1 = $image->createLight('ligh

【译】在Asp.Net中操作PDF - iTextSharp - 绘制矢量图

原文 [译]在Asp.Net中操作PDF - iTextSharp - 绘制矢量图   在上一篇iTextSharp文章中讲述了如何将现有的图片插入PDF中并对其进行操作.但有时,你需要在PDF中绘制不依赖于任何图片文件的矢量图形.iTextSharp既包含了绘制简单矢量图功能,也包含了绘制复杂矢量图的功能.这篇文章将会帮助你入门.本系列文章之前的文章如下:       在ASP.NET中创建PDF-iTextSharp起步     在Asp.Net中操作PDF - iTextSharp - 使