Animation with SVG and Javascript

A Tutorial

This tutorial will show you how to make an animation using Scalable Vector Graphics (SVG) and Javascript. We will create a bouncing smiley face like the one shown below. Click on the smiley face to make it bounce.

You will need:

• A text editor such as WinEdit, ConText, Emacs, SimpleText or Notepad. My personal preference is for ConText if I'm using a Win32 system, or Emacs if I'm using some flavour of Unix. They both do nice syntax highlighting (That's where they make the text go lots of pretty colours to make it easier to see what you're doing).
• Adobe SVG Viewer. This is the plug-in for the browser to display the SVG. It works best with Internet Explorer. At the time of writing it is possible to install the plug-in for Firefox, but on my system it crashes the browser. If you can see the picture above, then most likely you have it installed already.

If you've got both of those, create a blank text document and we're ready to go…