Work on Graphics is being managed as part of W3C's Document Formats domain.
Graphics continue to play a critical role in the rapid adoption of the Web. The W3C Graphics Activity has worked in this area for five years. Its early success was with the Portable Network Graphics (PNG, pronounced "ping") format, which now has widespread support on the latest generation of browsers. Scalable Vector Graphics (SVG) is the current effort of the activity, with the promise of bringing the powerful combination of two-dimensional vector graphics and Extensible Markup Language (XML).
The initial motivation for developing PNG graphics was to replace GIF with something better. The design of PNG goes further and adds many new features. PNG is a lossless format, which means that when the image is decompressed, the exact original pixel values are preserved. PNG graphics also support true color in addition to indexed color, whereas only the latter is supported by GIF (so GIF is lossy for truecolor images). In true color, RGB (and optionally, alpha) values for each pixel are specified directly, while indexed color represents each pixel as an entry in a palette. At a cost of relatively little extra memory, true color gives greatly enhanced graphical quality and dispenses with all the bother of dealing with palettes and is also invaluable when you have variable translucency.
PNG, since it is now mature and very widely implemented, is currently proceeding through ISO standardisation and is expected to become a Draft International Standard shortly. By arrangement between W3C and ISO, the ISO PNG specification will be freely available on the W3C Web site.
Since the issue of the PNG graphics format as a Recommendation in 1996, the Graphics Activity has embarked on a new area of interest. Until now, graphics on the Web have consisted of images effectively represented as a sequence of colored pixels. GIF, JPEG and PNG, are all examples of bit-mapped graphic formats which are based on this principle. However, rather than sending pixel values down the wire, an alternative approach is to send instructions for drawing lines or curves (vectors) and filling these shapes. Many Web graphics are created this way, but are then converted to raster images at a fixed size. It is preferable to retain the scalable vector information.
There are a number of proprietary vector graphic formats being used on the Web, but these are generally implemented by plug-ins. This prevents their being used in all the places that natively supported raster graphics can be. No single format is widely and well supported by tools for creating pages, and in general there is a lack of cross-platform support.
It became apparent that there were two different markets for vector graphics.
In one, technical documentation for industry, there was no desire for restylable graphics or for graduated fills, but precise specification of line and hatch styles and use of Computer Graphics Metafile (CGM) was an important requirement. This market had already standardized on CGM, but lacked a vendor-neutral and interoperable hyperlinking mechanism. To satisfy the needs of this market, which covers the aerospace, defense, automotive and electronics industries, the WebCGM profile was developed in collaboration with CGM Open. CGM is an ISO standard for vector graphics. The WebCGM profile adds additional constraints to improve interoperability, defines how hyperlinking works, and defines mechanisms for use in HTML.
The other market, graphic design for advertising, clip art, business presentations and general Web use, needs complex fills, restyling, image clipping and manipulation, and re-usable components. For this market, use of CGM was regarded as less important than good integration with XML and other W3C specifications.
W3C has therefore been developing a new standard format for vector graphics, Scalable Vector Graphics (SVG), written in XML and usable as an XML namespace, that matches the needs of content providers and browser vendors alike. It is designed to be stylable, to work well across platforms, output resolutions, color spaces, and a range of available bandwidths. will mean that Web documents will be smaller, faster and more interactive, and be displayable on a wider range of device resolutions, from small mobile devices through office computer monitors to high resolution printers. This is a significant advance in Web functionality
What are the advantages of using vector-based graphics on the Web? The following points offer a simple summary.
Bit-mapped graphics may look good when first created, but problems arise when they are viewed on different kinds of screens at different sizes. When printed at a different size from the original, the quality of bit-mapped images is also far from perfect. When you scale an image, the lines become jagged and the image blurred.
Another advantage is the ability to apply different styles. Whereas bit-mapped images are essentially "frozen", with vector graphics you can apply different styles; for example, the text in diagrams can be set to a particular font or color.
If the drawing instructions include text, then this becomes selectable and searchable without the need for optical character recognition.
In some cases after compression, vector graphics images will be considerably smaller than the bit-mapped equivalent.
When diagrams are represented appropriately, using the hierarchical grouping facilities of XML, they are easier to revise, search engines can index them meaningfully in terms of what the diagrams contain, and they are accessible to people with visual disabilities. These benefits are lost if diagrams are only represented as a flat collection of lines and fills.
By relying on the use of stylesheets, descriptions and titles can be allowed as XML content, rather than being hidden away in ALT attributes or LONGDESC links. This improves accessibility and helps with internationalization, since the textual content can now contain markup.
The term Scalable Vector Graphics has been chosen to emphasize that the graphics generated by a vector graphics format for the Web will render properly even if they are re-sized when displayed on different screens, or for the purpose of printing on paper. This benefit to Web users as a community cannot be understated.
Scalable Vector Graphics is being written in XML, and can be used as an XML "namespace". This means that the SVG graphics language will be able to be used in conjunction with other XML tag sets such as those belonging to XHTML and MathML markup. SVG graphics will provide for rich page-layouts, integrating vector graphics in SVG with text written in other XML namespaces. SVG will support layering and masking for sophisticated graphic effects. It is possible to re-use SVG graphical objects between documents and preserve their appearance, linking behavior and style; either by cut and paste, or by linking.
The style sheet language CSS plays an important role in SVG graphics, controlling, for example, the fonts used, the color of lines and fills, and other aspects of presentation. This allows a Web page designer to reuse the same graphic on different pages, restyling it in each case; it also allows symbols to be defined and reused, with restyling to match their new context. XSL-T is finding a role in server-side generation of SVG graphics from other XML formats.
A very important aspect of graphics is color. In the context of the Web, the question is this: how can you make sure that a given image created on one machine will look right when displayed (or printed) on another? In conventional printing on paper, great care is taken over color matching; for example, in material depicting goods where color is an important feature, or where color is part of a corporate image. This level of control over color has not been possible on the Web. With Scalable Vector Graphics, we hope to improve matters by allowing information about the colors used in an image to accompany it as it is sent across the Web, enabling a better match to be obtained.
The range of colors which can be displayed or printed on some output device is called its gamut. Screen displays are generally pixel based, controlled by RGB (Red-Green-Blue) values. They tend to have a different gamut from printers and there are some colors that you can display but cannot print. Knowledge about the gamut of a device is important in achieving the best color match. Using sRGB in conjunction with the CSS syntax allows the specification of any visible color.
Another consideration is the gamma value. The relationship between the RGB value and the perceived brightness is non-linear and characterized by a value called "gamma", which varies from platform to platform. If an image is prepared on a machine with one gamma value and displayed elsewhere, it may look either too pale or too dark; washed out or over-saturated; and will have significant color casts.
The gamma value to some extent characterizes a device, but this is still quite a crude method. Beyond gamma values is the notion of more precise control, using color profiles as defined by the International Color Consortium. These provide a more comprehensive description of the color characteristics of different devices, extending, for example, to the manifestation of "white" on the screen; whether pinkish or bluish and so on. If you know the ICC color profile used to generate the image and the profile of the output device, then you can apply the appropriate transformation from one to the other. If colors fall outside the gamut of the receiving device, a compromise is required, which may be influenced by the author's intentions: whether you preserve the relationship between the colors or choose alternative colors. The ICC color profile can be referenced as metadata by the SVG image.
The defined color profile for Scalable Vector Graphics is sRGB, which is a pre-defined color profile usable on all systems (Mac, PC, Unix). It is the same definition as is used by the CSS1, CSS2 and HTML 4 languages. As is the case with the CSS language, it is possible to specify colors which are outside the sRGB gamut - indeed, any visible color may be specified. Whether or not this can be displayed is another matter, and depends on the capabilities of the eventual device. An additional ICC profile can be used to transmit further color information, such as the use of spot colors. Spot color is the simplest and cheapest way of adding color highlights to a printed page.
A Working Group - the Scalable Vector Graphics Working Group - was formed in August, 1998, with participants from a number of major computer companies and other companies with a specific interest in graphics.
The Working Group is chartered to produce a specification for SVG, an SVG test suite, and to encourage and track early implementations to ensure that interoperability is assured. The Working Group has telphone conferences twice a week, an active email list, and meets face to face every few months.
Work on Scalable Vector Graphics has progressed very well. The first draft of the Scalable Vector Graphics (SVG) Specification was published on 11th February,1999 and the eighth draft, which went to second last call, was published on 2 March 2000. An appendix lists the SVG requirements in terms of the high-level objectives which SVG graphics attempts to achieve. These design goals also act as the criteria by which proposed features are judged. The same document also contains detailed requirements for SVG graphics in the form of proposed features.
The SVG language, as described in the present Working Draft, allows for six main types of graphic object: vector graphic shapes (for example, paths consisting of straight lines and curves), images, gradient fills, filters, reusable components such as symbols and markers, and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects, template objects and both procedural and declarative animation.
SVG drawings can be dynamic and interactive. The Document Object Model (DOM) for SVG allows for straightforward and efficient vector graphics animation via scripting. A rich set of event handlers, such as onmouseover and onclick, can be assigned to any SVG graphical object. Because of its compatibility and leveraging of other Web standards, features such as scripting can be done on SVG and other XML elements simultaneously within the same Web page.
A declarative animation syntax, which can be used by many different XML namespaces, has been developed jointly between the SYMM and SVG Working Groups. SVG is the first host language to use this new syntax. It allows animation of any XML attribute and of the cascaded, computed value of any CSS property. Declarative and script-based animations can be used together, if desired.
There is considerable interest in SVG in the community, and one expression of this is the large number of implementations which have been produced. Implementor feedback has been most valuable to the SVG Working Group in the design and refinement of the specification. A number of companies have implemented import and export support for SVG and there are several viewers available on a number of different platforms. WYSIWYG editors are available. For further implementation news, please see the SVG Overview page which is continually updated as implementations are released or updated.
This is a simple example from the current SVG Working Draft. It merely gives the flavor of the language, showing how it uses the XML syntax, managing to accomplish much with a relatively simple notation.
The simplest drawings can be described by a sequence of drawing elements. The following example draws a rectangle with a graduated fill. A complete, stand-alone SVG drawing is bracketed between a <svg> and a </svg>. If several drawing elements share a grouping relationship, or otherwise similar attributes, they can be collected together using a <g> element. The entire file is written in XML syntax.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN"
"http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
<svg width="37mm" height="24mm">
<title>Sample SVG graphic</title>
<desc>A single rectangle with a white through
yellow to red sunburst fill</desc>
<style type="text/css"><![CDATA[
.foo rect { fill:url(#burst);stroke:#FEFEFE }
]]></style>
<defs>
<radialGradient id="burst" cx="50" cy="80" r="90">
<stop offset="0" style="stop-color: #FFC"/>
<stop offset="0.2" style="stop-color: #FF3"/>
<stop offset="1" style="stop-color: #C33"/>
</radialGradient>
</defs>
<g class="foo">
<rect x="2mm" y="2mm" height="20mm" width="33mm"/>
</g>
</svg>
The resulting graphic (view in SVG implementation) will look like this:
The WebCGM Profile was released as a W3C Recommendation on 21st January, 1999. WebCGM is a profile for the reliable exchange of CGM files on the Web. CGM has a significant following in technical illustration, electronic documentation and geophysical data visualization, amongst other application areas. There are now several WebCGM implementations in the marketplace, and WebCGM-enabled authoring tools and document repositories are also starting to appear.
W3C is now working hard on completing the SVG specification, which is planned to move to Proposed Recommendation status by the end of May.
An SVG test suite is also in development by the SVG Working Group, which will help in QA of the SVG specification, as well as aiding developers and users when evaluating the conformance of implementations.
Chris Lilley (chris@w3.org) is the Activity leader and chair of the SVG Working Group.
Created: 1996/05/14 14:18:27
Last update: $Date: 2001/07/06 12:22:04 $
