svg and javascript

I often write little programs to help me with my biotech research. They are usually just text based programs written in Java. I have written interactive graphical programs before in Java, C++, and Flash though. Flash is by far the easiest method for creating interactive graphical content. However, the thing I don't like about Flash is that it is expensive, proprietary, and users must install a plugin to make the content work in their web browser. Now I've discovered how I can make interactive content using javascript and svg. Here is a simple example of such content with an interactive rectangle:

http://azim58.info/drawing%20for%20interactive%20svg.xml

All of the files for making this document can be found in the zip file which can be downloaded here:

http://azim58.info/interactive javascript and svg.zip

While making content this way is still not as easy as it should be, it is not too bad and has many benefits. Javascript and svg are open standard technologies which work in all modern web browsers without any plugins. Here I have made an example in which the user can control the size, color, and title of a rectangle. The basic process for creating the interactive graphical content that I used involves first making the graphics in Inkscape (a very nice free vector graphics editor which I like a lot). Next the svg file is opened in a text editor and the javascript is added.

Here are a few technical notes for those that are interested. A lot of these notes won't make sense to someone who is not familiar with javascript or svg. In fact, a lot of these notes are simply references for myself to refer back to in the future. However, if you have a little bit of programming experience, some of this might make sense to you. These notes might make sense to you especially if you compare the following notes and code to their actual context within the full svg file which can be found in the zip file linked to above.

Technical Notes:
To use the scripts the following xlink tag must be included at the top of the document produced by Inkscape:

xmlns:xlink="http://www.w3.org/1999/xlink"

This "xlink" line of code allows xlinks to be created to the javascript files.

To make a text box I used javascripts from carto.net. The full link is http://www.carto.net/papers/svg/gui/textbox/ which I originally came across by typing "interactive svg" into google. Carto.net has many useful scripts in addition to the textbox script. They have everything from sliders, to checkboxes, to dropdown lists, to . . .etc.

To make a text box using those scripts (included in the files above) at carto.net just use the following text box code in the script part of the text of the svg file produced by Inkscape. Example:

var id = "color_textbox";
var parentNode = "color_textbox";
var defaultVal = "green";
var maxChars = 30;
var x = 387;
var y = 446;
var boxWidth = 200;
var boxHeight = 30;
var allowedChars = "[a-zA-Z ]";
var functionToCall = setColor;
color_textbox = new textbox(id,parentNode,defaultVal,maxChars,x,y,boxWidth,boxHeight,textYOffset,textStyles,boxStyles,cursorStyles,selBoxStyles,allowedChars,functionToCall);

To change an element of the image with the text box make a function like this.

function setColor(textboxId,value,changeType) {
if (changeType == "release") {
document.getElementById("rectangle").setAttribute("fill",value);
}


To include the text box in the actual svg to be displayed on the screen add an element to the svg part.

(less than sign followed by the letter g followed by a space(Blogger wouldn't display these symbols)) id="color_textbox" />"


Once you are all finished just upload the svg file and the associated javascript files to some hosting server. You could also just open the file in your browser directly from your local computer drive. I used godaddy.com. Many of these hosting websites such as godaddy.com don't support the svg extension for some reason. You can get around this by simply changing the .svg extension to .xml and then the file should display properly. You can read more about hosting svg files properly here


http://n3wt0n.com/blog/displaying-an-svg-hosted-by-godaddy/

and here


http://codedread.com/SVGKS_2b.php

There's a lot one can do using javascript and svg, including making an entire game if one wanted to. I've seen an example of a Tetris game online that was made entirely with svg and javascript. There's no reason why one would be limited to something as simple as Tetris though.