HTML5 Hacks

Chapter 4. Hacking Your Graphics with Canvas and SVG

Over the past decade Adobe Flash became very popular because it allowed us to create and manipulate imagery directly within our web pages. This demand resulted in development of the Canvas specification.

The <canvas> tag is one of the most flexible of the new HTML5 tags. This has made the <canvas> tag the new foundation for web-based gaming and other interactive components. The <canvas> tag itself, much like the name, is a blank slate. It’s a “drawing” surface that gives developers the freedom and flexibility to create imagery that can blend with and complement the rest of the DOM (Document Object Model).

The “underdog” HTML5 illustration tool presented in this chapter is Scalable Vector Graphics (SVG). SVG is probably the oldest technology discussed in this book—it has been supported in some browsers for the past 12 years as it was first supported by Microsoft’s Internet Explorer version 6. Rarely does anyone have anything nice to say about IE 6, but in terms of its support of SVG it was ahead of its time.

SVG is an XML markup language that is very similar to HTML, and will probably be pretty easy for those of you who are experienced with HTML. SVG basically does for graphics what HTML did for text. SVG is lightweight and flexible, and can scale to any size with the same lightweight file.

Although there may seem to be a lot of overlap between these two languages, you will quickly see where each technology shines. It’s clear why the ...