Choosing A Vector Graphics Format For The Internet

Background

The market for vector graphics has grown considerably, in part, as a result of improved processing and rendering capabilities of modern hardware. Vector-based images consist of multiple objects (lines, ellipses, polygons, and other shapes) constructed through a sequence of commands or mathematical statements to plot lines and shapes in a two-dimensional or three-dimensional space. For Internet usage, this enables graphics to be resized to ever increasing screen resolutions without concern that an image will become 'jaggy' or unrecognisable.

File Formats

Several vector formats exist for use on the Internet. These construct information in the same way yet provide different functionality. The table below provides a breakdown of the main formats.

Name	Developer	Availability	Viewers	Uses
Scalable Vector Graphics (SVG)	W3C	Open standard	Internet browser	Internet-based graphics
Shockwave/Flash	Macromedia	Proprietary	Flash plugin for browser	Video media and multimedia presentation
Vector Markup Language (VML)	W3C	Open standard	MS Office, Internet Explorer, etc.	XML-based format.

For Internet delivery of static images, the W3 recommend SVG as a standard open format for vector diagrams. VML is also common, being the XML language exported by Microsoft products. For text-based vector files, such as SVG and VML, the user is recommended to save content in Unicode.

If the vector graphics are to be integrated into a multimedia presentation or animation, Shockwave and Flash offer significant benefits, enabling vector animation to be combined with audio.

Creating Vector Graphics

A major feature of vector graphics is its ability to construct detailed objects that can be resized without quality loss. XML (Extensible Markup Language) syntax the basis of the SVG and VML languages is understandable by non-technical users who wish to understand the object being constructed. The example below demonstrates the ability to create shapes using a few commands. The circle, shown on the left, was created by the textual data on the right.

<svg width="8in" height="8in"> <desc>This is a red circle with a black outline</desc> <g><circle style="fill: red; stroke: black" cx="200" cy="200" r="100"/> <text x="2in" y="2in">Hello World</text></g> </svg>

Figure 1: SVG graphics and associated code

XML Conventions

Although XML enables the creation of a diversity of data types it is extremely meticulous regarding syntax usage. To remain consistent throughout multiple documents and avoid future problems, several conventions are recommended:

• Lower case should be used through. Capitalisation can be used for tags if it is consistent throughout the document.
• Indent buried tags to reduce the time required for a user to recognise groups of information.
• Avoid the use of acronyms or other tags that will be unintelligible for anyone outside the project. XML is intended as a human readable format, so obvious descriptions should be used whenever possible.
• Avoid the use of white space when defining tags. If two word descriptions are necessary, join them via a hyphen (-). Otherwise concatenate the words by typing the first word in lower case, and capitalising subsequent words. For example, a creation date property would be called 'fileDateCreated'.

The use of XML enables a high level of interoperability between formats. When converting for a target audience, the designer has two options:

1. Vector-to-Raster conversion - Raster conversion should be used for illustrative purposes only. The removal of all coordination data eliminates the ability to edit files at a later date.
2. Vector-to-Vector conversion - Vector-to-vector conversion enables data to be converted into different languages. The use of XML enables the user to manually convert between two different formats (e.g. SVG to VML).

At the start of development it may help to ask your team the following questions:

1. What type of information will the graphics convey? (Still images, animation and sound, etc.)
2. What type of browser/operating system will be used to access the content? (Older browsers and non Mac/PC browsers have limited or no support for XML-based languages.)

Further Information

• Official W3 SVG site,
  <http://www.w3.org/Graphics/SVG/Overview.htm8>
• An Introduction to VML,
  <http://www.infoloom.com/gcaconfs/WEB/chicago98/wu.HTM>
• Flash and Shockwave,
  <http://www.macromedia.com/>