While Inkscape cannot directly handle animation, it is possible to use Inkscape drawings as a starting point for creating animation. This tutorial demonstrates two techniques for creating an animated neon sign. It also discusses a number of issues the artist must consider in creating the animations.

An animated neon sign. (GIF).

An animated neon sign. (SVG).

Several things must be considered in planning an animation. The most critical is how will the animation be displayed? The SVG standard includes provisions for natively incorporating animation. Unfortunately, support by SVG viewers is very limited. JavaScript or ECMAScript can also be used for animations. This is more widely supported. Web browsers such as Opera and Firefox support JavaScript but the support is not very mature. Firefox 2 and 3 in particular perform poorly with complicated drawings. An alternative method is to use an external program such as Gimp to create an animated GIF.^[7] In this case, performance is more than adequate but one loses several advantages of using SVG, such as scalability.

This tutorial is divided into two parts. The first part covers the creation of an unanimated neon sign and the second part covers animating the sign both via an animated GIF and by using JavaScript. Attention is paid to the first part to facilite the animation. Heavy use of the XML Editor is made to give the various drawing objects names useful in the animation as well as to adjust some object parameters.

The full tutorial can be found in the PDF version of the book. For more information, check the book's web site.