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 via SMIL. Unfortunately, SMIL is not supported by Internet Explorer 9 or Edge. All major web browsers support animation via JavaScript (or ECMAScript). The browser vendors have put a lot of work ensuring that JavaScript is executed fast. 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.