在 Android 中使用 SVG 矢量图

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

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

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

• 前言
• 如何使用
  • 下载好的文件是这样的
  • 把这个文件导入 AS 中即可使用
• SVG 绘制动画
  • • demo 演示
    • 使用的第三方库
  • 具体实现过程请看源码
  • SVGDemo

前言：

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