Android资源优化之拥抱svg

---

一.简介

概念

SVG 意为可缩放矢量图形（Scalable Vector Graphics），是使用 XML 来描述二维图形和绘图程序的语言

原理

将xml语言解析后配合Android path，实现图片渲染及动画

---

二.优点与缺点

优点

• 可直接用xml文件打开，加载速度提升明显
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大
• SVG 可以与 Java 技术一起运行

缺点

• Android 原生svg 只支持 Android 5.0及其以上版本
• 使用Pictrue进行绘制，不支持硬件加速导致渲染导致性能远不如PNG
• 制作图片以及完成相应动画所需要的学习成本

---

三.基本语法

关键字语义

• 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()：关闭路径

注意事项

• 坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下。
• 所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系
• 指令和数据间的空格可以省略
• 同一指令出现多次可以只用一个

---

四.svg格式

图.

<vector xmlns:android="http://schemas.android.com/  apk/res/android"
     android:width="24dp" //图片实际宽度
     android:height="24dp"// 图片实际高度
     android:viewportWidth="24.0"//SVG图形划分比例
     android:viewportHeight="24.0">
 <path
     android:fillColor="#ffffffff"//填充画笔颜色
     android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/> //具体路径
 </vector>

上面的代码，将24dp划分为24份，如果在绘制图形时使用坐标(12,12)，则意味着该坐标位于该SVG图形正中间。所以，如果width，height的比例与viewportHeight，viewportWidth的比例不一致，就会使图形发生压缩，形变。

---

五.进阶使用 - AnimatedVectorDrawable

给svg加入动画

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/twolines">
<target
    android:name="path1"
    android:animation="@animator/path3" />

<target
    android:name="path2"
    android:animation="@animator/path4" />

新建两个ObjectAnimator,根据不同的动画效果封装相应的动画效果。

<ImageView
    android:id="@+id/iv_lines"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/path_anim" />

在布局文件中设置这个动画文件为背景图片

Drawable lines = iv_lines.getDrawable();
    if (lines instanceof Animatable) {
        ((Animatable) lines).start();
    }

代码中调用

---

六.扩展阅读

Airbnb开源库 —— lottie-android

概念:

Lottie是一个针对android和ios的移动库，这个库的主要作用就是在手机本地去渲染在AE（Affter Effects）上通过Bodymovin导出的json。

原理：

利用json数据，进行path解析，渲染图片及动画。

优势:

由于是json数据，可直接与服务器交互，动态变更图标，需要时实时请求就好

---

参考资料

• github:lottie-android
• 微信svg解决方案
• Android svg 实战