2. SVG

SVG

SVG:

Scaleable Vector Graphics 可伸缩矢量图形，这种图像格式在前端中已经使用的非常广泛了。

1. 矢量图形

SVG是W3C推出的一种开放标准的文本式矢量图形描述语言，它是基于XML的、专门为网络而设计的图像格式，SVG是一种采用XML来描述二维图形的语言，所以它可以直接打开xml文件来修改和编辑。

2. 位图图像

位图图像的存储单位是图像上每一点的像素值，因而文件会比较大，像GIF、JPEG、PNG等都是位图图像格式。

Bitmap(位图)通过在每个像素点上存储色彩信息来表达图像，而SVG是一个绘图标准。与Bitmap对比，SVG最大的优点就是放大不会失真。而且Bitmap需要为不同分辨率设计多套图标，而矢量图则不需要。

Vector:

在Android中指的是Vector Drawable，也就是Android中的矢量图，可以说Vector就是Android中的SVG实现(并不是支持全部的SVG语法，现已支持的完全足够用了)

Vector图像刚发布的时候，是只支持Android 5.0+的，自从Appcompat 23.2以后，Vector可以使用于Android 2.1以上的所有系统，只需要引用com.android.support:appcompat-v7:23.2.0以上的版本就可以了。(所谓的兼容也是个坑爹的兼容，即低版本非真实使用SVG，而是生成PNG图片)

Vector Drawable：

Android 5.0 发布的时候，Google提供了Vector的支持，即Vector Drawable类。
Vector Drawable相对于普通的Drawable来说，有以下几个好处：

• Vector图像可以自动进行适配，不需要通过分辨率来设置不同的图片。
• Vector图像可以大幅减少图像的体积，同样一张图，用Vector来实现，可能只有PNG的几十分之一。
• 使用简单，很多设计工具，都可以直接导出SVG图像，从而转换成Vector图像，功能强大。
• 不用写很多代码就可以实现非常复杂的动画 成熟、稳定、前端已经非常广泛的进行使用了。

Vector语法简介

通过使用它的Path标签，几乎可以实现SVG中的其他所有标签，虽然可能会复杂一点，但这些东西都是通过工具来完成的，所以并不用担心写起来会很复杂。
Path指令解析如下所示：

M = moveto(M x,y)：将画笔移动到指定的坐标位置，相当于android Path里的moveTo()
L = lineto(L x,y): 画直线到指定的坐标位置，相当于android Path里的lineTo()
H = horizontal line(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): 弧线，相当于arcTo()
Z = closepath(): 关闭路径(会自动绘制连接点和终点)

注意：关于这些语法，开发者不需要全部精通，而是能够看懂即可。

使用工具

1. 可以使用http://editor.method.ac/生成SVG图片，然后用http://inloop.github.io/svg2android/生成Vector Drawable
2. 使用Android Studio自带的工具生成SCGhttps://www.jianshu.com/p/d6c39f2dd5e7

静态Vector图像

1）生成图片
例如： 我们用as生成的一个图片如下：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="580dp"
    android:height="400dp"
    android:viewportWidth="580"
    android:viewportHeight="400">

    <path
        android:fillColor="#fff"
        android:pathData="M -1 -1 H 581 V 401 H -1 V -1 Z" />
    <path
        android:fillColor="url(#gridpattern)"
        android:pathData="M 0 0 H 100 V 100 H 0 V 0 Z" />
    <path
        android:fillColor="#fcfbf9"
        android:strokeColor="#000"
        android:strokeWidth="1.5"
        android:pathData="M 41.5 75.4375 H 220.5 V 198.4375 H 41.5 V 75.4375 Z" />
</vector>

解释头部的几个标签：
android:width \ android:height: 定义图片的宽高
android:viewportHeight \ android:viewportWidth: 定义图像被划分的比例大小，例如例子中的580，即把580大小的图像划分成580份，后面Path标签中的坐标，就全部使用的是这里划分后的坐标系统。
这样做有一个非常好的作用，就是将图像大小与图像分离，后面可以随意修改图像大小，而不需要修改PathData中的坐标。

2）使用图片，就当普通的图片使用就可以了。

<ImageView
    android:id="@+id/iv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:src="@drawable/vector_image"/>

或者代码设置：

ImageView iv = (ImageView) findViewById(R.id.iv);
iv.setImageResource(R.drawable.vector_image);
iv.setBackgroundResource(R.drawable.vector_image)

如果是Button，可以设置selector（写两个SVG的Drawable）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@drawable/selector1" android:state_pressed="true"/>
     <item android:drawable="@drawable/selector2"/>
</selector>

动态Vector

动态Vector才是Android Vector Drawable的精髓所在
animated-vector:只能5.+才能使用！！
如果是两个SVG进行动画，要注意两个SVG的节点一定要一样多（命令数要一样）

5.VectorDrawable的性能问题：

• Bitmap的绘制效率并不一定会比Vector高，它们有一定的平衡点，当Vector比较简单时，其效率是一定比Bitmap高的，所以，为了保证Vector的高效率，Vector需要更加简单，PathData更加标准、精简，当Vector图像变得非常复杂时，就需要使用Bitmap来代替了
  Vector适用于ICON、Button、ImageView的图标等小的ICON，或者是需要的动画效果，由于Bitmap在GPU中有缓存功能，而Vector并没有，所以Vector图像不能做频繁的重绘
• Vector图像过于复杂时，不仅仅要注意绘制效率，初始化效率也是需要考虑的重要因素