在 Android 中使用 SVG 矢量图

本文为菜鸟窝作者 吴威龙 的连载

菜鸟窝是专业的程序猿在线学习平台，提供最系统的 Android 项目实战课程

如需转载，请联系菜鸟窝公众号（cniao5）,并注明出处。

[toc]

前言：

SVG 格式图片很多优点，但是 android 程序员关心的优点无非是：SVG 较 GIF、JPEG 的优势。
首先简要解释一下矢量图像格式和位图图像格式的区别。矢量图像用点和线来描述物体，所以文件会比较小，同时也能提供高清晰的画面，适合于直接打印或输出。而位图图像的存储单位是图像上每一点的像素值，因此一般的图像文件都很大，会占用大量的网络带宽。SVG 是一种矢量图形格式，GIF、JPEG 是位图图像格式。有了两者的概念后，SVG 较 GIF、JPEG 的优势显而易见。

• 任意放缩：
  用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
• 文本独立：
  SVG 图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
• 较小文件：
  总体来讲，SVG 文件比那些 GIF 和 JPEG 格式的文件要小很多，因而下载也很快。
• 超强显示效果：
  SVG 图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨力和打印分辨力。
• 超级颜色控制：
  SVG 图像提供一个 1 600 万种颜色的调色板，支持 ICC 颜色描述文件标准、RGB、线性填充、渐变和蒙版。

如何使用

这里推荐一个图标网站：阿里巴巴矢量图标库
搜索找到需要的图片，选择 svg 下载

这里写图片描述

下载好的文件是这样的：

这里写图片描述

把这个文件导入 AS 中,即可使用

这里写图片描述

这里写图片描述

注意导入后的 SVG 文件，和导入前是不一样的。

这里写图片描述

这样就可以和之前引用 jpg、png 图片那样使用 svg 矢量图了。

下面介绍一种炫酷的绘制动画效果。

SVG 绘制动画

demo 演示：

这里写图片描述

这里写图片描述

使用的第三方库

 //svg函数库
    compile 'com.jrummyapps:animated-svg-view:1.0.1'
    compile 'com.android.support:animated-vector-drawable:${latest_version}'

具体实现过程请看源码：

SVGDemo

《Android群英传》作者带你解锁设计布局的新姿势 http://mp.weixin.qq.com/s/k7gCBJpiXK0g8Ed2FVHQ3A