SVG with javascript - Revision history

Nathanal: Fix linkrot pointed out by Yash Pal Goyal

2021-01-06T08:04:19Z

Fix linkrot pointed out by Yash Pal Goyal

← Older revision		Revision as of 08:04, 6 January 2021
Line 2:		Line 2:


	If you want to see an example of this technology try this: ~~http~~://felipesanches.googlecode.com/svn/trunk/SVG/minigames/TuxVsMSNbug/minigame.svg		If you want to see an example of this technology try this: [https://web.archive.org/web/20150604155148/https://felipesanches.googlecode.com/svn/trunk/SVG/minigames/TuxVsMSNbug/minigame.svg TuxVsMSNbug minigame (Web Archive)] I will focus on the techniques I used to develop this game.
	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.		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.

Juca at 16:38, 12 January 2015

2015-01-12T16:38:38Z

← Older revision		Revision as of 16:38, 12 January 2015
Line 2:		Line 2:


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

Juca at 02:57, 31 July 2008

2008-07-31T02:57:31Z

← Older revision		Revision as of 02:57, 31 July 2008
Line 7:		Line 7:
	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.		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.		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.		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.
Line 40:		Line 42:
	}		}

	in the on_load function you could hook some callbacks to click events so, you could do suff like:		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!		//this goes inside on_load(evt) function!

Juca at 02:48, 31 July 2008

2008-07-31T02:48:39Z

← Older revision		Revision as of 02:48, 31 July 2008
Line 1:		Line 1:
	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).		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).

Juca at 02:35, 31 July 2008

2008-07-31T02:35:59Z

← Older revision		Revision as of 02:35, 31 July 2008
Line 9:		Line 9:
	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.		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 example 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.		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.		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.

Juca at 02:34, 31 July 2008

2008-07-31T02:34:53Z

← Older revision		Revision as of 02:34, 31 July 2008
Line 48:		Line 48:

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

Juca at 02:30, 31 July 2008

2008-07-31T02:30:50Z

← Older revision		Revision as of 02:30, 31 July 2008
Line 15:		Line 15:
	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:		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" />		<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.		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.
Line 25:		Line 25:
	I suggest that you use this as an initial javascript code:		I suggest that you use this as an initial javascript code:

	var svgDocument;		var svgDocument;

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

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

	function turn_off(id){		function turn_off(id){
	svgDocument.getElementById(id).setAttribute("visibility","hidden");		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:		in the on_load function you could hook some callbacks to click events so, you could do suff like:

	svgDocument.getElementById("button").onclick = user_clicked_my_button;		//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":		and declare a function which would be called when the user clicks the svg group which has id="button":

	function user_clicked_my_button(){		function user_clicked_my_button(){
	//when user clicks this button we turn on the "hello" light		//when user clicks this button we turn on the "hello" light
	turn_on("hello");		turn_on("hello");
	}		}

Juca at 02:29, 31 July 2008

2008-07-31T02:29:12Z

← Older revision		Revision as of 02:29, 31 July 2008
Line 21:		Line 21:

	Then we create the myscript.js file. It will contain the javascript code that will manipulate our SVG drawing in the browser.		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:

			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 "hello" light
			turn_on("hello");
			}

Juca at 02:18, 31 July 2008

2008-07-31T02:18:24Z

← Older revision		Revision as of 02:18, 31 July 2008
Line 9:		Line 9:
	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.		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;		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 color 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.

Juca: New page: 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 browse...

2008-07-31T02:09:40Z

New page: 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 browse...

New page

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;