Tags are used in HTML5 to place and organize content at a level
that is descriptive. This does not mean that the page will look
good. Presentation of content on the page is controlled using
Cascading Style Sheets Level 3, or CSS3, in HTML5.
There are times, however, when you need to present graphics,
too. Typically, HTML has only provided support for pixelbased
images in JPEG and GIF image format. With HTML5, you
can now create mathematically generated images. The new
formats are scalable vector graphics (SVG) and CANVAS. The
difference between the two is that SVG is an XML-based language
that describes how an image should be displayed in twodimensional
(2D) constructs. The CANVAS tag also describes
2D images, but it does so using JavaScript. The CANVAS tag
also allows you to easily
integrate interactivity within it using
JavaScript.
In this article you will learn the following:
• The new image formats available in HTML5.
• How to draw using SVG.
• How to draw with CANVAS.
• How to add interactivity to CANVAS using JavaScript.
The goal at the end of this article is that you will understand
how you can use the image formats in HTML5.