Table of Contents for

The Modern Web

For many years the only way to display images on the Web was to use JPGs and GIFs, with the former generally used for photographs and the latter for icons and graphics. These formats were later joined by the PNG format, which largely ousted the GIF (for icons at least, although not for animations of cats). But they are all inert image formats; other than simple animation frames, they aren’t capable of handling dynamic or interactive images or graphics, which was generally done with third-party plug-ins such as Flash.

Modern browsers, however, have the luxury of two new graphical formats: Scalable Vector Graphics (SVG), a scalable format that can be included in the DOM and manipulated using CSS and JavaScript, and canvas, an HTML5 element that can be drawn on using an API. Between these two, a whole new range of graphical possibilities has opened up, from interactive charts to on-the-fly image manipulation.

In this chapter, I’ll walk you through the basics of each format, showing some common examples and giving you enough information so you can choose when each format is appropriate. Before I start, however, I’ll briefly explain some key terms and concepts.