SVGA File Size and Performance: How to Optimize SVGA Animations for Live Apps

SVGA file size depends mostly on the images inside the file: how many there are and how large they are in pixels. Frame count, frame rate and any audio also add to it. Memory is a separate cost, because players decode images into bitmaps, so pixel dimensions matter more than kilobytes. Keep images lean and test on low-end phones.

What makes an SVGA file large?

An SVGA file isn't a video. It stores a set of images plus instructions that say where each image sits on every frame. According to the SVGA format specification, these parts make up the file, and each one adds to its size:

• Images. Every bitmap piece of the animation is stored once, as PNG data, and reused across frames. More images, and larger images in pixels, mean a larger file.
• Frames. Each sprite (layer) has data for every frame: position, scale, rotation, opacity and, for vector shapes, path data. More frames and more sprites mean more data.
• Frame rate. At a given duration, doubling the frame rate doubles the number of frames, and so the per-frame data.
• Vector shapes. Shapes store path data instead of pixels, which can replace a PNG for simple artwork. Shapes that change on every frame add path data per frame.
• Audio. SVGA 2.x files can embed audio clips, which become part of the file.

The 2.x format compresses the whole description with zlib. The official After Effects converter also runs pngquant on the images during export, which reduces their colours to shrink PNG data (see How to Create SVGA Animations).

How big are real SVGA files?

These are the three free sample gifts on our SVGA Player page (which plays SVGA 2.x files only). The values were read from the files themselves:

All three are SVGA 2.x files. Fiery Red Dragon has more images than Pink Heart Rocket but fewer frames, and its file is smaller. Size is the sum of several factors, so no single number, such as duration, predicts it. Every product page on svgagifts.com lists the file size and duration of that item, so you can compare before you buy. These are three samples, not a benchmark of the whole catalog.

What does frame size mean for an SVGA animation?

"Frame size" is used in three ways, and they behave differently:

1. Canvas size (view box). This is the width and height the animation was designed for, taken from the After Effects comp. Players scale it to fit the view, so a 750 × 1334 canvas doesn't force a 750 × 1334 view.
2. Image size. These are the pixel dimensions of each bitmap inside the file. They drive file size and memory, and an image can be larger than the space it fills on screen.
3. Decode size on Android. SVGAPlayer-Android has SVGAParser.setFrameSize(width, height). When set, the parser decodes images with a power-of-two sample size, but only for images at least twice as large as the requested size in both dimensions. Smaller images are decoded at full size.

val parser = SVGAParser(context)

giftView.post {
    // Decode oversized images closer to the size of the view
    parser.setFrameSize(giftView.width, giftView.height)
    parser.decodeFromAssets("glossy-pink-lips.svga", object : SVGAParser.ParseCompletion {
        override fun onComplete(videoItem: SVGAVideoEntity) {
            giftView.setVideoItem(videoItem)
            giftView.startAnimation()
        }
        override fun onError() {}
    })
}

The call is made after layout (post) so the view has a real width and height. Downsampling trades sharpness for memory, so compare the result with full-size decoding on a real device.

Why doesn't SVGA file size equal memory use?

PNG compression shrinks images on disk, but a player has to decode them into bitmaps before it can draw them. In SVGAPlayer-Android 2.6.1, the parser decodes every image in the file when the file loads. It keeps the bitmaps in memory until the animation is cleared. The decoder asks for the RGB_565 format (2 bytes per pixel). Android's BitmapFactory docs say the decoder picks a configuration that keeps per-pixel alpha when the image has it, which typically means ARGB_8888 at 4 bytes per pixel (Bitmap.Config).

So, roughly, a transparent image costs width × height × 4 bytes in memory, however small its PNG is. Two files with the same kilobytes can need very different amounts of memory.

Clearing matters too. On Android, SVGAImageView.clear() releases the decoded bitmaps and any sounds. Stopping with fillMode="Clear" or clearsAfterStop only stops drawing the last frame. Set clearsAfterDetached to true if you want the view to call clear() when it leaves the screen.

Does the SVGA version affect size and performance?

Yes. In SVGA 1.x, the animation description is JSON inside a ZIP archive. The format specification says JSON was dropped in 2.0 because complex animations produced very large JSON that was slow to parse and used more memory. SVGA 2.x stores the same description as a zlib-compressed Protobuf binary. If you still ship 1.x files, re-export them as 2.0 from the original project. You can also use the official preview at svga.dev to convert a 1.x file to 2.0, then compare the two.

How do designers reduce SVGA file size?

Use this checklist before export:

1. Crop every image to its visible pixels. Transparent margins still cost memory once the image is decoded.
2. Size images for the canvas. Avoid images much larger than the area they cover on screen.
3. Reuse images. The converter stores each source image once, however many layers use it, so animate one image instead of exporting near-duplicates.
4. Use shapes for simple artwork, such as flat circles or bars, instead of PNGs.
5. Pick the lowest frame rate that still looks smooth, using a divisor of 60 as the SVGA design guide recommends.
6. Trim the duration. Every extra frame adds data.
7. Use 8-bpc alpha-only images for bitmap mattes, as the design guide recommends.
8. Only embed audio when the app will play it.

How do developers keep SVGA animation playback smooth?

1. Play one large gift at a time. Queue the rest, and start the next from the finished callback.
2. Release finished gifts. Call clear() on Android, or set the player's videoItem to nil on iOS or null on the Flutter controller. In SVGAPlayer-Web-Lite, player.clear() only clears the canvas; call player.destroy() when you no longer need the player.
3. Use setFrameSize on Android when files contain images much larger than your view.
4. Cache downloads. SVGAPlayer-Android's README notes that the parser doesn't manage an HTTP cache, and recommends HttpResponseCache.
5. On the web, SVGAPlayer-Web-Lite has two relevant options. isUseIntersectionObserver stops drawing frames while the canvas is off-screen. isCacheFrames caches drawn frames to speed up repeat playback, which costs extra memory.

The setup code for each platform is in How to Add SVGA Gifts to Android, iOS, Flutter and Web Apps.

How should you test SVGA animation performance?

There's no universal size limit for an SVGA gift. Set your own budget from tests like these:

1. Preview each file in the SVGA Player (SVGA 2.x files only) to catch broken files early.
2. Play your largest gifts on the oldest phone you support, with the live video running underneath.
3. Watch memory in Android Studio's Memory Profiler or Xcode's memory gauge while several gifts play in a row.
4. Confirm memory falls back after each gift is cleared.

If you need files to test with, browse SVGA Gifts such as Luxury Yacht Cruise, SVGA Entry Effects (entrance effects) and Avatar Frames. Each product page lists its file size and duration. For background on the format, read What Is an SVGA File?.