{"id":84,"date":"2008-11-03T17:30:40","date_gmt":"2008-11-03T16:30:40","guid":{"rendered":"http:\/\/blogs.igalia.com\/eocanha\/?p=84"},"modified":"2015-11-08T00:21:04","modified_gmt":"2015-11-07T23:21:04","slug":"how-to-interact-with-an-svg-image-from-an-html-document","status":"publish","type":"post","link":"https:\/\/eocanha.org\/blog\/2008\/11\/03\/how-to-interact-with-an-svg-image-from-an-html-document\/","title":{"rendered":"How to interact with an SVG image from an HTML document"},"content":{"rendered":"

Did you know that modern browsers already implement builtin support to visualize SVG drawings? And that you can make changes on them from the HTML document and make changes into the document from the SVG? In this post I’m going to explain all that through a simple example.<\/p>\n

To create the SVG document you can use Inkscape<\/a>. This program has a nice feature that allows you to edit attributes of particular nodes. For instance, you can select such a node, open the XML editor (Edit –> XML Editor…) and add a new attribute onclick<\/code> to the node with the value:<\/p>\n

\njavascript:window.parent.document.form1.bodypart.value='head';\n<\/pre>\n
When you’ve finished, just save the document as “plain SVG” to prevent compatibility problems.<\/p>\n
Let’s go to the HTML part now. The easiest way to show the SVG in the document is by using an “embed” tag:<\/p>\n
\n
\n<html>\n<body>\n\n<h1>Anatomy of a smiley<\/h1>\n\n<form name=\"form1\">\nBody part: <input type=\"text\" name=\"bodypart\" \/> <br\/>\n<\/form>\n\n<embed id=\"smiley\" src=\"smiley.svg\" width=\"745\" height=\"1053\" \/>\n\n<\/body>\n<\/html>\n<\/pre>\n<\/blockquote>\n
But that’s not enough. If you want to  change SVG attributes using javascript, just add this code:<\/p>\n
\n
\n<script type=\"text\/javascript\">\n   function changeColor(color) {\n   var path=document.getElementById(\"smiley\")\n      .getSVGDocument()\n      .getElementById(\"path2383\");\n   path.style.setProperty(\"fill\",color, \"\");\n   }\n<\/script>\n\n[...]\n\nColor: <input type=\"text\" name=\"color\" value=\"#FFFF00\" \/> <br\/>\n\n<input type=\"button\" value=\"Change color\"\n onclick=\"javascript:changeColor(this.form.color.value);\"\/> <br\/>\n<\/pre>\n<\/blockquote>\n
And that’s all. Now you have bidirectional knowledge between your HTML document and your SVG document. Take a look here to see the whole example<\/a>.<\/p>\n
There are still pending issues, like embedding the SVG code as part of the HTML source. That can be done including the proper DTDs and making sure that the document is interpreted as XHTML (that’s the most important think). Here is a modified version of the previous example to illustrate that<\/a>, but I hadn’t been able to resolve nodes using this kind of embedded drawings.<\/p>\n
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Did you know that modern browsers already implement builtin support to visualize SVG drawings? And that you can make changes on them from the HTML document and make changes into the document from the SVG? In this post I’m going to explain all that through a simple example. To create the SVG document you can … Continue reading How to interact with an SVG image from an HTML document<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/posts\/84"}],"collection":[{"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":1,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/posts\/84\/revisions"}],"predecessor-version":[{"id":420,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/posts\/84\/revisions\/420"}],"wp:attachment":[{"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eocanha.org\/blog\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}