一.简介
概念
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 实战
转载请注明原文地址: https://ju.6miu.com/read-16533.html
