SVG&WebP
SVG
SVG简介
可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。
SVG格式优点
- 图像文件可读，易于修改和编辑（理论上如此，但实际上却是因为各种不同的SVG档编辑器而可能存储成不易解读的SVG文件）
- 与现有技术可以互动融合。例如，SVG技术本身的动态部分（包括时序控制和动画）就是基于SMIL标准。另外，SVG文件还可嵌入JavaScript（严格地说，应该是ECMAScript）脚本来控制SVG对象
- SVG图形格式可以方便的创建文字索引，从而实现基于内容的图像搜索
- SVG图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果
- SVG图形格式可以用来动态生成图形。例如，可用SVG动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户
- 位图是事先已经画好的图片，所以适应性必然没有 SVG 好，同一张图片在不同分辨率下显示会有差异。
- SVG 的文件里存储了绘制图片的相关信息，所以我们能够对图片的线条有一个非常清晰的感知，这在做动画的时候特别有用。
- SVG 没有存储任何图像的像素信息，所以 SVG 的文件体积远小于传统的位图文件。
- SVG 的文件画出来的图像是矢量图，所以不会存在失真的问题，理论上支持任何级别的缩放。
SVG格式缺点（相较于优点，缺点可忽略不计~）
-
图片显示的时候会花费更多的时间消耗更多的资源
SVG 的方式是事先定义好怎么去画这个图，然后等要用的时候再把它去画出来，而使用传统的位图的话就是已经有了画出来的图，然后要用的时候直接把画好的图拿出来用。
-
SVG 并不太适合层次过于复杂细节过于繁多的图片
SVG IN ANDROID
Google在Android 5.X中提供了两个新API来帮助支持SVG:
- AnimatedVectorDrawable
- VectorDrawable
创建基于XML的SVG图形，并结合AnimatedVectorDrawable来实现动画效果
SVG 文件在 Android 中的载体是一个 vector 标签，而绘制图片的工作是在 path 子标签里面做的。
vector
| 属性 | 参数类型 | 默认值 | 描述 |
|---|---|---|---|
| width | dimen | 必填属性 | 图形的实际宽度，可在使用时根据需要再次定义 |
| height | dimen | 必填属性 | 图形的实际长度，可在使用时根据需要再次定义 |
| viewportHeight | float | 必填属性 | 定义画布的尺寸 |
| viewportWidth | float | 必填属性 | 定义画布的尺寸 |
path
| 属性 | 参数类型 | 默认值 | 描述 |
|---|---|---|---|
| pathData | String | 无 | 画图的核心所在，有一定的语法，根据它来绘制目标图形 |
| strokeColor | color | 透明 | 画笔的颜色 |
| name | String | 无 | 这一条path的name，在其他地方可以根据name来找到这一条path |
| strokeWidth | float | 0.0 | 画笔的宽度 |
| fillColor | color | 透明 | 用颜色填充绘制过的区域，如果图形是闭合的就直接填充，如果图形不是闭合的那么就将图形的起点和终点相连使其闭合然后填充 |
pathData
| 属性 | 操作 |
|---|---|
| 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 curveto(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() | 关闭路径 |
- 大写表示绝对定位，参照全局坐标系
- 小写表示相对定位，参照父容器坐标系
- 指令和数据间的空格可以省略
- 同一指令出现多次可以只用一个
Android vector标签 PathData 画图超详解
WebP
WebP 简介
WebP是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％ 的文件大小。
WebP 优势
- 具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量
- 具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一
- 提升网页加载速度，减少页面加载时间
- 节省数据存贮空间
WebP 分类
-
有损压缩 WebP
基于VP8视频编码中的预测编码方法来压缩图像数据，其基本步骤类似于JPEG压缩，主要包含格式转换、分割子块、预测编码、FDCT、量化、Z排列、熵编码 -
无损压缩 WebP
基于使用不同的技术对图像数据进行转换，包括：预测空间变换、色彩空间转换、使用调色板、多像素打包成一个像素、alpha值替换等技术。对于熵编码，则采用改进的LZ77-Huffman编码来紧凑稀疏值，它是一种对距离值的2D编码技术。
-
有损 WebP （支持透明）
这种编码允许对RGB频道的有损编码同时可对透明度频道进行无损编码。由于这种形式目前其他的格式还未能提供，所以目前需要使用透明度的话都会使用无损的PNG，导致大小膨胀。对于这类图片， WebP 提供了较好的压缩效果。相比有损的 WebP ，添加透明通道只增加22%的大小。
因此，将支持透明的PNG换成无损+支持透明的 WebP 可以平均节省60%-70%大小 -
动态 WebP
动态 WebP 的原理与GIF和APNG原理类似，每一帧记录变化区域的坐标、长宽、播放延时等用于还原并播放。支持动图能力。动态 WebP 相比GIF支持更丰富的色彩，并且也占用更小空间，更适应移动网络的动图播放。
WebP 对比
对比 PNG 原图、PNG 无损压缩、PNG 转 WebP （无损）、PNG 转 WebP （有损）的压缩[效果](https://isparta.github.io/compare- WebP /index.html#12345)可以得出结论：
- PNG 转 WebP 的压缩率要高于 PNG 原图压缩率，同样支持有损与无损压缩
- 转换后的 WebP 体积大幅减少，图片质量也得到保障（同时肉眼几乎无法看出差异）
- 转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数，不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题
WebP 工作原理
总结
WebP 作为一种新的图片格式，支持透明度，压缩比比jpg更高但显示效果却不输于jpg，官方评测quality参数为75均衡最佳。
PS:从Android 4.0+开始原生支持，但是不支持包含透明度，直到Android 4.2.1+才支持显示含透明度的 WebP 。如果应用需要兼容Android 2.3，那么需要额外的引入 .so 文件，apk的体积自然也会增加
