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.