Flash animation using the SWF file format is a proprietary animation system that has been available on the web since 1996 when Macromedia acquired it and produced a plug-in for the Netscape browser. Macromedia participated early on in the SVG Working Group and contributed to the declarative animation functionality in both SMIL and SVG. Adobe acquired Macromedia in 2005.
Flash animation is distributed using the Shockwave Flash later renamed Small Web Format (SWF).
Both SVG and SWF are vector based formats. The main differences are:
- Paths are defined as integers in SWF while SVG uses floating point numbers
- The coordinate system in Flash is twips (1/20th of a pixel) while SVG effectively allows any coordinate system that can map down onto pixels
- SVG uses cubic Bezier curves while SWF uses quadratic Bezier curves
- SWF is a frame-based format with 12 frames per second as the usual frame rate while SVG's declarative animation is only frame based when using calcMode="discrete"
We will do some comparisons based on the Peculia walk cycle in The Art of Cartooning with Flash by John Kuramato, Gary Leib and Daniel Grey (SYBEX 2002).
The definition of Peculia's arm in SWF using quadratic Beziers is:
M -62 -31 q -26 26 -61 51 q -57 78 -214 228 q -149 144 -212 236 l -36 40 q -22 24 -24 46 l -46 47 q -22 23 -45 28 l -11 1 l -25 7 l -27 4 l -26 2 l -17 7 l -15 17 q -7 12 8 23 l 23 15 l 23 9 l 26 3 l 25 -2 l 13 -3 q 53 -19 123 -87 q 84 -82 117 -103 q 40 -26 115 -115 q 66 -78 123 -101 l 48 -44 v 2 l 42 -35 l 63 -53 l 37 -35 q 195 -168 33 -198 l -23 1 l -16 3 l -21 6 M -589 606 q -38 50 -66 72 q -43 35 -88 32 q -29 -3 -50 -18 v -10 q 142 -4 186 -86 l 18 10
The equivalent in SVG using cubic Beziers is:
M-41-37c-180 100-160 200-310 300s-160 200-260 300 c-20 100-300 100-200 150s200-50 260-100 c140-100 180-200 330-300c100-120 500-350 180-350 M-589 606l-18-10c-60 124-180 64-186 96 c70 30 140 30 202 -86
For curved paths, it is quite likely that you can get significant reductions in size in SVG assuming you have similar accuracy.
Another example is the famous SVG tiger:
With three decimal places accuracy in SVG it is possible to do a very detailed zoom into any part of this image.
The downside is that the SVG image is 112 Kbytes compared with SWF's 17.9 Kbytes.
Here is the complete 12 frame Peculia walk cycle.
The walk is at 10 frames per second over 3 cycles and look pretty much the same whether it is displayed in SWF or SVG.
However, if you decide that you need to play it at a different speed, in SVG discrete mode you can have the walk gradually increasing from 10 frames/sec to 12.5 frames/sec in the second cycle and 20 frames/sec in the third cycle with almost no effort while it would be a difficult rewrite in SWF.
In the second example the speed of walk gradually increases across the three cycles, equally easy to do in SVG's discrete mode.
The walk can be redone using SVG's animate commands with calcMode="linear and a set of values. It is then quite easy to adjust the speed to give a slow motion walk. Various options are shown below starting with the frame-based walk.
Finally, just for fun, here is a more concise walk using calcMode="spline".
To get the 12 frame cycle in SWF takes quite a lot of work changing positions etc for the inbetween positions between the master ones. The spline one is not so well done but it did take a much smaller amount of effort.