Animated SVG with Adobe Animate and Snap.SVG

With Animate CC, Adobe finally sounded the bell to the end of Flash. While the renamed animation program still supports Flash, it has moved its main focus towards HTML5 and WebGL. Now, for each new project, you decide whether you want to create an animation via HTML5 canvas or WebGL. Animated SVGs with Animate CC were not possible until recently. The extension “Snap.SVG Animator” expands the Animate CC feature scope by this exact function.

Snap.SVG Allows Vector-Based SVG Animations

Unique about Flash was always the fact that it brought vector-based graphics and animations to the browser. This was not possible with web standards. Apart from fonts, only pixel-based formats like JPEG and GIF were used. With the introduction of HTML5, the XML-based SVG format became increasingly popular as well, as it is vector-based and animatable, similar to Flash.

This gives the SVG format a decisive advantage over HTML5 canvas, which only allows for pixel-based animations. Especially when zooming in, this format’s disadvantage in comparison to SVG becomes evident. As Animate CC is generally vector-based, it is logical to provide vector-based distribution formats.

As SVG animations are realized via JavaScript beyond the CSS3 attributes “transition” and “animation”, there are plenty of frameworks to support you create complex animated SVG. One of the most popular frameworks is called Snap.SVG. It provides a bunch of methods that you can use to create shapes, and to animate them in many different ways.

At that, Snap.SVG also allows you to create interactive animations, which are triggered by a click or tap. When taking a look into the Snap.SVG documentation, you’ll quickly notice how extensive the framework really is. The animate expansion “Snap.SVG Animator” combines the simple controls of Adobe Animate CC and the complex variety of Snap.SVG.

Installing the Free Extension and Getting Started

First, you need to install the free extension “Snap.SVG Animator”. You can find it on the Adobe add-ons website. The extension is available for both the Windows and the Mac version of Adobe Animate CC. You can either install it manually, or directly via Creative Cloud.

As soon as “Snap.SVG” is installed, you’ll find a new document type named “SnapSVGAnimator” within Animate CC. So now, you don’t only choose between HTML5, WebGL, and ActionScript, but you also have the option to set up an SVG document. Just like all the other document types, this one will not allow you to switch types later on.

Thus, you need to decide which format you want to use for development and design as soon as you start a new project. After that, you can work with Animate CC in the way you usually do. This means, creating shapes, converting them into symbols, and creating animations.

Creating Actions via JavaScript

Now you can also build interactive SVG animations using “Snap.SVG Animator”. While HTML Canvas and WebGL provide code fragments to drag into your action window rather easily, these fragments don’t exist for “SnapSVGAnimator”. However, a well-organized API with the most important methods is provided.

How to easily define a click action for a symbol entity:

this.example.click(function() {
this.example.play();
});

In the example, clicking the entity “example” will make it play.

Publishing an SVG Document

Publishing your SVG document is very simple and straightforward as well. You’ll choose an output file, and you’ll have the option to influence the compression of the files via extended settings.

Aside from an HTML and a JSON file, the output contains two JavaScript files. These contain the Snap.SVG framework, to assure that all necessary files are generated and made available by Animate CC or the extension, respectively.

(dpe)