Web Images: Vector Graphics

Related Articles

Article Links

Vector Graphics

A more highly usable and aesthetically superior image format will replace raster graphics on the Web are vector graphics, which are based on mathematical instructions . To create the bitmap circle in figure 9.1a uses a relatively large amount of computer memory. The same image could be described in vector format by a simple mathematical instruction.

One great advantage that vector graphics have over bitmaps is that they are resolution-independent or scalable, giving rise to the term Scalable Vector Graphics or SVG's. This means they can be enlarged according to their output device such as a printer without consuming any more disk space. In terms of the Web, this means that the download time of an image will be the same regardless of the size of the image. They will also remain as sharp when scaled to a large size as when they are presented small, unlike bitmaps, which appear "blocky" when scaled upwards. This elegance in scaling that vector graphics can accomplish is one of the main advantages they have over bitmap formats and will be irresistible to website designers seeking to create more professional-looking websites in the future.

Unfortunately bitmap formats are the standard graphic file formats on the Web at the moment, which means that vector graphics have to be rasterised in order to be displayed in current browsers.

SVG is plain text XML. The code can be written within HTML code, eliminating the need for additional files, unlike Flash, which uses additional binary files. Predefined shapes will be created from the markup, which is at present being finalized by the W3C.

Positioning of vector graphics will be determined using cascading style sheets (CSS). By harnessing the power of CSS, SVG will be able to accomplish the whole range of CSS capabilities such as layering and grouping.

SVGs will have the ability to incorporate text. They will be able to be named which means they can be used in scripting, they can be defined and used elsewhere much like the class attribute in CSS - a very powerful capability. JavaScript could be used to manipulate SVG's meaning that techniques such as rollover effects and animation could be applied. Harnessing the attribute capabilities of images has huge potential for image retrieval. "Unfortunately very little systematic research has yet been done on this topic" (Eakins, 1998)

The W3C are incorporating backwards compatibility into the SVG specification so that older browsers will be able to handle the format. The ability the use the equivalent of HTML's ALT tag will be available so that a GIF or JPG image could be displayed instead of the SVG.

Both Netscape and Microsoft are co-authoring the new standard, ensuring compatibility across platforms, something that was lacking in the construction of HTML.

Image Optimisation

Publication Date: Monday 14th July, 2003
Author: Ukwdc View profile

Related Articles