对于矢量图的调研, 最开始是始于对其占用iOS App的空间的好奇。笔者好奇一个问题: 利用矢量图能不能帮助iOS App减少整体空间?
iOS其实在很早的时候就已经支持矢量图的应用(XCode 6时代开始支持), 只不过因为大部分开发者沿用了以前@1x、@2x、@3x格式图的习惯, 并没有一个地方专门普及使用矢量图。当然, 还有另外一个原因就是iOS对复杂的矢量图支持的不是很好。
本文并没有特别深入的技术点, 仅仅只是笔者做的几个实验的总结和矢量图基础使用的教程普及~
矢量图和iOS
iOS中矢量图的使用方法
XCode支持矢量图一定要放置在xcasset文件中才能够生效, 操作步骤如下:
- 拖拽提前制作的PDF进入
XXX.xcassets中。 - 选择
Image Set下的参数选项Scale Factors为Single Vector或Vector With Overrides - 如果图形不在框框中, 拖入框框中(XCode某些版本不能自动对号入座)
Vector With Overrides是Single Vector的增强, 可以在放置完矢量图之后继续放置@1x、@2x和@3x的png格式的图片。放置的png会优先覆盖矢量图, 未放置对应倍率图片的设备才会使用矢量图对应生成的图片。
矢量图在iOS中的应用原理
iOS对矢量图的支持其实只是一种方便开发者的选择, 本质上在XCode编译的阶段矢量图会自动生成对应Target的@1x，@2x和@3x的png格式图像。在iOS实际运行中使用的图片实际上已经是png格式的图片了~
iOS下矢量图工作原理通俗的理解 - 放置在xcassets里的矢量图会自动根据设备编译成对应尺寸的图片, 如果是Generic iOS Device则会自动生成全尺寸的同名图片。
PS: 自动生成的@1x图会和矢量图的原始尺寸保持一致。
ThemeEngine下car文件矢量图能否减少空间
回归到最初的问题, 到底使用矢量图能不能帮助iOS App减少空间呢?
笔者用简单粗暴的实验来对比说明, 步骤如下:
- 使用pdf原始文件编译生成通用IPA
- 从生成的IPA文件中提取Asset.car文件
- 利用提取Asset.car文件
- 将提取出来的@1x、@2x、@3x放置回工程, 并删除原始pdf中重新编译
- 对比步骤1生成的car文件和步骤4生成的car文件大小
- 步骤一编译car大小(仅PDF) - 115KB
- 步骤四编译car大小(仅3张图) - 86KB
- 测试PDF尺寸 - 20KB
在iOS8.3以下, 相同压缩比例的条件下, 矢量图是无法帮助App减少空间。但是在iOS8.3以上, 利用xcassets可以避免多余的资源图片下载, 只下载对应的倍率的图片。因此, 严格意义下, 利用矢量图并不能帮助App节省空间。
In Xcode, specify target devices and provide multiple resolutions of images in the asset catalog.
You must use the asset catalog in order for resources to be sliced.
笔者未能完全参透这句话的意思, 只知道xcasset会根据不同的设备会有不同的解决方案, 但是不知道粒度会达到什么样的程度。笔者尝试过针对不同的模拟器编译, 只会生成对应的倍率图, 但是上传给App Store是通用格式的, 难道下载的过程中进行了一定的处理? 这个就需要一台越狱设备去验证了, 就靠各位读者大大了~
PS: 对iOS如何控制多余资源图片下载感兴趣的童鞋们, 可以找一台越狱设备, 将iOS 8.3以上的App给提取出来分析分析哈~ 记得分享哇~ \(o)/
题外探究之提取原理
<font color="red">回归主题, 开源库底层既然是苹果API, 那么就基本是一个黑盒子了。笔者既不能从暴露的API中分析出car的格式, 又不能判断iOS设备是否在执行中解压, 只好放弃</font>~
总结
矢量图严格意义上并不能帮助减少App的空间, 但是却使用起来非常的方便, 建议使用。iOS本质上并不支持矢量图, 但是在编译阶段会将矢量图转化成目标设备对应的尺寸图, 同时会利用xcassets的特性在iOS8.3以上设备下支持部分资源下载, 带到包瘦身的效果。每次都要让UI给多个尺寸的图, 肯定没有给一张方便吧? 当然, 前提是UI的童鞋是基于矢量图工具制作的图片的前提下~