SVG with javascript

In this tutorial I will explain how you can 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 doesn'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 (or menu option Object->Group), and to set a value for the id attribute you use ctrl+shift+O, which opens the object properties dialog. This can also be opened by right clicking over the selection and choosing "object properties".

To ungroup you can select Object->ungroup or use shift+ctrl+G

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 example of flashing lights: http://bighead.poli.usp.br/~juca/code/svg/pinball/PARTY-land.svg where sprites have different colors and even some sprites have more than a single color.

So, I select one sprite, paint it in soft grey, duplicate it with ctrl+D, paint the duplicated sprite in dark grey, set a value to its id attribute with ctrl+shift+O (let's suppose I give it id="my_light") then I group both copies of the sprite so that I can keep stuff organized and easily manageable. I repeat this procedure to all sprites that I have in my SVG.

After that, we need to add javascript code to the SVG. Script code goes in the <script> tag. We open the svg file in a text editor and add:

<script xlink:href="myscript.js" />

and we also need to add onload="on_load(evt);" to the <svg> tag. This means that after the browser loads, it will call a javascript function called on_load.

Then we create the myscript.js file. It will contain the javascript code that will manipulate our SVG drawing in the browser.

I suggest that you use this as an initial javascript code:

var svgDocument;

function on_load(evt){
   O=evt.target;
   svgDocument=O.ownerDocument;
}

function turn_on(id){
   svgDocument.getElementById(id).setAttribute("visibility","visible");
}

function turn_off(id){
   svgDocument.getElementById(id).setAttribute("visibility","hidden");
}

in the on_load function you could hook some callbacks to click events so you could do suff like:

//this goes inside on_load(evt) function!
svgDocument.getElementById("button").onclick = user_clicked_my_button;

and declare a function which would be called when the user clicks the svg group which has id="button":

function user_clicked_my_button(){
    //when user clicks this button we turn on the light which has id="my_light"
    turn_on("my_light");
}