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.
As with any promising new web medium, SVG defines new spaces for development and creativity. Unlike other static image formats, an SVG-format image is scriptable; it can be referenced and manipulated with JavaScript and other scripting languages. You could, for example, customize the text in an SVG graphic so that it is displayed in whatever language the browser specifies.
You could also process a database of map information from a web page and construct a graphical map as an SVG image. And talk about graphics capabilities! Photoshop and Illustrator enthusiasts will be impressed at the range of features SVG offers. Besides the basic shapes, colors, and strokes, you can take advantage of animation, clipping, masking, and gradient capabilities all in a text file!
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.
