Animated Profile Frames: SVGA vs WebP, APNG and Lottie

A profile frame, or avatar frame, is the decoration around someone's picture: a golden ring for a VIP, a crown for a top tier, flowers for a festival. A gift plays once; a frame stays on the picture for as long as the person holds it, wherever their picture appears. That makes the file format matter more than it seems. This article compares the four common formats for animated frames and covers sizes, the transparent centre and tiered frames. To browse artwork, see animated profile frames in the VoltKit gift store.

What a frame has to do

• Leave the middle clear. The centre is transparent so the person's own picture shows through; the decoration sits around, and partly over, the edge of the circle.
• Work at many sizes. Large on a profile page, medium on a voice-room seat, tiny beside a chat message.
• Share the screen. A voice room or a chat list can show dozens of frames at once, so each must load quickly and stay cheap to draw.
• Loop cleanly. A frame plays for as long as it is on screen, so its last frame must lead back into its first.

Four formats compared

Format	What the file holds	What plays it	Good for
SVGA	Pictures with their timing and full alpha, optional sound; named images can be swapped at run time	An SVGA player library (web, Android, iOS, Flutter)	Animated frames in apps that already play SVGA gifts and entry effects
Animated WebP	Image frames with 24-bit colour and an 8-bit alpha channel	Image components that support animated WebP	Simple loops without a separate player
APNG	Animated PNG frames with full alpha	Browsers and image libraries that support APNG	Wide support, with files often larger than animated WebP
Lottie	Vector shapes and keyframes as JSON, exported from After Effects with Bodymovin	A Lottie player on each platform	Flat, vector-style frames that must stay sharp at any size

Behind the table: SVGA 2.x files are binary ProtoBuf compressed with zlib (SVGA-Format). WebP "supports 24-bit RGB color with an 8-bit alpha channel, compared to GIF's 8-bit color and 1-bit alpha", and animated WebP plays in Chrome 32+, Edge 18+, Firefox 65+, Opera 19+ and Safari 14+ (WebP FAQ). lottie-web parses "Adobe After Effects animations exported as json with Bodymovin" (lottie-web); Lottie players support a subset of After Effects features, so check a design in the player before committing to it. Sources read in October 2026.

Sizes and the hole in the middle

Agree the geometry before anyone draws: a square canvas, the diameter and position of the avatar circle inside it, and how far the decoration may overlap the picture. Then design at two to three times the largest size your app shows the frame, so it stays sharp on high-density phone screens, and check it at the smallest size too: fine detail disappears in a chat list.

For scale, Steam's guidelines for partners ask for animated avatar frames as "224 x 224px APNG (animated .png) <2MB", looping, plus a still PNG at the same size, and ask for nothing that strobes or flashes (Steamworks documentation, read in October 2026). Your app's sizes will differ; the habits carry over: a square canvas, a size budget, a still version and no flashing.

Animated where it counts, still everywhere else

Animate the frame where one or a few are on screen: the profile page, a profile card, the seat of the person speaking. Use the still version in long lists and grids. Pause animations that scroll out of view, and show the still frame to people who prefer reduced motion. If your app already plays SVGA gifts, an SVGA frame reuses that player; otherwise animated WebP may be simpler: browsers and Flutter's Image widget play it as it is (Flutter Image class, read in October 2026), while native Android and iOS apps need an image component or library that animates it. SVGA vs animated WebP goes deeper on the two, and animated gifts and formats shows how the store lists each file.

VIP, SVIP, level and event frames

Frames are among the most visible rewards an app can give, so apps tie them to tiers (VIP, SVIP), levels, festivals and pairs of friends. Make tiers easy to tell apart at a glance: change the colour, the material or the motion, not only a small detail. Keep the rules on your server, including when a time-limited frame expires: the file never expires, the right to show it does. The VIP and SVIP items page and the planning guide cover the whole set: frames, badges, entry effects and more.

Test before you ship

Open an SVGA frame in the free SVGA Player over a screenshot of your profile screen, and check the transparent edges against light and dark backgrounds. For still versions, PNG to WebP makes smaller files that keep transparency. Then test the original in your app, on a lower-end phone, with a full list of frames on screen.

Where to get frames

The VoltKit gift store has a page for animated profile frames. Previews are watermarked and lower quality; the original you buy or claim is full quality. The gift licence lets you give a frame to as many of your users as you like, as a reward or a paid item, but not resell or share the file itself. For frames drawn around your tiers and your avatar circle, send a custom design enquiry.

Steam is named only as a published example; its trademarks belong to its owner, and VoltKit is not affiliated with it.