How to test an SVGA or PAG file before you ship it

The cheapest place to catch a broken loop, a white halo or an oversized gift is your desk, not a busy live room. This is a routine for checking any SVGA or PAG file before it goes into a build: the free SVGA & PAG viewer first, your own player second, and a short checklist in between.

Before you start

• The viewer plays .svga and .pag files in the browser. It recognises the format from the file's first bytes rather than its name, so a renamed GIF or MP4 is flagged straight away instead of failing silently.

• It takes files under 20 MB and plays SVGA 2.x. Older SVGA 1.x files need re-exporting for the browser preview, although many native players still read them.

• As the page states, a copy of every file you open there is sent to svgastore for review. If a file is confidential, test it in your own player only.

Step by step

1. Drop the file and read the spec panel

For SVGA the panel lists canvas, frame rate, frames, duration, bitmaps, sprites, audio, aspect ratio and file size. For PAG it lists canvas, frame rate, frames, duration and size. Compare each with the brief. Canvas tells you the slot the file was drawn for; frame rate and frame count tell you how much work the player does; the bitmap count is an early warning on weight, because much of an SVGA file's size is its embedded images.

2. Look at it at actual size

Switch an SVGA preview from fit-to-stage to 1×. Small pieces are where problems hide: the store's SVIP badge is only 96×32, and a 128×128 rocket icon may be drawn smaller still in your layout. Check that edges are crisp and nothing important disappears at the size people actually see.

3. Change the background

SVGA files can be previewed on Light, Dark, Checker and Phone stages, where Phone places the file inside a phone outline over a dark, room-like gradient. PAG files get Checker, Dark, Light and White. Dark exposes halos, the pale fringe around glows exported against white. Light exposes the opposite: dark edges and shadows that vanish in a night-themed room but look grubby on a light profile page. Checker shows exactly which pixels are transparent.

4. Watch the loop, then play it once

With looping on, watch the last frame run into the first; a jump, flash or pop is a loop seam. Then turn looping off. One-shot pieces such as gifts and level-ups should end on a clean final frame, not halfway through a fade. SVGA previews have a scrubber, so you can step to the exact frame at fault; the PAG panel offers play, restart and loop but no frame stepping.

5. Listen

When an SVGA file has a sound track, a sound button appears. Only 42 of the store's 2,265 files carry sound, so audio is the exception rather than the rule. Decide now how it behaves when the room is muted, when the phone is on silent and when two gifts land together.

6. Compare in a row

Drop several files at once, up to ten, and they play together on one shared background. Use this for series and pairs: VIP 1, 2 and 3 should step up visibly, and an En and Ar banner pair should mirror cleanly with identical timing.

Real specs to calibrate against

Numbers mean more with a reference point. These files from the store run from lightest to heaviest:

Canvas alone does not predict weight. Rank Particle covers a 750×900 canvas in 5.1 KB, while King Fireworks Blast at 750×1624 weighs 19.20 MB. Across the store the median file is 88 KB and 1,195 files are under 100 KB, so anything measured in megabytes should be a deliberate full-screen moment. Every file in the table runs between 15 and 30 fps; store-wide, frame rates range from 3 to 75. The viewer's own quick checks treat files up to 500 KB as light for busy rooms and flag anything over 2 MB as heavy for low-end phones. Treat those as guidelines, not a verdict.

Pre-release checklist

• Spec match: canvas, frame rate and length match the brief and the slot in your layout.

• Weight: tiny for always-on icons and badges; megabytes only for full-screen moments.

• Loop seam: no jump at the loop point, and one-shots end on a clean frame.

• Backgrounds: no halo on dark, no grubby edge on light.

• Actual size: badges and icons read at 1×.

• Sound: plays only where intended and respects mute.

• RTL: anything with direction or text has a right-to-left partner with identical timing, and names and numbers are drawn at runtime rather than baked in.

• Series: tiers are visibly different and in order.

• Real player: the file plays in the runtime you ship.

Your player has the final word

A browser preview is a fast first filter, not the release test. Load each file into the runtime your app ships, the open-source SVGAPlayer for Android, iOS, Web or Flutter for SVGA and Tencent's libpag for PAG, on the oldest phone you support, in a room with a few other animations running. If it plays smoothly there, it is ready.

Next step

Take one animation you are about to ship, run it through the six steps in the viewer, and paste the checklist into your release notes. Every product page in the store lists the file size, frame rate and frame count before you buy, so you can compare your file with a known-good one such as Cash Rain Tycoon, or line up ten tiers from the VIP Level Pack side by side.