SVGA 预览：如何跨平台对比一个 SVGA 文件

SVGA 格式由五套完全独立的播放器各自实现——SVGAPlayer-Web、SVGAPlayer-Web-Lite，以及官方 Android、iOS、Flutter 库——它们支持的能力并不完全一致。同一个文件在一个播放器里看起来完美无缺，换到另一个播放器里可能悄悄丢失 matte 遮罩、内嵌音频，甚至连形状都不对。SVGA 预览——/preview 这个工具——就是为了在文件正式使用前抓出这类问题：它在你的浏览器里同时跑起每个平台真实的解析和绘制代码，用同一个文件、同一时刻做对比。这篇教程把 SVGA 预览页面上的每一块都过一遍。

第一步：加载文件

SVGA 预览页面顶部是文件输入区。你可以把 .svga 文件拖进去或点击选择文件，也可以直接载入一个文件直链（下一步详细讲），或者点击四个内置样例中的任意一个，不用自己准备文件也能马上体验。每个样例都专门用来演示一类跨端差异：Matte 遮罩（只有支持 matte 合成的播放器才会渲染出精灵本应呈现的形状）、音频键名（内嵌音频只有部分播放器会准备好播放）、布局尺寸不一致（精灵的布局框和它的位图尺寸对不上）、旧版 1.x（一些较新的播放器已经不再支持的老版本 SVGA 格式）。所有处理都发生在你本地的浏览器标签页里，不会上传到任何地方。

这篇教程用一个真实的礼物动画来演示，而不是内置样例——因为它展示的是真实生产环境里的 bug 长什么样：远没有形状渲染错误那么明显，而这恰恰是这个页面存在的意义。

第二步：用直链加载文件

除了上传，你也可以直接在 URL 输入框里粘贴一个直链，点击载入链接。只要对方服务器允许浏览器发起 CORS 请求，任何 .svga 直链都可以这样加载——这里没有服务端代理帮你转发请求，所以如果对方服务器屏蔽跨域请求，就是加载不出来。这个方式很适合直接从 CDN 或同事分享的链接拉取文件，不用先存到本地磁盘。

第三步：查看文件信息

文件加载后，文件信息面板会展示原始尺寸、文件体积、帧数、FPS、播放时长、预估运行时内存、位图数量，以及 SVGA 格式版本（1.x 或 2.x）。在深入研究渲染表现之前，先在这里做一次快速体检。

第四步：双栏对比两个播放器

同步对比舞台默认是双栏视图：两个面板，各自带一个平台下拉框，同步播放。六个画像——SVGAPlayer-Web、SVGAPlayer-Web-Lite、Android、iOS、Flutter，以及 SVGA DIY 自己的渲染器——任选两个，用下方的共享时间轴拖动或播放，逐帧对比。

用默认的 SVGAPlayer-Web 对 SVGAPlayer-Web-Lite 组合对比这个文件——一款狮子造型的礼物动画——两个面板乍一看完全一样。这很真实：大多数跨端差异都不像"渲染成了错误的形状"那么显眼，光靠肉眼对比两个面板恰恰会漏掉这类问题。接下来两步会展示怎么抓出肉眼看不出来的差异。

第五步：逐帧精确定位

两个面板下方的播放控制条，除了播放按钮和共享时间轴，还有上一帧和下一帧按钮。当某个差异只出现在特定一帧——一次转场、一道扫过去的高光、一个形状短暂变化——逐帧前进比拖动滑杆或等播放循环回来精确得多。右侧的帧数读数会一直显示你当前具体停在第几帧。

第六步：用像素差异量化差别

这一步两个面板才真正开始显出不一样。点击像素差异（只在双栏视图下可用），两个渲染结果会叠加对比，每一个不一致的像素都会被高亮标成洋红色——不管差异出在颜色还是透明度上都是同一个颜色——工具栏上还会实时显示差异像素的具体数量。Lite 那一侧的角色边缘会出现一圈细细的洋红色轮廓：两个库在渲染这个文件边缘时确实存在真实的差异，刚才还完全看不出来，现在一眼就能看见。

第七步：一次对比全部六个平台

点击全部平台，对比舞台会展开成六宫格——每个画像同时渲染同一个文件、同一帧。上一步那圈边缘差异太细微，放到六宫格里根本看不出来（它只有在双栏专属的像素差异模式下才会显形），所以这一帧六个面板看起来都是一致的——这就是老实的结果，但这个视图依然有用：如果差异大到肉眼可见（比如某个效果整个丢失，或者布局完全对不上），一次性扫一遍全部实现正是抓这类问题的办法。六路实时渲染的开销比双栏大得多，所以工具会提示：不需要同时看六个的时候，双栏视图内存占用更低、检查也更流畅。

第八步：读懂兼容体检报告

兼容体检报告面板会对加载的文件跑一组自动检查，把真实检出的问题列出来，每条都带严重程度标签、通俗易懂的说明，以及具体受影响的平台。这个文件一共检出了 38 条——这是和上一步像素差异发现的问题完全独立的另一个发现，也正好说明这个面板存在的意义：它检出部分帧在协议层缺失了显式的透明度数值，导致 Android 和 iOS 有可能推断出和作者原意不同的默认值。Android 和 iOS 在这里是根据真实源码模拟出来的，并不是真的在你的浏览器里跑起来——所以这是一类只有兼容体检报告才能抓到、而两个真实渲染的播放器之间做像素对比永远抓不到的问题。不是每个文件都会有问题——如果没有检出任何问题，面板会直接告诉你；但这个文件恰好提醒了一件事：一个文件看起来完全正常，也可能藏着真实的、可检测出来的 bug。

每条问题卡片上都有一个用修改器打开并修复按钮。它只是跳转到 SVGA DIY 修改器的一个快捷方式——值得知道的是它只会打开一个全新的修改器页面，并不会自动把当前加载的文件带过去，到了修改器里还需要重新加载一次同一个文件。

第九步：选择背景和画布尺寸

右侧的画布设置面板控制的是对比舞台本身的呈现方式，和文件内容无关。背景可以切换成透明棋盘格、白色、黑色，或者用旁边的取色器选一个自定义颜色。画布尺寸提供三个设备预设——iPhone 15 Pro、iPhone SE、Pixel 8——你也可以自己填一个精确的宽度和高度，单边最大到 4096px。切换成白色背景加 iPhone 15 Pro 预设，立刻就能看到默认棋盘格正方形看不出来的东西：在一块真实的、纵向的手机屏幕上，图案周围到底空出了多少空白。

第十步：匹配真实画布比例和缩放模式

画布尺寸下方是画布比例快捷按钮（9:16、16:9、1:1、4:3），一键把画布调整成常见比例——保留当前宽度，自动算出对应高度——和上面的设备预设是相互独立的两套工具。把它和缩放模式搭配使用：等比适应会把内容完整装进画布、四周留白；拉伸填充会把内容强行拉伸铺满整个画布（比例被破坏）；等比填充则是把内容放大到刚好盖满整个画布，多出来的部分被裁掉——和 CSS 里的 background-size: cover 是同一个取舍。切换成 16:9 的画布并选择等比填充，图案的上下两端会被裁掉，让画面刚好铺满这个宽画布，而不是像等比适应那样留白。

第十一步：浏览完整兼容矩阵

在 /preview 页面再往下滚动，还有一份完整的 SVGA 播放器兼容矩阵，记录了这个工具会检查的每一项能力——matte 遮罩、.matte 后缀约定、旧版 SVGA 1.x 支持、内嵌音频、矢量图形处理等等——覆盖全部五个真实播放器。每个单元格都写明核实状态（支持、部分支持或不支持）、通俗易懂的实现说明，以及一个指向具体核实用的源码文件和行号的链接。这张表很宽，需要横向滚动才能看全所有平台；它更像是一份参考资料而不是需要操作的工具，但每当你需要确认某项能力到底支不支持时，它都在那里。

以上就是 SVGA 预览 的全部——不需要账号，不需要上传，你加载的每一个文件都只停留在浏览器标签页里。