How to play SVGA animations on Android, iOS, Flutter and the web

Short, working examples for playing .svga files with the standard SVGA players on Android, iOS, Flutter and web, plus the habits that keep a live room smooth.

Android

Add the SVGAPlayer-Android library (published on JitPack), put an SVGAImageView in your layout, then parse and play:

Kotlin

val parser = SVGAParser.shareParser().apply { init(context) }
parser.decodeFromAssets("gift.svga", object : SVGAParser.ParseCompletion {
    override fun onComplete(videoItem: SVGAVideoEntity) {
        svgaImageView.setVideoItem(videoItem)
        svgaImageView.startAnimation()
    }
    override fun onError() { /* show a still or skip the effect */ }
})

iOS

Add the SVGAPlayer pod, create an SVGAPlayer view and load the file from your bundle:

Swift

let player = SVGAPlayer(frame: view.bounds)
view.addSubview(player)
SVGAParser().parse(withNamed: "gift", in: nil, completionBlock: { videoItem in
    player.videoItem = videoItem
    player.startAnimation()
}, failureBlock: nil)

Flutter

With the svgaplayer_flutter package the simplest form is one widget, from assets or a URL:

Dart

SVGASimpleImage(assetsName: 'assets/gift.svga')
// or
SVGASimpleImage(resUrl: 'https://cdn.example.com/gift.svga')

Web

The svgaplayerweb library draws into any element you give it:

HTML

<div id="stage" style="width:300px;height:300px"></div>
<script src="https://cdn.jsdelivr.net/npm/svgaplayerweb/build/svga.min.js"></script>
<script>
  const player = new SVGA.Player('#stage');
  const parser = new SVGA.Parser('#stage');
  parser.load('gift.svga', (videoItem) => {
    player.setVideoItem(videoItem);
    player.startAnimation();
  });
</script>

Keep the room smooth

Parse a file once and keep the result for the next time the same gift is sent; parsing is the slow part.

Play gifts and entrances once per event and remove the view when the animation finishes. Loop only small, always-on pieces such as frames, badges and mic rings.

Queue big effects: two full-screen gifts at once look worse and cost twice the work. Show them one after another.

Choose the size you need. Every file page here lists the canvas, frame rate, length and weight so you can pick light files for low-end phones.