HTML and CSS Reference
In-Depth Information
RENdERING HTML5
ILLUsTRaTIoN
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 graph-
ics, too. Typically, HTML has only provided support for pixel-
based 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 lan-
guage that describes how an image should be displayed in two-
dimensional (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:
• ThenewimageformatsavailableinHTML5.
• HowtodrawusingSVG.
• HowtodrawwithCANVAS.
• HowtoaddinteractivitytoCANVASusingJavaScript.
The goal at the end of this article is that you will understand
how you can use the image formats in HTML5.
The Tale of Web Image Formats
The Web is not a friendly place for a designer. For many years
you have been limited to the number of file formats you can
use. There are two predominant file formats used on the Web for
creating graphics: JPEG and GIF.
Bitmap Images: Using JPEG, GIF, and PNG
Images on the Web
Both JPEG and GIF image formats are raster images created
from pixels of individual color. Both have positives and nega-
tives. JPEG images are an open standard managed by the Joint
1
Search WWH ::




Custom Search