Scalable Vector Graphics (SVG): Vector Graphics for the Web

david duce

Scalable Vector Graphics (SVG): Vector Graphics for the Web

David Duce discusses the World Wide Web Consortium's Scalable Vector Graphics markup language for 2 dimensional graphics.

To view the Scalable Vector Graphics in this article you will need a viewer. The Adobe® SVG Viewer is a plug-in that will allow your Web browser to render SVG and is available free from the Adobe Web site.

Introducton

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 <img> 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.

The next part of this article looks briefly at the major functionality in SVG.

An Overview of the Functionality of SVG

A simple SVG document and the corresponding picture generated are shown below.

Above: Test picture 1 requiring a plug in.
Available free from the Adobe Web site.

The picture could be incorporated into a HTML page using the object element, for example:

Above: Test picture 1 not requiring a plug in

This illustrates some key features of SVG. The width and height attributes on the object tag establish a viewport (320 pixels wide by 220 pixels high) on the display into which the picture will be drawn. The viewBox attribute of the <svg> element establishes a coordinate system for the picture which is mapped onto the viewport. The origin of the coordinate system is the top left-hand corner, rather than the bottom left-hand corner favoured by mathematicians and computer graphics programmers alike! The coordinate system goes from 0 to 320 in x across the page and 0 to 220 in y down the page. SVG does allow coordinate systems to be defined in more complex ways using units other than pixels and gives control over how the region defined by the viewBox should be mapped into the screen viewport when the two do not have the same aspect ratio, but that goes beyond the scope of this simple introduction.

SVG has two basic drawing primitives, path and text. The outline of the duck is drawn using the path primitive. To represent simple shapes such as lines, polylines, polygons, rectangles, circles and ellipses using the path element is tedious and hence shorthand elements are introduced for these shapes. The use of the <rect> element is illustrated above, to draw the background to the picture.

The path element has an attribute, d, that defines the geometry of the path. It would have been possible to define geometry as the content of the element using XML markup, but this would have resulted in verbose descriptions and hence the decisions were made to define geometry as an attribute and to introduce another little language to describe shapes. That language uses single letter drawing commands, for example M, meaning moveto, L meaning lineto and Z meaning close the path (ie join the last point to the first). The language also contains commands to describe cubic and quadratic Bezier splines, horizontal and vertical line segments, and elliptic arcs. There are some syntactic simplifications that can be applied to path descriptions that help to reduce the number of characters necessary to define a path. Thus a rich range of shapes can be defined in an economical way.

The example illustrates one way of controlling the appearance of shapes, using attributes on the drawing elements. The aspects of appearance that can be controlled in this way include:

colour of the interior and the border of shapes (either as RGB values or as one of 149 different colour names);
opacity: of the border and interior of shapes, from opaque to transparent;
clipping: any path or closed drawing element can serve as a clip path, only the portion of the primitive inside the region defined by the clip path is displayed;
line width, style, join and end characteristics: the attributes that control these characteristics are reminiscent of the attributes defined in the PostScript language;
fill rules (even-odd and non-zero): there are different ways in mathematics to define the inside and outside of a shape, and for some kinds of shapes they give different results;
painting borders and areas using gradients or patterns.

The example above illustrates the use of some of these features.

Gradients and patterns provide rich ways in which to paint shapes. Both linear and radial gradients can be defined, and images can be used as patterns with which to fill the interior of a shape. This functionality can be used to good effect to achieve compact representations of pictures.

Visual appearance can also be controlled by styling. The example above could be rewritten:

...
<rect width="320" height="220" style="fill:white; stroke:black"/>
<g transform="translate(10 10)">
<g style="stroke:red; stroke-width:3; fill:lime">
...

The style attribute is now used to define appearance. The syntax is that of Cascading Style Sheets (CSS) [8].

The <g> element is used to group drawing elements. Two uses of this element are seen in the example. It is easier to explain the second use first! The element <g style="stroke:red; stroke-width:3; fill:lime"> is used to control the appearance of a group of drawing elements. In this instance there is only one drawing element within the group, but were there to be more, they would each have the visual appearance specified by the attributes of the <g> element, unless overridden locally. There is an inheritance mechanism at work here, though the full details are too complex to go into in this short overview. The first <g> element defines a transformation, in this case a translation by 10 units in x and 10 in y, which is applied to all elements in the group. The full range of 2D transformations can be specified, and there is a syntax that allows compound transformations to be specified, for example:

The text element, <text>, enables text to be included in a picture. A simple example is shown below.

<g style="stroke:none; stroke-width:1; fill:red; font-family:Verdana; font-size:20">
<text x="20" y="30">A simple text string</text>
<text x="20" y="60">Illustrating <tspan style="font-size:24; fill:green">tspan</tspan> in action</text>
</g>
<g style="stroke:red; fill:none">
<path id="mypath" d="M 25 200 C 115 50 205 50 295 200 Z"/>
</g>
<g style="stroke:none; fill:green; font-family:Verdana; font-size:20">
<text>
<textPath xlink:href="#mypath"> Illustration of text on a path </textPath>
</text>
</g>

Above: Test picture 2 requiring a plug in.
Available free from the Adobe Web site.

The text element alone does not allow the attributes of the text to be changed within a string. The tspan element provides independent control of both the rendering and geometric positioning of a part of a text string. The textPath element enables a text string to be displayed along an arbitrary path. (The "C" component of the path in the example specifies a cubic Bezier spline, the three points following being two control points and the end point.)

Having rendered a part of a picture, it is then possible to pass an image processing filter over it. This is advanced functionality, but it does enable complex visual effects to be described with fairly minimal markup, and is likely to be useful for pictures of the kind found in graphics art.

SVG also has facilities for describing animation of graphical objects. A simple example is given below.

The visual effect of this is to change the opacity of the red circle from 1 (fully opaque) to 0 (fully transparent) over a period of 5 seconds, starting from when the page completes loading.

Metadata can be included within SVG content, a metadata element is provided for this purpose. The content of the metadata element is provided by elements from other XML namespaces, for example the Dublin Core schema might be used. Metadata may be provided both at the outermost <svg> element and in association with many of the other SVG elements.

In this short space it has only been possible to give a flavour of the functionality of SVG. The major areas of the functionality have been introduced, though much detail has been omitted. It is hoped that the reader has gained an impression of the power and versatility of the language.

Implementations and Tools

Adobe have implemented an SVG plug-in, which is freely available from their web site [9]. At the present time, this is the only browser plug-in for SVG.

In addition to the Adobe plug-in, there are a number of stand-alone SVG viewers available, for example from IBM Alphaworks, CSIRO and Batik.

Plug-ins are also available for a number of illustration packages to generate SVG. Rather than give details here, the reader is referred to the W3C SVG web site, where an up-to-date list of SVG products can be found [10].

References

J. Gillies and R. Cailliau, How the Web was Born, Oxford University Press, 2000
T. Berners-Lee and M. Fischetti, Weaving the Web, HarperCollins, 1999
G. Roelofs, PNG, The Definitive Guide, O'Reilly, 1999
L. Henderson, A. Mumford, The CGM Handbook, Academic Press, 1992
ISO/IEC 8632:1999, Information technology - Computer graphics - Metafile for the storage and transfer of picture description information
WebCGM Profile, World Wide Web Consortium, 1999. Available at: http://www.w3.org/TR/REC-WebCGM/
Scalable Vector Graphics (SVG) 1.0 Specification, World Wide Web Consortium, 2000. Available at: http://www.w3.org/TR/SVG/
Cascading Style Sheets, level 2 (CSS2) Specification, World Wide Web Consortium, 1998. Available at: http://www.w3.org/Style/CSS/
The Adobe SVG plug-in is available from: http://www.adobe.com/svg/
The W3C SVG Web page can be found at: http://www.w3.org/

Author Details

David Duce
Professor in Computing
Institution
Oxford Brookes University

Email: daduce@brookes.ac.uk
Web site: http://wwwcms.brookes.ac.uk/~p0072753/daduce.htm