Ever since the early days of the Web, HTML has supported images on web pages. However, we've had to limit ourselves to primitive, static bitmap files. As you may or may not know, bitmap files are somewhat inefficient because they describe images using thousands of little rectangles called pixels. Although bitmaps are necessary for photo-realistic images, a type of graphic approach known as vector graphics is actually much more efficient for many kinds of web graphics. If you've ever watched a Macromedia Flash animation or visited a web site built in Flash, you already have some idea of what vector graphics can do. There are a few vector graphics file formats supported on the web, including Flash, but XML makes it possible to construct vector graphic images directly on web pages using straight XML code. Using a plug-in such as Adobe's SVG Viewer, web browsers are able to process SVG (Scalable Vector Graphics) images just as they do bitmap images such as GIF, JPEG, and PNG images.
Needless to say, I could fill a tutorial with everything you can do with SVG. But for the next tutorial, you'll explore the rudiments and just a couple of the more advanced features. This includes the following:
- Why to use SVG
- How to configure your browser to handle the SVG format
- The basics of shapes, lines, and colors
- Placing text on a path
- Rotating a shape
Those who have worked with drawing programs will have a good frame of reference for the material that follows, but readers new to computer graphics will also find this an easy entry point.