{"id":1253,"date":"2013-12-14T14:29:32","date_gmt":"2013-12-14T14:29:32","guid":{"rendered":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1253"},"modified":"2013-12-14T14:55:39","modified_gmt":"2013-12-14T14:55:39","slug":"creating-interactive-images-with-svg","status":"publish","type":"post","link":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/creating-interactive-images-with-svg\/","title":{"rendered":"Creating Interactive Images with SVG"},"content":{"rendered":"\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=http%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Fcreating-interactive-images-with-svg%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n<p><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/12\/Inkscape.png\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-1261\" title=\"Inkscape\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/12\/Inkscape-300x225.png\" alt=\"Inkscape &amp; SVG\" width=\"300\" height=\"225\" srcset=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/12\/Inkscape-300x225.png 300w, http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/12\/Inkscape.png 1024w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>During a <a href=\"https:\/\/plus.google.com\/communities\/117681570238289415567\">Google Developers Group<\/a> 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 <a href=\"http:\/\/d3js.org\">http:\/\/d3js.org<\/a> for examples) As a game programmer for the web, I&#8217;m excited to see people write browser based games with SVG. For example, check out this nice implementation of <a href=\"http:\/\/www.codedread.com\/yastframe.php\" target=\"_blank\">Tetris.<\/a> .<\/p>\n<p>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.<\/p>\n<p>In this post, I&#8217;d like to introduce this web technology to our readers using a festive example: A silly Christmas Card. In the image displayed below, an &#8220;outch&#8221; image is displayed when you click on the &#8220;angry bird.&#8221; If you move your mouse over the snow man image, a &#8220;Merry Christmas&#8221; 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.<\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/inspiredtoeducate.net\/christmasCard\/christmasCard.svg\" width=\"400\" height=\"400\"><\/iframe><\/p>\n<p>Most of the SVG Christmas card was designed using a free tool called <a href=\"http:\/\/inkscape.org\/en\/\">Inkscape.<\/a> You can review a very complete users guide <a href=\"http:\/\/tavmjong.free.fr\/INKSCAPE\/MANUAL\/html\/\">here.<\/a>   InkScape runs on Windows, Mac and Linux.   <\/p>\n<p>Google Docs users should also note that you can export Google Drawing files to SVG. Under the &#8220;file&#8221; menu, select &#8220;Download as&#8230;&#8221; followed by &#8220;Scalable Vector Graphics(.SVG).&#8221;<\/p>\n<p>To make SVG&#8217;s interactive, you need to have a basic understanding of editing an SVG file. You can edit SVG files using your favorite text editor. <a href=\"http:\/\/w3schools.com\/svg\/svg_intro.asp\">W3Schools.com<\/a> provides a great introduction to learning SVG and JavaScript from a code perspective.<\/p>\n<h3>Code break down for Christmas Card<\/h3>\n<p>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 &#8220;snowMan&#8221;, &#8220;merryChristmas&#8221; message, the &#8220;outch&#8221; message, and &#8220;angryBird.&#8221; As we move our mouse over the snowman, we grab a reference to the &#8220;merryChristmas&#8221; message and display it. As the mouse leaves the snowman, we hide it.<\/p>\n<p>To learn more about JavaScript programming, visit <a href=\"http:\/\/www.codecademy.com\/tracks\/javascript\">CodeAcademy.com .<\/a><\/p>\n<p>If we click on the angry bird, we grab a reference to the &#8220;outch&#8221; element and display it. We schedule a function call that will hide the &#8220;outch&#8221; element after 2 seconds.<\/p>\n<p><code><br \/>\n<script type=\"text\/javascript\">\n\tfunction handleMouseOverForSnowMan()\n\t{\n\t\tvar merryChristmas = document.getElementById(\"merryChristmas\");\n\t\tmerryChristmas.style.display=\"block\";\n\t}\n\tfunction handleMouseOutForSnowMan()\n\t{\n\t\tvar merryChristmas = document.getElementById(\"merryChristmas\");\n\t\tmerryChristmas.style.display=\"none\";\n\t}<\/p>\n<p>\tfunction handleClickForBird()\n\t{\n\t\tvar outch = document.getElementById(\"outch\");\n\t\toutch.style.display=\"block\";\t\t\n\t\tsetTimeout(\"hideOutch()\", 2000);\n\t}<\/p>\n<p>\tfunction hideOutch()\n\t{\n\t\tvar outch = document.getElementById(\"outch\");\n\t\toutch.style.display=\"none\";\t\t<\/p>\n<p>\t}<\/p>\n<p><\/script><br \/>\n<\/code><\/p>\n<p>The following code shows how we connected mouse over events to the snowman group. Please note how we named the group using the &#8216;id&#8217; attribute.<\/p>\n<p><code><br \/>\n    <g\n       id=\"snowMan\"\n      onmouseover=\"handleMouseOverForSnowMan()\"\n      onmouseout=\"handleMouseOutForSnowMan()\"\n      ><br \/>\n<\/code><\/p>\n<p>The following code shows how we connected a mouse click event to the angryBird group. Please note how we named the group using the &#8216;id&#8217; attribute. You can edit the &#8216;handleClickForBird&#8217; function to load other web pages using &#8216;window.open&#8217; or anything else you can image.<\/p>\n<p><code><br \/>\n    <g\n       id=\"angryBird\"\n       onclick=\"handleClickForBird()\"\n      ><br \/>\n<\/code><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Related Posts<\/strong><\/p>\n<ul>\n<li><a title=\"Benefits of Teaching Kids To Code That No One Is Talking About\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=623\">Benefits of Teaching Kids To Code That No One Is Talking About<\/a><\/li>\n<li><a title=\"7 Reasons Why The Makers Movement Is Revolutionary\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=942\">7 Reasons Why The Makers Movement Is Revolutionary<\/a><\/li>\n<li><a title=\"How to Build Your Mobile App using HTML\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=849\">How to Build Your Mobile App using HTML<\/a><\/li>\n<li><a title=\"Maker Camp: Free Virtual Summer Camp for Teens\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=961\">Maker Camp: Free Virtual Summer Camp For Teens<\/a><\/li>\n<li><a title=\"5 Resources To Help You Teach Kids Programming\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=689\">5 Resources To Help You Teach Kids Programming<\/a><\/li>\n<li><a title=\"5 reasons to love Khan academy for computer science\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=202\">5 reasons to love Khan academy for computer science<\/a><\/li>\n<\/ul>\n\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=http%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Fcreating-interactive-images-with-svg%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,16,23,8,1],"tags":[],"_links":{"self":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/1253"}],"collection":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/comments?post=1253"}],"version-history":[{"count":15,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/1253\/revisions"}],"predecessor-version":[{"id":1269,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/1253\/revisions\/1269"}],"wp:attachment":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/media?parent=1253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/categories?post=1253"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/tags?post=1253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}