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.
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).”
Code break down for Christmas Card
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.