android5.0使用svg

在android5.0中新增了对使用svg矢量图支持，如果是5.0之前的版本，可以在github上找到对应的开源项目：https://github.com/japgolly/svg-android，今天只是针对android5.0来学习如何使用它。

什么是svg？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用来定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

SVG 是万维网联盟的标准

SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

可以看到svg是给予xml格式来描述的图形符号，所以是跨平台的，由于svg是矢量图，所以可以在放大的情况下不失真，并且使用svg来描述图形，在android开发中不需要任何的代码。

第一个demo

我们先来看看官方给出的一个例子，步骤如下：

1. 在drawable下新建一个svg表示的图片




2. 在imageView等标签中引用即可

可以看到只有两步操作就可以了，是不是很简单呢？？

drawable/heart.xml

<!-- res/drawable/heart.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="256dp"
    android:width="256dp"
    android:viewportWidth="32"
    android:viewportHeight="32">

    <!-- draw a path -->
<path android:fillColor="#8863ffac"
       android:pathData="M20.5,9.5
                        c-1.955,0,-3.83,1.268,-4.5,3
                        c-0.67,-1.732,-2.547,-3,-4.5,-3
                        C8.957,9.5,7,11.432,7,14
                        c0,3.53,3.793,6.257,9,11.5
                        c5.207,-5.242,9,-7.97,9,-11.5
                        C25,11.432,23.043,9.5,20.5,9.5z" />
</vector>

在imageView引用svg资源

<ImageView  android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/heart"
        />

此时效果如下：



可以看到这里使用了vector标签，这里有几个属性需要解释一下：

android:height=”256dp”和android:width=”256dp”分别用来定义该图片的高度和宽度。

android:viewportWidth=”32”和android:viewportHeight=”32”分别用来表示虚拟映射的宽度和高度，这两个值必须大于我们在pathData中使用的数值(否则该图形不会显示)，同时需要注意的是这两个值必须是一样的，否则图片会出现压缩或者放大的情况。

自定义一个矩形图形

下面我使用svg自定义一个矩形图形的显示

drawable/rect.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="500dp"
    android:width="500dp"
    android:viewportWidth="600"
    android:viewportHeight="600">

<path android:fillColor="#88ce95ff"
       android:pathData="M 100 100 L 300 100 L 300 300 L 100 300 z" />
</vector>

此时引用该svg资源将显示如下：




下面来说说这些pathData的含义：

这里其实使用的是path的一些指令：

M:表示将画笔移动到某一点M 100 100即移动到该点

L：表示划线到某一点L 300 100，即从100 100到300 100之间划线。

这样就形成了一个正方形。

常用的指令如下：

M = moveto(M X,Y) ：将画笔移动到指定的坐标位置

L = lineto(L X,Y) ：画直线到指定的坐标位置

H = horizontal lineto(H X)：画水平线到指定的X坐标位置

V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置

C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线

S = smooth curveto(S X2,Y2,ENDX,ENDY)

Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线

T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射

A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线

Z = closepath()：关闭路径

ps：这些指令都有对应的小写字母，大写表示绝对坐标，小写表示相对坐标

vector和path的属性总结

vector标签有如下一些属性：




android:alpha表示该图形的透明度,他的值在(0-255)之间。255表示全透明。经过验证该值需要和android:tint=”#ff0000”的值一起使用。

android:tint表示为设置色调，该值会覆盖paht标签中的android:fillColor值的作用、

android:tintMode表示色调叠加的模式，类似于java中的setXforMode方法。

具体我们看下面的图：



path中有如下属性：




同样一些对于一些常用的属性，我总结了如下面图:

group标签的使用

另外呢，对于path，我们还可以使用group标签，将这些path来组合起来绘制成一幅图形。

如下：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportWidth="500"
    android:viewportHeight="500"
    android:width="500px"
    android:height="500px">
    <group android:name="android">
        <path
            android:name="head"
            android:fillColor="#9FBF3B"
            android:pathData="M301.314,83.298l20.159-29.272c1.197-1.74,0.899-4.024-0.666-5.104c-1.563-1.074-3.805-0.543-4.993,1.199L294.863,80.53c-13.807-5.439-29.139-8.47-45.299-8.47c-16.16,0-31.496,3.028-45.302,8.47l-20.948-30.41c-1.201-1.74-3.439-2.273-5.003-1.199c-1.564,1.077-1.861,3.362-0.664,5.104l20.166,29.272c-32.063,14.916-54.548,43.26-57.413,76.34h218.316C355.861,126.557,333.375,98.214,301.314,83.298" />
        <path
            android:name="left_eye"
            android:fillColor="#FFFFFF"
            android:pathData="M203.956,129.438c-6.673,0-12.08-5.407-12.08-12.079c0-6.671,5.404-12.08,12.08-12.08c6.668,0,12.073,5.407,12.073,12.08C216.03,124.03,210.624,129.438,203.956,129.438" />
        <path
            android:name="right_eye"
            android:fillColor="#FFFFFF"
            android:pathData="M295.161,129.438c-6.668,0-12.074-5.407-12.074-12.079c0-6.673,5.406-12.08,12.074-12.08c6.675,0,12.079,5.409,12.079,12.08C307.24,124.03,301.834,129.438,295.161,129.438" />
        <path
            android:name="left_arm"
            android:fillColor="#9FBF3B"
            android:pathData="M126.383,297.598c0,13.45-10.904,24.354-24.355,24.354l0,0c-13.45,0-24.354-10.904-24.354-24.354V199.09c0-13.45,10.904-24.354,24.354-24.354l0,0c13.451,0,24.355,10.904,24.355,24.354V297.598z" />
        <path
            android:name="body"
            android:fillColor="#9FBF3B"
            android:pathData="M140.396,175.489v177.915c0,10.566,8.566,19.133,19.135,19.133h22.633v54.744c0,13.451,10.903,24.354,24.354,24.354c13.451,0,24.355-10.903,24.355-24.354v-54.744h37.371v54.744c0,13.451,10.902,24.354,24.354,24.354s24.354-10.903,24.354-24.354v-54.744h22.633c10.569,0,19.137-8.562,19.137-19.133V175.489H140.396z" />
        <path
            android:name="right_arm"
            android:fillColor="#9FBF3B"
            android:pathData="M372.734,297.598c0,13.45,10.903,24.354,24.354,24.354l0,0c13.45,0,24.354-10.904,24.354-24.354V199.09c0-13.45-10.904-24.354-24.354-24.354l0,0c-13.451,0-24.354,10.904-24.354,24.354V297.598z" />
    </group>
</vector>

此时绘制效果如下：




可以看到该android图标是有多个path绘制而成的。