Creating Graphics for Both Web Pages and PDA Displays

Sara Kubik introduced us to the world of Scalable Vector Graphics ( SVG ), which are actually XML documents that can be accessed both by XML and XSL to make dynamic changes, such as call-outs for diagrams. She has several handouts on the STC site.

Raster, Vector and SVG Graphics

Currently most graphics on the web are raster graphics, such as .gif, .jpg and .png files, which consist of "a RECTANGULAR grid in which different pixels illuminate specific colors." If you enlarge a raster image, you will clearly see the separate pixels. Nevertheless raster graphics are excellent for displaying the texturesm feathering, and blurring of photo-realistic images.

Vector graphics are "smart", in that they are "created through mathematical commands that define their size, position and geometry," in other words, shapes, lines and curves. They are great for images that don't have to be realistic, but that need to be scalable without loosing detail. Typical uses are for maps, Computer Aided Design, such as Visio diagrams, Flash animations and Illustrator graphics. Unfortunately, there are many different file types, which must be either converted to raster graphics or used with a viewer to display outside the original program.

SVG graphics are similar to Vector graphics, but they are defined as an XML document, which means that they can be manipulated just as any ther XML document with XSLT and other XML technologies. You see SVG graphics at work in, for example, web weather sites, which show varying icons with sun, clouds and rain, depending on the weather data they are based on, or car sites, where you can "design" your own car. Since they are scalable, the same diagram can be used for many different screen types, including those used to illustrate this section. The biggest drawback right now is that they are not currently supported by the latest versions of Internet Explorer and Netscape. You still need a viewer to display them. If you'd like to be able to view SVG images, you can download the SVG Viewer from Adobe: http://www.adobe.com/svg/viewer/install/main.html See also the demos on the SVG home page, while you're there. However, some of the newest cellphones made by Nokia, Eriksson, Texas Instruments and some Japanses manufacturers, have it installed free, and Pocket PCs (but not Palms) are also supported.

SVG for the Programmer

Since SVG is XML, programmers can integrate SVG diagrams with the other the other XML lanuges, stored in databases and used in networks. They are open-source graphics that don't need expensive software to create them (although some of the expensive software, like Illustrator, can be used to create them.) If you right click on a SVG graphic, you can view its source code - and borrow it - just like an HTML or XML file.

SVG for the Designer

The design community isn't exactly eager to get into SVG graphics because of their open-source character. It is rather difficult to protect your work. Nevertheless, the Vector based graphics programs are beginning to add SVG facilities. SVG have so many advantages, it is hard to ignore them for long. Among the advantages:

SVG for Business

Since SVG files are vectors, you don't have to pay designers for various versions of the same graphic.