View Single Post
Old 01-26-2005, 04:44 PM  
mind
Confirmed User
 
Join Date: Apr 2004
Location: Aarhus, Denmark
Posts: 1,199
Design tip of the day: Vector art

Vector Graphics is a highly usable and aesthetically superior image format that is expected to replace raster graphics on the Web. Unlike pixelbased graphics, vector art is based on mathematical instructions which gives several advantages.

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.

Vector compared to Pixel graphics


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 or put in flash format which not all computers, browsers has installed.

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.

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.


So designers its time to take vector creativity to a new level - and webmasters its time you learned about the powers of vector driven graphics.
__________________

MiND | ProDesignLab.com
mind is offline   Share thread on Digg Share thread on Twitter Share thread on Reddit Share thread on Facebook Reply With Quote