This is a sample showing the types of buttons that can be created using custom Button Tags. This simplifies the creation of each Button widget by using the familiar XML element/attribute syntax that SVG'ers are already accustomed to. To see the details of this example, be sure to right-click (or option-click on the Macintosh) the SVG image above.

A summary of the Button elements and their associated attributes follows:

The Button Namespace

You must defined a namespace equal to "http://www.kevlindev.com/gui". The examples that follow below assume that the following namespace prefix has been defined:

xmlns:gui="http://www.kevlindev.com/gui"

button

mode: when set to "toggle", the button will toggle on and off with each click of the mouse. For all other values, the button will toggle on and off with a single mouse click.

x: the x coordinate of the upper left corner of the button

y: the y coordinate of the upper left corner of the button

width: the width of the button

height: the height of the button

label: a string to be used as the text label of the button

callback: a string of JavaScript to be execute each time the button is pressed

Download

In order to use these custom tags, you will need to load the following JavaScript file into your SVG file. Once the SVG file has loaded, you need to make a call to loadGUI() and then all instances of the custom tags will be replaced with their SVG equivalents.