11FAQ

关于 SVGA 格式规范、跨平台播放器与 Web Lite 的常见问题。

FAQ / 01

基础问题

了解 SVGA 的定位、适用场景与开源生态。

SVGA 是什么?

SVGA 是一种跨平台的开源动画格式,同时兼容 iOS、Android、Flutter、Web、HarmonyOS 等多个平台,提供高性能动画播放体验。详见 SVGA 官方文档仓库。

SVGA 适合哪些动画场景?

SVGA 适合直播礼物、活动挂件、产品引导、互动反馈等需要高还原度且要跨平台播放的动画。

SVGA 和 GIF 或帧动画有什么区别?

SVGA 保留时间轴和素材结构,类似 Dragonbones / CreateJS,通常比逐帧图片更容易控制体积,也更适合做播放控制和跨端复用。

SVGA 是开源项目吗?

是的,SVGA 的播放器、转换器和格式规范均由社区维护,可在 GitHub svga 组织查看源码、提交 issue 或参与贡献。
FAQ / 02

格式规范

SVGA 文件结构与 1.x / 2.x 版本差异。

SVGA 有哪些格式版本?

SVGA 存在 1.x 与 2.x 两个版本。1.x 使用 JSON 描述动画,2.x 使用 ProtoBuf 描述。由于复杂动画下 JSON 文件体积过大、解析耗时与内存开销增大,JSON 方案已于 2.0 起被弃用。

1.x 和 2.x 格式有什么区别?

1.x 以 JSON 文本描述(1.x 格式规范),2.x 以 ProtoBuf 二进制描述并使用 zlib 压缩(2.x Proto 协议),体积更小、解析更快。

SVGA 文件的扩展名和结构是怎样的?

SVGA 文件以 .svga 作为后缀,使用 ZIP 压缩打包,解压后不允许有子目录,且文件名不允许包含中文、日文等非标准字符。位图文件要求 PNG-8 或 PNG-24 格式,建议使用 pngquant 压缩。

播放器对格式版本的兼容性如何?

2.0.0 的 Player 可播放 2.x 格式文件并向下兼容 1.x 格式;1.x 的 Player 只能播放 1.x 格式文件,不能播放 2.x。

SVGA 格式的 Roadmap 是什么?

2.0.0 计划支持 Audio(音频)与 Bitmap Mask(位图遮罩)特性;1.x 仅保证稳定性。详见 SVGA-Format 仓库。
FAQ / 03

播放器与集成

多平台播放器选择、转换器与社区资源。

SVGA 支持哪些平台?

官方提供 iOS、Android、Flutter、Web、Web Lite、微信小程序、HarmonyOS NEXT 等平台的播放器,完整列表见 svga/docs。

Web 版和 Web Lite 版播放器有什么区别?

SVGAPlayer for Web 是完整版播放器;SVGAPlayer-Web-Lite 面向移动端 Web,体积更小(<60kb,gzip<18kb)、性能更高,但不支持 SVGA 1.x 格式与音频播放。

设计师如何导出 SVGA 文件?

设计师可使用 SVGAConverter,从 After Effects 或 Animate 中导出 .svga 文件。

有哪些开发与设计指南?

官方提供 开发使用指南、设计使用指南,以及各平台特性支持对照表。

社区有哪些第三方资源?

社区贡献包括 React Native 播放器(BANG88)、UWP 播放器(LancerComet)、VSCode SVGA 预览插件(ETTTTT)。
FAQ / 04

Web Lite 专用

SVGAPlayer-Web-Lite 的特性、限制与使用方法。

什么是 SVGAPlayer-Web-Lite?

它是 SVGA 在移动端 Web 上的轻量播放器,目标是更轻量、更高效。体积 <60kb(gzip <18kb),兼容 Android 4.4+ / iOS 9+。详见 仓库。

Web Lite 用了哪些技术来提升性能?

采用多线程(WebWorker)解析文件数据、OffscreenCanvas / ImageBitmap 渲染,提供更好的异步操作。实验性特性包括渲染引擎运行在 WebWorker、WebAssembly 替代 WebWorker、GPU 加速运算。

Web Lite 有哪些使用限制?

不支持播放 SVGA 1.x 格式文件,也不支持声音播放。如需 1.x 兼容或音频,请使用完整版 SVGAPlayer for Web。

如何安装 SVGAPlayer-Web-Lite?

可通过 npm 安装:yarn add svga 或 npm i svga;也可通过 CDN 引入:<script src="https://unpkg.com/svga/dist/index.min.js">。

Web Lite 支持哪些高级特性?

支持替换元素与插入动态元素(修改解析后数据元实现)、利用 IndexedDB 持久化缓存已解析数据避免重复下载解析、视窗检测(IntersectionObserver)停止视窗外渲染、缓存已播放帧提升重复播放性能等。