How to translate SVG documents for viewing them with any Flash player

Presented with 3 examples of SVG source code, compiled to SWF machine code


Table of Contents

SVG versus Flash
Competing or complementary ?
Now, Flash works anywhere…
Advantage of using the SVG to SWF translation
SVG is easier for generating 2D graphics
Flash also provides XML-oriented or script-based generation tools, but not so easy
SVG is a convenient source code for producing SWF machine code
Demonstrations of SVG to SWF translations
Demo #1: programmed shapes, programmed animations
Demo #2: generated SVG shapes, programmed animations
Demo #3: generated SVG shapes, generated SVG animations
Flash & ActionScript reference documentation
Is Flash a proprietary standard or an open standard ?
How to choose between the ActionScript Version 1, Version 2 or Version 3 ?
How to get the PDF documentation for ActionScript V1 ?
Where to find the HTML documentation for developing with ActionScript V1, V2 or V3 ?
Conclusion and future work

For generating Flash files from XML, Macromedia proposes the FLEX tool:

For generating Flash files from script files, the simplest way is to use the Ming package for PHP:

  • You can find exhaustive tutorials in http://www.gazbming.com/

  • However, if you want to edit or to generate complex vector graphics, PHP scripts are probably not as easy as SVG

The 3 following examples are mixing vector graphics that are:

  • Either programmed with a scripting language

  • Or defined by SVG shapes

This first example uses an advanced Flash programming technique. It shows:

  • How to use the SVG to SWF compiler for developing Flash movies using complex programmed animations.

  • How to use SVG for designing a simple user interface containing 2 buttons, 3 sliders, 4 text boxes, 1 canvas area

  • How to insert dynamically created spline curves in a SWF document containing static shapes defined in SVG.


Explanations about this example :

This second example uses a medium level Flash programming technique. It shows:

  • How to use SVG for making SWF movies, for web site introductions, banners, slide show effects, etc.

  • How to design with MS-Word a SVG image containing texts, shapes, images, gradients, textures.

  • How to develop a sequencer program for animating the SWF document generated from the SVG document.


Explanations about this example:

  • For a more detailed description, see in http://gtrebaol.free.fr/doc/flash/mulholland_drive/

  • It is based on 2 pictures published in a magazine.

  • The different animation sequences are programmed in ActionScript:

    • At the beginning, the movie sequence is non interactive,

    • Then the animation stops, until the user clicks on the key lying on the ground.

    • The source code of the sequencer can be modified for producing other animations.

  • The SVG to SWF compiler is called by the Office to SVG compiler:

This third example shows how to use SVG for generating a sequence of computed images, and displaying it with a movie viewer embedded in a Windows application.

This technique is useful in CAD or engineering tools, for displaying animated simulation results: the recorded sequence is smaller and more accurate with vector graphics than with a video format like AVI, MPG or FLV.

For using vector graphics embedded in an engineering application:

  • In the past, you could use the Adobe SVG viewer, but it is no more maintained.

  • For the same purpose, now you can use the Adobe Flash player, working with the SVG to SWF compiler.


Explanations about this example :

  • For a more detailed description, see in http://gtrebaol.free.fr/doc/flash/four_bar/doc/

  • It is inspired by a simulation program of four bar linkages:

    • Written in 1995 by Jean-Pierre Merlet and published by the INRIA (a French research institute).

    • The original program was developed in C language on UNIX, using X11 graphics.

  • In 2007, I rewrote this software for Windows, with a new simulation logic:

    • The simulation program uses neither the SVG DOM nor the Windows GDI primitives.

    • Instead, the graphic primitives are replaced with a SVG file writer: fprintf( svg_file, "<rect class='frame' x='%g' y='%g' width='%g' height='%g' />\n", x, y, w, h );

    • Each step of the animation is nested in a group of shapes, identified by a sequential integer index: <g id='a12052' style='visibility:hidden;'>

    • The generated SVG file includes 2 utility files:

      1. A file for configuring the colors,  containing a CSS stylesheet and gradient definitions.

      2. A file containing an animation script:

        • The animation code for SVG is included in the file animation.js.

        • The SVG to SWF compiler checks if a corresponding ActionScript file exists.

        • If so, instead of the file animation.js compatible with the SVG object model, it compiles the ActionScript file animation.as compatible with the SWF object model.

  • The simulator is a conventional Windows application:

  • For every simulation cycle:

    • A new SVG file is generated, compiled to SWF and loaded in the embedded Flash player.

    • The SVG compiler is loaded and executed as an external program with the Windows system call spawnvp() that is equivalent to the POSIX system calls fork() and execvp().

    • The cycle is fast, because the SVG to SWF compiler works in a fraction of second.

    • The same principle of operation could be used on UNIX / Linux systems.

  • The code of the animation sequencer is short and similar for the SVG and SWF versions:

    • The sequencer is implemented in a JavaScript function called every 33 milliseconds.

    • The SVG + JavaScript version uses the setTimout() timer primitive: setTimeout( sequencer_tick, 33 );

    • The Flash + ActionScript version uses the built-in sequencer of the flash player: this.onEnterFrame = sequencer_tick;

  • Then, the performances of the generated SVG and SWF files can be compared on a standard PC :

    • A Pentium 4 at 3GHz, with a RAM of 1GB.

    • Windows XP SP2.

    • Mozilla SeaMonkey V1.1.7.

    • Adobe Flash Player V9.0.

  • As a result, the simulation converted to the SWF format is much smaller and faster than the SVG source file :


Although Flash and ActionScript are not official Web standards, both Flash and ActionScript have a widely accessible reference documentation.

I hope that the SVG to SWF compiler presented in this paper will help SVG to develop like the other Web standards promoted by the W3C.

A possible evolution would be the integration of XML 2D and XML 3D graphics :

  • For engineering applications using both 2D and 3D graphics, it would be interesting to use XML documents combining:

    • 2D graphics, conformant to the SVG standard.

    • 3D graphics, conformant to the X3D standard.

  • Internally, the SVG to SWF compiler is built around a fast XML DOM library, designed for:

    • Identifying efficiently the information belonging to different XML namespaces.

    • Storing geometric data in native number formats (short/long integers, IEEE floating point, etc.).

    • Recycling the memory cells and chasing memory leakages.

  • The SVG to SWF compiler can be upgraded for generating machine code in different formats:

    • The existing code generator produces SWF code.

    • A second code generator is in development, for generating OpenGL display lists.

Currently, the SVG to SWF compiler is a beta version software, developed as a hobby project. The code is written in ANSI C language. It is mostly system-independent for the portability on Windows, POSIX, Linux and MacOS platforms. If you are interested in commercial applications or in the development of this tool, your suggestions and comments are welcome !