A Neon Sign—Animation

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. (GIF).
An animated neon sign (SVG). View page in Firefox, Opera, etc.
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 via SMIL. Until recently, support by SVG viewers was limited. It will not be included in Internet Explorer 9. JavaScript or ECMAScript can also be used for animations. This is more widely supported. Most web browsers support JavaScript but the speed of JavaScript in older browsers is poor, especially for complicated drawings. The most recent browsers have vastly improved speed. An alternative method to using JavaScript is to use an external program such as Gimp to create an animated GIF.[6] 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 facilitate 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 print and PDF versions of the book. For more information, check the book's web site.



[6] It is normally recommended to save drawings in the PNG format rather than the GIF format. Unfortunately, the animated versions of the PNG format, MNG and APNG, have limited support. This leaves the GIF format the only real option for animation.