HTML and CSS Reference
In-Depth Information
Listing 7.25. example.js—Canvas and SVG JS code samples, respectively
Pros and cons of SVG in the DOM
SVG's ability to use inline XML elements with HTML markup is its greatest strength, even
if it makes the language difficult with JavaScript. Using XML allows developers to create
animated graphics without relying on another language. In addition, these shapes are DOM
elements, meaning they can be selected and modified during runtime, event listeners can be
easily attached, and CSS can be applied. Canvas doesn't reside in the DOM, so it doesn't
have any of the cool out-of-the-box features that SVG gets.
Figure 7.12
shows you how
Firebug can highlight an SVG image on a page. Try doing this with Canvas elements, and
you'll only be able to see the container's
<canvas>
tag.
