SVG 动画作为如今公众号生态端最炙手可热的动画形式，自 2016 年我和微信团队共同实验并颁布技术规则以来，已经累积在业内生成了数百亿 PV 的图形页面。尽管如此，在行业代码储备业已完备的情况下，「玄学现象」仍然屡见不鲜，亟需更多专业研究人士思索。

而有一个运营人比较典型容易遇到的问题是：为何我的代码或编辑器操作明明正确，可 SVG 动画仍然能看到固定的缝隙或时隐时现的缝隙？

新手应多检查图片自身问题

接触 SVG 时间较短的运营人和设计师，本身行业技能一般也相对较弱，出图切片容易在边界有透明像素或漏出白色、黑色边界线等，这类过于基础的制图质量问题应当作为优先排查对象。

切换到深色模式检查

是线？还是缝？这是两个概念，新手运营人往往没有进行相关性质判断的习惯。请将手机调整到深色模式，观察原「白线」/「缝隙」是否变色——不变色则说明白线来自图像自身，变色则说明这里存在结构缝隙或图像透明缝隙。

时隐时现的缝隙从何而来

如自动轮播，尤其带有一定缓动（easing）效果的 SVG 动画，如果你反复确认了图像和代码没有问题，却在图像边界观察到若隐若现的缝隙，其原因是：

• 设备硬件能力不足，如刷新率低等，导致 SVG 图形渲染时出现定位精确性偏差，而产生了肉眼可见的缝隙。

• 过分高频的对草稿图文的反复预览行为，导致本机微信中对应缓存过多，以及预览草稿被逐步限流访问，实际使得 SVG 动画播放卡顿，进而产生了肉眼可见的缝隙。

而第二条往往是更普遍的原因。具体深究，是因为 SVG 本意为 Scalable Vector Graphics（可缩放矢量图），而当下主流的公众号图文内 SVG 主要通过将位图以 background-image 参数绑定在特定 viewbox 的 SVG 内。SVG 的运行在数学上是没有所谓「卡顿」的，因为 SVG 动画不存在「帧」的概念，都是由「补间动画」实现——即 SVG 的 XML 代码告知计算机动画运行的几个关键时间点，如起点、终点以及中间部分关键转折点等，由计算机自动补齐它的运行轨迹。

这种动画的优势在于体积小巧，当硬件条件充分情况下自然丝般顺滑。但同样的，当设备本身出现卡顿，尤其出现未达到明确跳帧，但存在卡顿的情况时，就容易发生时隐时现缝隙的问题了。

而这种情况下，主要优化方法是：

1）缩小对应 SVG 动画涉及位图素材的尺寸，由此缓释硬件渲染相关动画的压力。具体优化图片方式可以点击阅读《JZCreative：计育韬：公众号图像素材高清晰度应用指南》。

2）通过「背景图片」或者说「零高图片」在该自动画面底部垫一张背景色，避免画面存在「空」像素的渲染切换流程。由此这个缝隙的出现本身也会降低频次，提升 SVG 动画顺畅感。

同时也不必过于纠结这一现象，因为对一个新用户来说，图文都是首次打开，不存在运营人情形下的多次反复预览导致缓存溢出的问题。

固定存在的缝隙从何而来

排除设计基本功问题带来的设计图中透明缝隙的问题，固定缝隙一般源自：

• 应当采用相同尺寸应用的素材，没有统一尺寸，导致运行过程中前后的不一致性。

• margin-top 值设置错误形成错位或留空，这在很多编辑器中则反映为自定义参数的设置错误。

• 余量错误，如图文中期的某个伸长，最终展开量设置过多，也会导致伸长后的尾部存在缝隙。

• 参数质因数分解性差，也就是采用了一些难以被质因数分解的比较莫名其妙的宽度设计，具体请点击阅读《JZCreative：计育韬：新媒体图像设计参数质因数分解与屏幕物理像素的适配意义》。

• 设备适配性问题，有时候微信 APP 本身没有适配好手机系统也会出现一些固定缝隙，比如微信 APP 自身一直对 Pro Max 类最大尺寸 IPhone 极其较新操作系统适配能力弱，类似 flex 布局等容易出现缝隙。

解决方法上，一方面是修正本身存在的设计、排版错误，另一方面也还是建议利用好「背景图片」或者说「零高图片」思路，垫掉存在的对应缝隙。

固定存在的线从何而来

排除前面提到的本质为缝隙的情况，一般所谓的线是无法用 SVG 代码天然生成的，往往是图片设计自身存在的特定问题，但也可能有如下情况：

• 两个有半透明的画面叠加，交接处产生线的感官。尤其是无缝结构需要 -1px 错位以满足部分特殊安卓无缝的要求，因而如采用半透明内容衔接很容易出现相关问题，请更换设计方法。

• 漏出的结构或优先级过高的结构。有的线观察后会明显发现是某个图像的局部，这通常会因为前景之间存在空隙而漏出，或者该图像优先级过高，超越了下方接续结构并优先显示。所以遇到这样的问题时，请修正前景的设计画面，或对该结构采用自然优先级部署。

总之，固定的线往往基础视觉设计本身而出现，无需过多浪费时间在代码结构上。

计育韬

微信官方 SVG AttributeName 白名单开发者
上海市信息化青年人才协会会员
上海市知识分子联谊会会员
复旦大学奇点新媒体研究中心导师

著有：
设计学图书《Prezi 完全解读：从入门到精通》
传播学图书《硬核运营：技术流新媒体养成》