SVG with javascript

In this tutorial I will explain how can you create SVG files in Inkscape and add javascript code to it so that you can have use it as a vectorial webpage with interactivity. Several browsers support SVG natively (Internet Explorer don't).

If you want to see an example of this technology try this: http://bighead.poli.usp.br/~juca/code/svg/minigame/minigame.svg I will focus on the techniques I used to develop this game.

First thing you should do is to create the art in Inkscape. In my case, I have drawn the handheld console and all of the sprites that appear in the grey LCD display.

Then you should select portions of the drawing which you want to control using javascript, group it and give it an id attribute. To group you use Ctrl+G, and to set a value for the id attribute you use ctrl+shift+O.

In my handheld game I have flashing lights. These lights are soft grey when off and dark grey when on. I could have used a single drawing and set its fill-color using javascript, but I prefered to have 2 copies of the sprite (one exactly over the other) and then hiding the top one when the sprite is unlit. Changing colour wouldnt be hard in the handheld example, but it definetly would in this other exaple of flashing lights: http://bighead.poli.usp.br/~juca/code/svg/pinball/PARTY-land.svg where sprites have different color and even some sprites have more than a single color;