How to Create SVGA Animations in After Effects (and Animate CC)

To create an SVGA animation, build it in Adobe After Effects with bitmap, shape and precomp layers animated by keyframes. Then install the official SVGA-AEConverter extension, open it from Window > Extensions, choose an output folder and export as SVGA 2.0. Test the file in an SVGA player before it ships.

What do you need to make SVGA animations?

  • Adobe After Effects (or Adobe Animate, covered below). The converter's manifest declares support for After Effects 13.0 and later, which is After Effects CC 2014 onwards.
  • The official converter. SVGA-AEConverter is published by the SVGA team on GitHub and linked from the designer tools page on svga.dev. It is a free download. The repository has no licence file, and its README points to svga.dev for documentation.
  • Your artwork as PNG, JPG or PSD images, Illustrator files or After Effects shape layers.
  • An SVGA player for testing, such as our free SVGA Player (SVGA 2.x files only).

An SVGA file is not a video. The converter exports layers, images and keyframed properties, and the player redraws them at runtime. That is why it supports some After Effects features and not others.

Which After Effects features do SVGA animations support?

The official design guide in the SVGA docs wiki and the converter's own source code give this picture:

FeatureStatusNotes
Bitmap layers (PNG, JPG, PSD)SupportedExported as PNG. When importing a PSD, import it as a composition and merge layer styles into footage, or sizes and styles can come out wrong.
Shape layers and pen pathsSupportedExported as Bézier vector paths.
Illustrator (.ai) layersConvertedThe converter turns them into shape layers automatically; the guide recommends converting them yourself first so you can check the result.
Transform keyframesSupportedPosition, scale, rotation and opacity are the core of SVGA animation. Set them on the element itself rather than relying on a parent, or they may merge incorrectly.
PrecompositionsSupportedThe converter reads layers inside nested comps.
MasksSupportedUse closed paths; an open path can't create a transparent area.
Track mattesSupportedFor bitmap mattes, the guide recommends 8-bpc images with only an alpha channel to save resources.
Trim pathsPartlyTrim paths outside a shape group and trimPathOffset aren't supported.
Text layersConvertedSVGA files can't hold live text. The converter turns text layers into shapes; for static text, the guide recommends rendering it to PNG.
AudioSupported (SVGA 2.x)The converter collects audio layers whose source is an .mp3 file.
Effects and blend modesNot exportedWe found no code for them in the converter, so bake them into your PNG artwork.
Hidden layersSkippedLayers with the visibility switch off are ignored.

The design guide summarises SVGA file content as "bitmap and vector", and it jokes that the format should have been called BVGA.

How should you set up the composition?

The converter reads the active composition, so its settings become the SVGA file's settings:

  • Canvas. The comp's width and height become the SVGA file's canvas (view box). Developers can scale it proportionally when they play it. For reference, the free samples on our player page use 750 × 1334 and 720 × 1280 canvases.
  • Frame rate. The design guide recommends a divisor of 60 (1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 or 60 fps), because phone screens usually refresh at 60 Hz. If the rate isn't valid, the converter rounds it to the nearest valid value on export without changing your project.
  • Duration and start. An SVGA animation is read from the start of the timeline. Start your animation at 0:00, and set the duration you want. The converter's settings let you choose whether duration follows the comp's actual length.
  • Background. SVGA files have no background colour, so the comp's background colour has no effect. Anything without artwork is transparent.
  • Layer names. Each layer becomes an element whose imageKey comes from its name. The converter strips spaces, and it replaces footage names containing other special or non-ASCII characters with generated names. To let developers swap an element at runtime, for example a user's avatar, give that layer a simple ASCII name. Then hand the developer the key and an image of the same size.

How do you install the SVGA converter for After Effects?

On Windows

  1. Download SVGAConverter_AE.zip from the designer tools page (it links to the file in the SVGA-AEConverter repository).
  2. Unzip it and run install.exe, then choose Install Now.
  3. Restart After Effects.

The package also contains an install.bat script. It copies the extension to C:\Program Files\Common Files\Adobe\CEP\extensions and sets the PlayerDebugMode registry key, but only for CSXS versions 6 to 8.

On macOS

  1. Download SVGAConverter_AE.zxp from the same page.
  2. Install it with a ZXP installer. The svga.dev page links to the aescripts ZXP Installer. You can also use Adobe's Unified Plugin Installer Agent, which comes with the Creative Cloud desktop app and needs you to be signed in:
cd "/Library/Application Support/Adobe/Adobe Desktop Common/RemoteComponents/UPI/UnifiedPluginInstallerAgent/UnifiedPluginInstallerAgent.app/Contents/macOS"
./UnifiedPluginInstallerAgent --install ~/Downloads/SVGAConverter_AE.zxp
  1. Restart After Effects.

How do you export an SVGA file from After Effects?

  1. Save the project and open the composition you want to export, so it is the active comp.
  2. Open the converter from Window > Extensions > SVGAConverter_AE. The svga.dev instructions call it "SVGAConverter".
  3. Pick the version. In the settings at the top right, choose SVGA – 2.0, the default. The other options are 1.0 and 1.5. Pick 2.0 unless an old player needs something else; our online player plays 2.x only.
  4. Choose the output folder with 输出路径 ("output path").
  5. Click 开始转换 – 2.0 ("start conversion"). The converter compresses the PNG images with pngquant, writes the .svga file to your folder and plays it in the panel.

The panel's labels are in Chinese, as shown above.

Can you export SVGA animations from Animate CC?

Yes, with the companion extension SVGA-FLConverter, available from the same designer tools page. It installs the same way (install.exe on Windows, a ZXP installer on macOS) and opens from Window > Extensions. Its manifest lists host versions 14.0 to 18.9, which covers Flash Professional CC 2014 through Animate CC 2018. Newer Animate releases fall outside that declared range, so test it on your version before relying on it.

How do you test the exported SVGA file?

  1. Drop the file into our SVGA Player, which plays SVGA 2.x files only. If you exported 1.0 or 1.5, use the svga.dev preview instead.
  2. Check that every layer appears, that masks and mattes clip correctly, and that the timing matches your comp.
  3. Play it in a real app build. Our guide How to Add SVGA Gifts to Android, iOS, Flutter and Web Apps has setup code for each platform.
  4. Check file size and memory on a low-end phone; see SVGA File Size and Performance.

How do you make SVGA gifts that work well in live apps?

  • Design for an overlay. Gifts and entry (entrance) effects play over live video, so keep the background empty and soft edges in the PNG alpha.
  • Plan a clear ending. Gifts usually play once, while avatar frames loop, so make loops seamless where needed.
  • Keep images lean. Crop transparent space and avoid images far larger than the canvas.
  • Name replaceable layers for anything the app should personalise, such as an avatar or a name rendered as an image.

To see what finished files look like, browse SVGA Gifts (for example Electric Blue Dragon), SVGA Entry Effects and Avatar Frames. If you'd rather not animate in-house, SVGa Marketplace quotes commissioned animation separately from catalog prices; see Products & Services and Contact.

Frequently asked questions

Is the SVGA converter for After Effects free?

Yes, it is a free download. SVGA-AEConverter is published by the SVGA team in the svga/SVGA-AEConverter GitHub repository and linked from the designer tools page on svga.dev. The repository has no licence file, so check the terms with the SVGA team before you redistribute it or bundle it with your own tools.

Which After Effects versions does the SVGA converter support?

The extension's manifest declares After Effects 13.0 and later, which is After Effects CC 2014 onwards. The SVGA team doesn't publish a list of tested versions, so install it and export a short test comp before you start a large project.

Why is my text missing or different in the SVGA file?

SVGA files can't contain live text. The converter turns text layers into shape layers during export, and that conversion sometimes changes the result. For static text, render it to a PNG image. For animated text, convert the layer to shapes yourself first, then check it in an SVGA player.

Can an SVGA animation include sound?

Yes, in SVGA 2.x. The converter exports audio layers whose source file is an .mp3, with the frames where each clip starts and stops. Playback depends on the player: SVGAPlayer-Android and SVGAPlayer-iOS play audio, while the Flutter package and SVGAPlayer-Web-Lite don't.

Should I export SVGA 1.x or 2.0?

Export SVGA 2.0, the converter's default, unless a player you must support only reads older files. The Android and iOS players read both versions, but the Flutter package, SVGAPlayer-Web-Lite and our online SVGA Player read 2.x only. Version 2.0 is also the only one that adds audio and bitmap masks.