HTML5 Interactivity

With the addition of the <svg> element to the HTML language in HTML5, we can provide even more ways of interacting with an SVG image. Here I will be demonstrating how the Stock Ticker example can be modified to provide useful interactivity via HTML5.

The first step involved is to simply copy the SVG output from gridSVG, and insert it directly into your HTML document. This method means we treat the SVG image as part of the HTML document as the SVG image is contained entirely within the <svg> HTML element.

The reason why this is used instead of of the <object> element snippet produced by gridSVG is because web browsers treat the content within the <object> element as being separate from the HTML document. This stops any form of interaction between the contents of the HTML document and contents of the <object> element (in this case, our SVG image).

After including the SVG image into an HTML document, we find that we are able to modify the appearance and behaviour of the SVG image because it exists within the same namespace as our HTML document. This means that we can use the same CSS rules to apply styles to SVG images as we do with paragraphs and headers. We also have the ability to modify the SVG image using JavaScript in a similar manner to modifying any HTML element (i.e. we can use document.getElementById("...") on the contents of SVG elements).

Below we have the Stock Ticker example, but it is modified so that we can select which companies we wish to show.