thoughts

An image says more

2006-03-11

One image says more than a thousand words. So true, but what about for instance the commenting system on this site, or thousands of forums throughout the net. None provide a way to include sketches and simple graphs. Here's a step towards a thousand words.

The drawing canvas is a seperate SVG file which is embedded by script. This SVG file contains all drawing functions. Nothing really special here, just an mousemove event listener which adds points to a SVG polyline.

Furthermore I included a javascript file in the body of this document which contains the functions for appending the canvas to this document, nothing special either, I just create an object element and append it after the textarea.

The whole thing will not work when SVG is not supported, so I added an svg:script (script element in the SVG namespace) in which I call the initialisation functions. This way, when SVG is not supported (or scripting by SVG is not supported, which is the case for Opera 8.5), nothing happens:

<div style="display: none">
<svg:script type="text/javascript" xmlns:svg="http://www.w3.org/2000/svg">
  window.addEventListener('load',appendCanvas,false);
</svg:script>
</div>

The surrounding div is added to hide the script content from browsers

When submitting the form, the SVG XML data is appended to the comment textarea and submitted to the database This is done by accessing the SVG DOM from the HTML document and passing it through the XMLSerializer object. When displaying, my cms strips all HTML code but leaves SVG code.

Don't forget to check "embed drawing" when posting.

Compatibility

For this system to work, one needs SVG support and SVG scripting support, which are implemented by Firefox 1.5 and Opera 9 (Tech preview that is).

Furthermore, for viewing the drawn comment, one needs SVG support, which is implemented by Firefox 1.5 and Opera 8.5. I am currently working on an image fallback for other browsers (using php's graphics library to transform SVG into an image).

Additional resources (top 15)

Below is a list of additional resources that might contain extra information about the subject at hand. These are all sites linking to this one (i.e. backtracking).