SVGA 预览

用六种源码画像逐帧对比同一个 SVGA 的跨端表现。

上传本地 .svga

把文件拖到这里或从本机选择；所有处理都留在当前浏览器。

只支持文件直链，来源站必须允许浏览器跨域请求；本站不使用代理。

示例

画布设置

背景
画布尺寸
画布比例
缩放模式

文件信息

尺寸
—
文件体积
—
帧数
—
FPS
—
时长
—
运行时内存
—
位图数量
—
格式版本
—

兼容体检报告

载入 SVGA 后开始兼容性检查。

SVGA 播放器兼容矩阵

每个单元格都列出锁定版本、核实状态、实现说明和本次对比采用的源码位置。

能力SVGAPlayer-Web官方播放器真播代码仓库SVGAPlayer-Web-Lite官方播放器真播代码仓库Android源码画像模拟代码仓库iOS源码画像模拟代码仓库Flutter源码画像模拟代码仓库
版本: svgaplayerweb@2.3.2 (a218cbe)版本: svga@2.1.1 (5a4ad9d)版本: master@662d0dc (2023-02-06)版本: SVGAPlayer 2.5.7 + master@2e469f1版本: svgaplayer_flutter@2.2.0 (de7de70)
Matte 遮罩

SVGAPlayer-Web / 版本: svgaplayerweb@2.3.2 (a218cbe)

已核实部分支持

Matte 源位于首个精灵且符合命名约定时可以合成遮罩。

源码: src/Canvas/renderer.js:117-153 - `matteSprites` / `destination-in`

SVGAPlayer-Web-Lite / 版本: svga@2.1.1 (5a4ad9d)

已核实不支持

Lite 的 schema 省略 matteKey，因此不会渲染 Matte 遮罩。

源码: src/parser/svga-proto.ts:33-44 - `SpriteEntity` omits `matteKey`

Android / 版本: master@662d0dc (2023-02-06)

已核实部分支持

Matte 渲染要求 Android API 21 及以上，并要求首个精灵符合条件。

源码: library/src/main/java/com/opensource/svgaplayer/drawer/SVGACanvasDrawer.kt:38-58 - requires first `.matte` Sprite and Android API 21+

iOS / 版本: SVGAPlayer 2.5.7 + master@2e469f1

已核实支持

播放器会把 Matte 内容安装为 CALayer mask。

源码: Source/SVGAPlayer.m:194-220 - matte content is installed as a CALayer mask

Flutter / 版本: svgaplayer_flutter@2.2.0 (de7de70)

已核实不支持

Painter 不读取 matteKey，因此不会渲染 Matte 遮罩。

源码: lib/painter.dart:61-68 - `matteKey` read is commented out

.matte 后缀要求

SVGAPlayer-Web / 版本: svgaplayerweb@2.3.2 (a218cbe)

已核实支持

渲染器通过 imageKey 中的 .matte 标记识别遮罩源。

源码: src/Canvas/renderer.js:122-127 - `imageKey.indexOf(".matte")`

SVGAPlayer-Web-Lite / 版本: svga@2.1.1 (5a4ad9d)

已核实不支持

现有渲染路径不会读取或应用 .matte 后缀。

源码: src/player/render.ts:40-45 - sprites draw linearly without matte handling

Android / 版本: master@662d0dc (2023-02-06)

已核实支持

Matte 源的 imageKey 必须以 .matte 结尾。

源码: library/src/main/java/com/opensource/svgaplayer/drawer/SVGACanvasDrawer.kt:38-58 - `endsWith(".matte")`

iOS / 版本: SVGAPlayer 2.5.7 + master@2e469f1

已核实支持

Matte 源需要 .matte 后缀。

源码: Source/SVGAPlayer.m:208-214 - matte source requires `.matte` suffix

Flutter / 版本: svgaplayer_flutter@2.2.0 (de7de70)

已核实不支持

没有生效中的 Matte 路径检查 .matte 后缀。

源码: lib/painter.dart:61-68 - painter never consumes `matteKey`

SVGA 1.x 格式

SVGAPlayer-Web / 版本: svgaplayerweb@2.3.2 (a218cbe)

已核实支持

ZIP 解析路径可读取旧版 movie.spec 素材。

源码: src/mockWorker.js:108-127 - `_decodeAssets` reads `movie.spec` from ZIP

SVGAPlayer-Web-Lite / 版本: svga@2.1.1 (5a4ad9d)

已核实不支持

文件头不是 SVGA 2.x 时，解析器会直接拒绝。

源码: src/parser/index.ts:46-48 - rejects every header except SVGA version 2

Android / 版本: master@662d0dc (2023-02-06)

已核实支持

ZIP 解析器包含旧版 movie.spec 路径。

源码: library/src/main/java/com/opensource/svgaplayer/SVGAParser.kt:276-291,434-459 - ZIP `movie.spec` path

iOS / 版本: SVGAPlayer 2.5.7 + master@2e469f1

已核实支持

ZIP 缓存路径可以读取旧版 movie.spec。

源码: Source/SVGAParser.m:128-164 - ZIP cache reads `movie.binary` or `movie.spec`

Flutter / 版本: svgaplayer_flutter@2.2.0 (de7de70)

已核实不支持

解析器固定走 protobuf 解压，没有旧版 ZIP 路径。

源码: lib/parser.dart:31-42 - unconditional zlib inflate then protobuf decode

内嵌音频播放

SVGAPlayer-Web / 版本: svgaplayerweb@2.3.2 (a218cbe)

已核实部分支持

内嵌音频走 Howler 播放路径，但仍可能被浏览器自动播放策略拦截。

源码: src/Canvas/renderer.js:59-82,244-267 - Howler-backed audio path

SVGAPlayer-Web-Lite / 版本: svga@2.1.1 (5a4ad9d)

已核实不支持

解析阶段会跳过音频素材，播放阶段也不会收到音频。

源码: src/parser/index.ts:50-53 - keys starting with `audio` are skipped

Android / 版本: master@662d0dc (2023-02-06)

已核实支持

VideoEntity 会准备内嵌音频用于播放。

源码: library/src/main/java/com/opensource/svgaplayer/SVGAVideoEntity.kt:192-207 - embedded audio setup

iOS / 版本: SVGAPlayer 2.5.7 + master@2e469f1

已核实支持

内嵌数据会交给 AVAudioPlayer。

源码: Source/SVGAAudioLayer.m:22-32 - AVAudioPlayer reads embedded data

Flutter / 版本: svgaplayer_flutter@2.2.0 (de7de70)

已核实不支持

该包只准备图像，没有内嵌音频播放路径。

源码: lib/parser.dart:72-84; lib/player.dart - images only, no audio preparation or playback

按 audios 字段查找音频

SVGAPlayer-Web / 版本: svgaplayerweb@2.3.2 (a218cbe)

已核实支持

音频条目通过声明的 audioKey 查找数据。

源码: src/Canvas/renderer.js:244-253 - `audios` entries look up `audio.audioKey`

SVGAPlayer-Web-Lite / 版本: svga@2.1.1 (5a4ad9d)

已核实不支持

解码后的 Movie 模型不包含 audios 集合。

源码: src/parser/svga-proto.ts:290-310 - `MovieEntity` omits `audios`

Android / 版本: master@662d0dc (2023-02-06)

已核实支持

音频数据按每个条目声明的 audioKey 查找。

源码: library/src/main/java/com/opensource/svgaplayer/SVGAVideoEntity.kt:229-240 - lookup by `audio.audioKey`

iOS / 版本: SVGAPlayer 2.5.7 + master@2e469f1

已核实支持

每个音频条目通过 audioKey 查找数据。

源码: Source/SVGAAudioLayer.m:27-30 - `audioItem.audioKey` indexes `audiosData`

Flutter / 版本: svgaplayer_flutter@2.2.0 (de7de70)

已核实不支持

Player 与 Painter 都不读取 MovieEntity.audios。

源码: lib/player.dart; lib/painter.dart - no reads of `MovieEntity.audios`

矢量 KEEP 图形

SVGAPlayer-Web / 版本: svgaplayerweb@2.3.2 (a218cbe)

已核实支持

KEEP 帧复用上一次解码得到的矢量图形。

源码: src/frameEntity.js:56-136 - KEEP resolves to `FrameEntity.lastShapes`

SVGAPlayer-Web-Lite / 版本: svga@2.1.1 (5a4ad9d)

已核实支持

解析时会从上一组图形解析 KEEP。

源码: src/parser/video-entity.ts:170-174 - KEEP reuses `lastShapes` during parsing

Android / 版本: master@662d0dc (2023-02-06)

已核实支持

解析器会用上一组图形替换 KEEP 条目。

源码: library/src/main/java/com/opensource/svgaplayer/entities/SVGAVideoSpriteEntity.kt:39-56 - parser replaces KEEP shapes

iOS / 版本: SVGAPlayer 2.5.7 + master@2e469f1

已核实支持

矢量图层维护帧缓存以处理 KEEP 图形。

源码: Source/SVGAVectorLayer.m:37-85 - render-layer KEEP frame cache

Flutter / 版本: svgaplayer_flutter@2.2.0 (de7de70)

已核实支持

解析时 KEEP 条目会复用上一组图形。

源码: lib/parser.dart:55-69 - KEEP is replaced with `lastShape` during parsing

矢量描边样式

SVGAPlayer-Web / 版本: svgaplayerweb@2.3.2 (a218cbe)

已核实支持

Canvas 渲染会应用线宽、端点、连接、斜接和虚线设置。

源码: src/Canvas/renderer.js:270-293 - stroke, width, cap, join, miter and dash

SVGAPlayer-Web-Lite / 版本: svga@2.1.1 (5a4ad9d)

已核实支持

Canvas 渲染会应用解码后的矢量描边样式。

源码: src/player/render.ts:134-155 - Canvas stroke styles are applied

Android / 版本: master@662d0dc (2023-02-06)

已核实支持

解码后的矢量图形会保留描边设置。

源码: library/src/main/java/com/opensource/svgaplayer/entities/SVGAVideoShapeEntity.kt:224-267 - stroke styles decoded

iOS / 版本: SVGAPlayer 2.5.7 + master@2e469f1

已核实支持

CAShapeLayer 会收到解码后的描边样式。

源码: Source/SVGAVectorLayer.m:307-356 - CAShapeLayer stroke styles applied

Flutter / 版本: svgaplayer_flutter@2.2.0 (de7de70)

已核实支持

Painter 会应用线宽、端点、连接、斜接和虚线设置。

源码: lib/painter.dart:174-231 - stroke width, cap, join, miter and dash

位图尺寸规则

SVGAPlayer-Web / 版本: svgaplayerweb@2.3.2 (a218cbe)

已核实支持

内嵌位图按原始尺寸绘制，不拉伸到 frame layout。

源码: src/Canvas/renderer.js:173-199 - embedded bitmap uses intrinsic `drawImage(img, 0, 0)`

SVGAPlayer-Web-Lite / 版本: svga@2.1.1 (5a4ad9d)

已核实支持

位图会拉伸到 frame layout 的宽高。

源码: src/player/render.ts:72-81 - bitmap draws to frame layout width and height

Android / 版本: master@662d0dc (2023-02-06)

已核实支持

位图会预缩放到 frame layout 尺寸。

源码: library/src/main/java/com/opensource/svgaplayer/drawer/SVGACanvasDrawer.kt:221-229 - bitmap pre-scaled to layout

iOS / 版本: SVGAPlayer 2.5.7 + master@2e469f1

已核实支持

位图内容使用 frame bounds，并按 aspect-fit 方式调整。

源码: Source/SVGAContentLayer.m:40-79; Source/SVGABitmapLayer.m:22-28 - layout bounds with resize-aspect contents

Flutter / 版本: svgaplayer_flutter@2.2.0 (de7de70)

已核实支持

drawImageRect 的目标区域是 frame layout。

源码: lib/painter.dart:97-131 - `drawImageRect` targets frame layout

非 PNG 位图

SVGAPlayer-Web / 版本: svgaplayerweb@2.3.2 (a218cbe)

已核实部分支持

代码接受 PNG 和 JPEG 签名，但强制 PNG MIME，因此其他格式仍有不确定性。

源码: src/Canvas/renderer.js:42-55,177-179 - PNG/JPEG signatures accepted but PNG MIME forced

SVGAPlayer-Web-Lite / 版本: svga@2.1.1 (5a4ad9d)

已核实部分支持

ImageBitmap 可解码多种格式，但降级路径仍只按 PNG 处理。

源码: src/parser/index.ts:54-58; src/player/index.ts:141-145 - generic ImageBitmap path, PNG-only fallback

Android / 版本: master@662d0dc (2023-02-06)

已核实支持

Android BitmapFactory 直接解码字节数组，不限制为 PNG。

源码: library/src/main/java/com/opensource/svgaplayer/bitmap/SVGABitmapByteArrayDecoder.kt:11-15 - generic `BitmapFactory.decodeByteArray`

iOS / 版本: SVGAPlayer 2.5.7 + master@2e469f1

已核实支持

UIImage 解码内嵌数据时没有 PNG 限制。

源码: Source/SVGAVideoEntity.m:173-181 - generic `UIImage initWithData` without PNG gate

Flutter / 版本: svgaplayer_flutter@2.2.0 (de7de70)

已核实支持

通用图像解码器没有 PNG 限制。

源码: lib/parser.dart:87-101 - generic `decodeImageFromList` without PNG gate

MovieParams resizeRatio

SVGAPlayer-Web / 版本: svgaplayerweb@2.3.2 (a218cbe)

已核实不支持

播放器内置的 MovieParams schema 不包含字段 5。

源码: src/proto.js:2 - `MovieParams` descriptor only contains fields 1 through 4

SVGAPlayer-Web-Lite / 版本: svga@2.1.1 (5a4ad9d)

已核实不支持

播放器内置的 MovieParams schema 省略字段 5。

源码: src/parser/svga-proto.ts:13-31 - `MovieParams` omits field 5

Android / 版本: master@662d0dc (2023-02-06)

已核实不支持

生成的 MovieParams schema 只到字段 4。

源码: library/src/main/java/com/opensource/svgaplayer/proto/MovieParams.java:186-213 - generated schema has fields 1 through 4 only

iOS / 版本: SVGAPlayer 2.5.7 + master@2e469f1

已核实不支持

生成的 MovieParams schema 只到字段 4。

源码: Source/pbobjc/Svga.pbobjc.h:136-140 - `MovieParams` fields stop at 4

Flutter / 版本: svgaplayer_flutter@2.2.0 (de7de70)

已核实不支持

生成的 MovieParams schema 只到字段 4。

源码: lib/proto/svga.pb.dart:28-38 - `MovieParams` generated fields stop at 4

播放 fillMode

SVGAPlayer-Web / 版本: svgaplayerweb@2.3.2 (a218cbe)

已核实支持

播放默认采用 Forward fillMode。

源码: src/Canvas/player.js:8-10,189 - default `fillMode = "Forward"` drives animator fillRule

SVGAPlayer-Web-Lite / 版本: svga@2.1.1 (5a4ad9d)

已核实支持

播放器配置默认采用 forwards fillMode。

源码: src/player/index.ts:37-47,84-87 - config defaults to `PLAYER_FILL_MODE.FORWARDS`

Android / 版本: master@662d0dc (2023-02-06)

已核实支持

SVGAImageView 默认采用 Forward fillMode。

源码: library/src/main/java/com/opensource/svgaplayer/SVGAImageView.kt:29-47 - default `FillMode.Forward`

iOS / 版本: SVGAPlayer 2.5.7 + master@2e469f1

存疑

完成回调会读取 fillMode，但已检查的初始化路径没有设置默认值。

源码: Source/SVGAPlayer.m:60-63,377-383 - `fillMode` is read after completion but `initPlayer` does not initialize it

Flutter / 版本: svgaplayer_flutter@2.2.0 (de7de70)

已核实不支持

SVGAImage 暴露 fit 与清空行为，但没有 fillMode 设置。

源码: lib/player.dart:16-45 - `SVGAImage` exposes fit and clearsAfterStop but no fillMode

停止后清空

SVGAPlayer-Web / 版本: svgaplayerweb@2.3.2 (a218cbe)

已核实支持

动画完成后默认清空画布。

源码: src/Canvas/player.js:8-10,206-210 - default true clears on animation end

SVGAPlayer-Web-Lite / 版本: svga@2.1.1 (5a4ad9d)

已核实支持

调用 stop 会始终清空渲染容器。

源码: src/player/index.ts:219-223 - `stop()` always calls `clearContainer()`

Android / 版本: master@662d0dc (2023-02-06)

已核实支持

clearsAfterStop 默认是 false，因此 SVGAImageView 会保留末帧。

源码: library/src/main/java/com/opensource/svgaplayer/SVGAImageView.kt:40-47,66-70 - default false

iOS / 版本: SVGAPlayer 2.5.7 + master@2e469f1

已核实支持

播放器初始化时会启用停止后清空。

源码: Source/SVGAPlayer.m:60-63 - `initPlayer` sets `clearsAfterStop = YES`

Flutter / 版本: svgaplayer_flutter@2.2.0 (de7de70)

已核实支持

播放完成时默认清空。

源码: lib/player.dart:37-45,173-176 - default true clears on completed status

四步完成 SVGA 对比

  1. 上传 SVGA 文件，或粘贴允许跨域访问的文件直链。
  2. 选择两个播放器端，建立聚焦的对照组合。
  3. 拖动共享时间轴，在两侧查看同一帧的表现。
  4. 阅读兼容体检报告，再到修改器修复已确认的问题。

SVGA 预览常见问题

为什么我的 SVGA 在 iOS 上正常，Web 上遮罩失效？

不同播放器的 Matte 支持并不一致。Web-Lite 完全省略 matteKey，其他播放器还可能要求特定图层顺序或命名。修改文件前请先确认具体播放器列。

为什么遮罩图层必须以 .matte 结尾？

多个官方渲染器通过这个后缀识别 Matte 源。SVGA DIY 可以直接匹配 matteKey，所以同一文件可能在这里正常，在其他端失效。

为什么 SVGAPlayer-Web-Lite 播不了我的文件？

Web-Lite 只接受 SVGA 2.x protobuf 文件，并且省略 Matte 与内嵌音频等能力。旧版 1.x ZIP 或不支持的特性可能导致失败或表现不同。

为什么装饰层在不同播放器里位置不一样？

各端采用的位图尺寸规则不同。有的使用原始像素，有的拉伸到 layout，iOS 使用 aspect-fit。layout 与位图尺寸不一致时，偏移就会暴露。

为什么内嵌音频在网页上不出声？

Web-Lite 与 SVGA DIY 不播放内嵌音频。Web 全量版可以播放，但浏览器自动播放策略仍可能要求用户先点击页面。

发现跨端差异？

把同一文件放进 SVGA DIY，检查图层、替换素材，并在本地导出修正后的版本。

打开 SVGA 修改器