VSCode 无法预览 SVGA 动画，因其为二进制/JSON 封装的专有格式，非 SVG 文本，所有 SVG 预览插件（如 SVG Viewer）均不识别；唯一可靠方式是 HTML + svga-player-web SDK 在浏览器中运行。
VSCode 本身不支持 SVGA 动画预览，也没有插件能直接渲染 SVGA 格式（.svga 文件）——它不是 SVG，也不是标准 Web 动画格式，必须走浏览器 + JS SDK 路线。
为什么 SVG Viewer / Image Preview 对 .svga 文件完全无效
SVGA 是类似 Lottie 的专有动画格式，由类似 svga-player-web 这样的 JavaScript SDK 解析并渲染。VSCode 所有“SVG 预览”类插件（如 SVG Viewer）只处理 .svg 文本文件，对二进制或 JSON 封装的 .svga 文件无识别能力。双击 animation.svga 只会显示乱码或 Base64 内容，这不是配置问题，是格式根本不匹配。
必须用 HTML + svga-player-web 实现真实预览
这是目前唯一可靠、可调试的方案，依赖官方 SDK 在浏览器中运行：
- 下载最新版
svga-player-web（推荐从 GitHub 官仓 获取svga.min.js或通过 npm 安装） - 新建
preview.html，与animation.svga放在同一目录 - HTML 内容精简到最小可用：复制AI写代码
<!DOCTYPE html>
<html><body style="margin:0">
<div id="stage" style="width:100vw;height:100vh"></div>
<script src="./svga.min.js"></script>
<script>
const player = new window.SVGA.Player('#stage');
player.load('./animation.svga');
player.start();
</script>
</body></html>
右键 preview.html → Open with Live Server，浏览器打开后即可见动画。修改 .svga 文件并保存，Live Server 会自动刷新页面（前提是没禁用自动刷新）。
常见失败原因和绕过方式
实际调试时卡住，90% 出在路径、跨域或 SDK 版本上：
-
Failed to load resource: net::ERR_FILE_NOT_FOUND：说明./animation.svga路径不对，或 Live Server 没在该目录启动；不要用file://协议直接双击 HTML -
Access to fetch at 'xxx.svga' from origin 'http://localhost:5500' has been blocked by CORS policy：SVGA 文件放在非 Live Server 根目录下（比如放到了../assets/），必须确保.svga和preview.html同级，或改用相对路径./assets/animation.svga并同步调整player.load() - 动画静止/报
Cannot read property 'frames' of undefined：SDK 版本太旧，不兼容新导出的 SVGA 2.x 格式；换用svga.min.jsv2.6+ 或检查动效工具（如 After Effects + Bodymovin 插件）是否导出为兼容模式 - 想边改边看但不想每次手动刷新？别依赖插件自动刷新，直接在 VSCode 中配置保存时触发 Live Server 刷新：安装
Auto Rename Tag无用，真正需要的是Live Server自带的 “Reload on Save” 设置（默认开启）
SVGA 预览的本质是前端运行时行为，不是静态资源查看。所有试图“让 VSCode 原生支持 .svga 预览”的尝试都会失败——它连解析器都没有。重点不在配置编辑器，而在搭好最小可执行的 HTML+JS 环境，并确保路径、协议、SDK 版本三者严丝合缝。
