During a Google Developers Group session on HTML5, Dr. Allen introduced the group to a web technology called Scalable Vector Graphics (SVG). In instructional technology, SVG can be used to create interactive diagrams that respond to mouse clicks and mouse movements. Many information visualization tools utilize SVG to visualize complex data sets. (Check out http://d3js.org for examples) As a game programmer for the web, I’m excited to see people write browser based games with SVG. For example, check out this nice implementation of Tetris. .
SVG was created by the web community to enable browsers to draw images that keep their fidelity whether they are displayed on a large device or small. SVG accomplishes this purpose by providing commands for drawing shapes, lines, and paths.
In this post, I’d like to introduce this web technology to our readers using a festive example: A silly Christmas Card. In the image displayed below, an “outch” image is displayed when you click on the “angry bird.” If you move your mouse over the snow man image, a “Merry Christmas” image is displayed. Most modern web browsers support drawing SVG files. If you are comfortable with changing HTML, you will have no problem with SVG files.
Most of the SVG Christmas card was designed using a free tool called Inkscape. You can review a very complete users guide here. InkScape runs on Windows, Mac and Linux.
Google Docs users should also note that you can export Google Drawing files to SVG. Under the “file” menu, select “Download as…” followed by “Scalable Vector Graphics(.SVG).”
To make SVG’s interactive, you need to have a basic understanding of editing an SVG file. You can edit SVG files using your favorite text editor. W3Schools.com provides a great introduction to learning SVG and JavaScript from a code perspective.
Code break down for Christmas Card
In the following JavaScript code that appears after SVG tag, we defined a few functions to handle the interactive elements of the file. In Inkscape, I defined a named groups for the “snowMan”, “merryChristmas” message, the “outch” message, and “angryBird.” As we move our mouse over the snowman, we grab a reference to the “merryChristmas” message and display it. As the mouse leaves the snowman, we hide it.
To learn more about JavaScript programming, visit CodeAcademy.com .
If we click on the angry bird, we grab a reference to the “outch” element and display it. We schedule a function call that will hide the “outch” element after 2 seconds.
The following code shows how we connected mouse over events to the snowman group. Please note how we named the group using the ‘id’ attribute.
The following code shows how we connected a mouse click event to the angryBird group. Please note how we named the group using the ‘id’ attribute. You can edit the ‘handleClickForBird’ function to load other web pages using ‘window.open’ or anything else you can image.
Related Posts