自 2016 年微信团队与 JZ Creative Studio 共同制定并推出《微信下 SVG AttributeName 白名单》以来，数以万计的设计师、开发者、低代码平台已生成了百亿级 PV 的 SVG 作品
但对于更多顶端开发力量而言，SVG 形式的日益丰富也同时带来了对手机性能的极限压榨
SVG 超级作品不仅可能加载缓慢运行卡顿，甚至会导致手机严重发烫以及微信 APP 闪退……那么作为行业一线研究机构主理人，本期计老师将结合部分交付案例，和广大从业者聊一聊合理的优化策略，帮助你们尽可能地摆脱 SVG 作品卡顿问题，创作更丝滑的交互设计
1.素材压缩最基本也往往最有效的优化策略，分第三方压缩法、编辑器压缩法、640 压缩法 3 种
第三方压缩法：在确保素材本身清晰度得当的情况下（参考《公众号图片模糊？「无损」上传秘诀在此
》），将你的 PNG-24 1080 尺寸素材在一些专业第三方网站中进一步处理，比如 TINYPNG.COM 就是我们比较推荐的工具，可以将图片进一步以肉眼基本不可见的有损形式再压缩 20%-70% 的体积不等
编辑器压缩法：譬如头部品牌目前主流使用的E2.COOL 黑科技 SVG 编辑器，开启「压缩图片」功能后会以 Go 语言帮助用户进行图片压缩处理，这样既完成了素材压缩工作也实现了 SVG 交互开发本身
640 压缩法：这里请先观察一下 Apple 公众号的情况
图片又多又大的 Apple 推文内，图像一般不引用公众号素材库内原图地址，而是均转为一种「640」结尾的图床地址——《3 题辛辣拷问，Mac 请接招
》这是为什么呢？测试将同一张图上传至公众号，重新下载地址中的图片和640尾缀的图片，对比会发现它们一般有 5%-10% 的体积差距，这其中与官方图床 webp 格式的转制有关——那么在操作层面，将图片结尾的 0?wx_fmt=XXX 改为 640 即可
2.图片宽度的质因数分解随心所欲的图片尺寸设计，也会额外增加图文加载时候的图形渲染工作量
我注意到很多新入行的设计师并不理解显示终端物理分辨率和图像分辨率之间的关系，在制图过程中采用一些诡异而随意的画板宽度开展工作
由于任何图像在手机中进行展示，图像信号都必须经过转换生成符合面板输出的物理分辨率（具体硬件工作原理有多种形式），那么质因数分解效果不佳的图片被处理后会带来更严重的内容损失
轻者存在感官上的画质降低，重者在 SVG 运动中（包括 CSS 滑动）产生渲染刷新卡顿出现缝隙等问题
不妨来看几个比较典型的移动端设计图宽度值：1280/1080/750 等，他们的质因数分解分别是——1280：2222222251080：2223335750：23555对比之下有的设计师制图宽度竟然可以产生 11、13 之类的质因数分解结果，这尤其给 SVG 动画的刷新渲染增加了大量无意义的额外硬件运行负荷
3.高阶渲染（3D/混合模式等）《上海的朋友，人人都可以领一束专属花
》》目前 perspective 3D 作为热门的公众号排版模式，以其醉人的空间沉浸感频现各大头部品牌
而在实际开发过程中，我其实经常遇到滑动时缓存溢出，图文强制刷新的问题亟需调试，且 3D 悬浮体包含 <img> 弹出图的情况下这一现象更为常见
解决方案是主动拉开三维空间中不同渲染要素的距离，避免同屏内大量堆叠 3D 排版结构
这里分享几个近期我和同事们参与制作的 3D 案例，如果你注意到仍然有刷新问题欢迎私信告知我：1.LNG X JOJO：“欧拉欧拉欧拉欧拉欧拉


”2.3.三十而立，跃见未来 | 本土化征程档案解密4.小 红 花 × = ?5.蒂芙尼奖杯的传奇史诗6.如何诠释东方美学才不流于表面？劲霸男装的答案是______此外混合模式也同样是图形渲染一霸，虽然与 perspective 3D 相比它对硬件的要求低了很多，但计老师还是建议大家避免在一篇图文里大面积且高密度的应用到它
4.代码压缩没错，对金字塔顶端的开发者来说，代码也是需要压缩的
当你代码写得足够多，公众号草稿会出现一个代码不能超过「20M」的警告，而在实际操作过程中，代码行数也有大约 2W 行的限制……这些限制都要求我们这些超级开发者尽可能优化 SVG 代码的体积，比如避免路径转曲式创作、更多采用 <foreignObject>、格式化等
这里重点提一下「多叉树遍历」型 SVG 测试题的开发类型——一般不建议「真」遍历，而是通过一些分叉的合并将结果尽量控制在 120 种内，否则无论代码体积还是涉及的结果页素材体积都过于逼近图文展示的极限
5.倒序加载有的卡顿并不是代码本身造成的，而是交互设计意识的不足导致感官上出现了阅读障碍——比如「倒序加载」就是一个非常容易被开发者忽略的典型问题
以计老师主持开发的喜茶《王，榨，油，柑，BANG
》为例，从代码顺序层面来讲层层拨开遮罩后的结果页会先行加载，有一定几率被读者先看到
所以我将底层-中层-顶层的 opacity 都设置为 0，赋予分别从 0.9、0.6、0.3 秒开始的透明度 to=1 动画
《王，榨，油，柑，BANG
》由此「谜底」就不会先于「谜面」展示了
而这一问题频繁出现在有大量同屏互动的 SVG 作品中，一旦开发者遗漏对它的处理，就会使得第一次打开图文的用户面对长时间的画面倒序加载，误认为 SVG 卡住，直接破坏了原文的叙事结构
6.等待设计《注意：CIIE高能传送门，即将开启》注意到开场的「传送门正在加载中……」了吗？今年计老师一如既往地参加了GE中国的进博会全媒体工作，其中这篇《注意：CIIE高能传送门，即将开启》的开场需要预加载动态图和 SVG 内容，因此置入一个加载提示的「等待设计」
当用户网络环境较差，无法确保 GIF 和 SVG 动画同步启动时，这句提示就会逗留于画面中央直到后续内容加载准备就绪
开发细节并不复杂，通过自动 translate 控制它的移除和主画面的移入即可
包括前文案例提到过的 Apple 公众号图文《3 题辛辣拷问，Mac 请接招
》也有一个为 GIF 预加载而存在的等待设计——而在此之前，Apple 公众号在这方面的 SVG 设计是非常欠缺的，所以其图文一直以「第一次打开什么也看不到」而著称
7.更多策略在许多精彩的行业作品中，计老师还看到过诸如 GIF 接续控制法、动静分离法、雪碧图等值得一提的优化策略
如果你想自主学习更多行业 SVG 作品的开发技巧，欢迎访问 SVG 作品公益搜索引擎（http://www.isvg.com/）
在这个站点内，你还会了解到更多超级开发者们的天马行空的 SVG 创意和精妙绝伦的代码逻辑
-END-