Vector Graphics for the Web
Added 29 Jul 2008
The early browsers for the Web were predominantly aimed at retrieval of
textual information. Whilst Tim Berners-Lee's original browser for the
NeXT computer allowed images to be viewed, they appeared in a separate
window and were not an integral part of the Web page. The tag
was introduced by Marc Andreessen in the Mosaic browser in 1993 and this
provided a way of adding raster images to Web pages. In 1994 Dave Raggett
developed an X-browser that allowed text to flow around images and tables.
Images then became a firmly established component of Web pages [1]
, [2].
The only image format supported by all the early browsers was the GIF format developed by CompuServe. Later support for the JPEG format (an ISO/IEC standard) was added and in order to overcome some patent issues with the compression technique used in GIF, a new image format, PNG (Portable Network Graphics), was developed [3].
However, there are some major drawbacks to the use of images for representing 2D graphics in Web pages:
- Image size: The size of an image is defined by its width, height and the number of bits allocated to each pixel in the image. The effectiveness of compression depends on the particular compression technique used and the type of image, but for line drawings there is usually a large amount of information to transfer across the Internet. The transfer of images is a major bottleneck when accessing Web sites. It is also not possible to interact with the image without sending a new image.
- Fixed resolution: Once the image has been defined at a specific resolution, that is the only resolution available. Zooming into the image will not reveal more detail. In order to obtain more detail, the image has to be regenerated at a higher resolution.
- Binary format: Image formats are typically binary formats, which can make it difficult to embed metadata in the image format and for other components of Web technology to access metadata about the image.
- Minimal animation: The GIF format allows several images to be defined in one image file (so-called "animated GIFs"), but each image is a static image. To do better than this requires the use of a video format.
- Hyperlinking: Web pages depend on hyperlinking. To introduce hyperlinking into images requires the use of image maps defined as part of the enclosing HTML page. An image map essentially associates hyperlinks with particular geometrical (polygonal) regions of the image. Image maps only allow links from regions of the image, not from particular components of the structure of the objects from which the image is derived.
- Transformation: there is increasing interest in the use of transformation techniques (based on XSLT, for example) to generate presentations of information from descriptions in higher level XML languages, for example a graphical presentation of stock market data or a tabular presentation of the same data. Since image formats are not XML-based, it is not possible to use technology such as XSLT for this purpose.
Scalable Vector Graphics results from the requirement to address these limitations of images. Instead of describing an image as an array of pixel values, vector graphics instead describes a picture as a structured assembly of drawing primitives such as lines, polygons and text. Such descriptions are frequently more compact than images (though this is not necessarily always the case) and admit to manipulation, especially if described using an XML markup language.
Standardization of vector graphics formats is not a new activity. The International Organization for Standardization (ISO) first published the Computer Graphics Metafile - for the storage and transfer of picture description information (CGM) standard in 1987. CGM [4, 5] enabled pictures to be described as a collection of elements of different kinds, representing, for example, primitives, attributes (controlling the appearance of primitives) and control information. CGM was enhanced through a number of revision cycles, acquiring more and more functionality in the process. As the richness increased, it was decided to introduce profiles (restrictions on the set of elements that could be used to describe a picture) for specific application sectors. The Air Transport Association defined a particularly useful profile for the aerospace industry and this formed the basis for a profile for web graphics, WebCGM, which was issued as a W3C Recommendation (standard) in 1999 [6].
The WebCGM profile meets many of the requirements for 2D vector graphics on the Web and it is widely used in the CAD (Computer Aided Design) community for representing engineering drawings. The profile provided facilities to enable pictures to be divided into a set of graphical layers, to group text elements together (which might be scattered across the drawing) for searching purposes, and for linking between parts of pictures. However, CGM is not expressed as an XML markup language and it is not possible to interact with a piece of CGM text displayed in a browser through a Web scripting interface.
The Scalable Vector Graphics activity in W3C was triggered in March 1998 by the submission of a proposal for using XML to represent 2D schematic diagrams, called Web Schematics, submitted by Rutherford Appleton Laboratory (UK) and INRIA (France). This was quickly followed by two submissions from industry consortia, Precision Graphics Markup Language (PGML) from a consortium led by Adobe Systems and Vector Graphics Markup Language (VML) from a consortium led by Microsoft. A fourth proposal, DrawML, a constraint-based higher level langauge appeared later that year. W3C quickly set up a Working Group to develop SVG and after an initial requirements gathering phase, SVG began to take shape. At this point in time (May 2001), SVG [7] has reached the stage of Candidate Recommendation in W3C. It is expected to be published as a full Recommendation later this year; the differences between the Candidate Recommendation and Recommendation are expected to be slight. The work to develop SVG has taken some time, not least because dependencies on other W3C work have emerged, and it was realized that rather than develop specific functionality for SVG, it would be more worthwhile in the longer term to generalize some of the functionality in other Recommendations.