

Related items

Perspectives of XML in E-Commerce

XML Conformance : The Burden of Proof

XML Entities and their Applications

XML Euphoria in Perspective

XML and CSS : Structured Markup with Display Semantics

XML Namespaces : Universal Identification in XML Markup

The Emperor has New Clothes : HTML Recast as an XML Application

XML - What's in it for us?

XMLization of Graphics

You are here: irt.org | Articles | Extensible Markup Language (XML) | XMLization of Graphics [ previous next ]

Published on: Monday 27th March 2000 By:


Graphics takes advantage of one of the basic organs of perception — the human eye, and has found applications since the beginning of the computer era. With the rapid growth of the use of the Web in the last few years as a means of communication and information exchange, the significance of graphics has only increased. It may not be an exaggeration to state that a widespread embracement and interest in the Web itself by the general public has been due to the presence of graphics.

One of the important developments of [re]presenting graphics on the Web is taking place in form of SVG. It is important to note that SVG at present is a "moving target" and so some of the issues raised in this work may be resolved in the future.

The focus of the article is the "XMLization" (or expressing computer graphics in XML) in general, and SVG in particular. This work is intended to be an objective introduction and there are topics, particularly related to syntax, authoring, rendering and serving, that we have not dealt with in detail. It is assumed that the reader has a basic background in computer graphics and some familiarity with XML, although the details of syntax are not required.

Graphics for the Web

Since the inception of the Web, computer graphics have always had an important role to play. Most Web graphics today are in raster formats such as GIF or JPEG (to be precise, JFIF), and PNG.

Raster Graphics Considered Harmful

Raster graphics represent graphics images as bit maps. This approach has several limitations. Raster graphical formats must contain information on every single pixel needed to display an image. As a result, they are big and therefore slow for transmission. They are also "unintelligent." For example, they do not "carry" information that could be searched through. They also tend not to scale without loss of data, which can affect the resolution and color of the image.

Vector Graphics for the Web

The term "vector" has its origins in Vector Analysis, and comes from the early days of computing when plotters created graphics by establishing coordinate positions and then drawing lines between them or filling in the area that the points contain. Vector graphics, which are a series of computer commands to "draw" an image. Vector graphics are categorized into primitive shapes (circles, lines, rectangles, and so on) and their characteristics (center, radius, angle, height, width, and so on) along with other instructions (such as, color "fills"). Vector-based techniques are already in widespread-use, for example, in presentation software. Vector graphics are best used for crisp, hard-edged images, such as logos or diagrams.

An alternate approach to transmitting pixel values over the network as in raster graphics, is to send mathematical instructions in form of vectors. For example, to "draw" a circle, you call the "circle" function and supply the desired attributes (center, radius, color "fill") as arguments. A raster format would need to specify the sequence of individual pixels (or other units) and their state ("on"/"off" or their R,G,B value) for every pixel position, making the file size large. Vectorized images are more flexible than their rasterized counterparts because they can be resized and stretched without loss of quality. In addition, images stored as vectors look better on devices (monitors and printers) with higher resolution, whereas bit-mapped images always appear the same regardless of a device's resolution. Another advantage of vector graphics is that representations of images often require less memory than rasterized images do.

Note, however, that most output devices, including dot-matrix printers, laser printers, and display monitors, are raster devices (plotters are the notable exception). This means that all objects, even vector objects, must be translated into bit maps before being output. The difference between vector graphics and raster graphics from a printing viewpoint, therefore, is that vector graphics are not translated into bit maps until the last possible moment, after all sizes and resolutions have been specified.

Limitations of Current Vector Graphics Solutions for the Web

The current vector graphics formats for the Web have various limitations (and thus they are not so "flashy"):

For a discussion of the reason of designing an entirely new language as opposed to simply adopting an existing technology for vector graphics on the Web, see the posting on the W3C SVG mailing list.

Scalable Vector Graphics for the Web

SVG is going to change the face of the Web.
- Tim Bray, in a posting on the XML-DEV mailing list

History and Motivation

It is said that often ideas precede their formalization. Scalable vector graphics is no exception. Early efforts towards a scalable vector graphics standard based on XML came in mid-late 1998 in for of different initiatives:

These efforts led to the realization that a generic solution for scalable vector graphics for the Web was necessary, and along with the limitations of current vector graphics initiatives, motivated the development of Scalable Vector Graphics (SVG). SVG is an open two-dimensional vector graphics format being developed under the auspices of W3C. It works well across platforms, across output resolutions, across color spaces, across a range of available bandwidths.

Advantages of SVG for the Web

The advantages of using structured markup in general, and scalable vector-based graphics (such as SVG) on the Web in particular, can be summarized as follows:

Graphical Advantages

The advantages from a graphical perspective are:

Functional Advantages

The advantages of SVG from a functional perspective are:

Pedagogical/Epistemological Advantages

Out of Sight, Out of Mind.

The advantages of SVG from an educational perspective are:

These possibilities, however, will not happen "automagically" and should be seen objectively. There are several issues in the road to learning, including SVG-generated images may be presenting an incomplete picture and may even be computer artifacts.

Commercial Advantages

The advantages from a commercial perspective are:

SVG -> Quality [Re]presentation -> Consumer Confidence -> Purchase (Sale) -> Profit

Applications of SVG

A language is only as good as the applications that can be written in it.

Vector graphics, in general, and SVG, in particular, can be very useful in context of the Web and can have various applications.

When browsing on the Web, one is limited to the dimensions of the browser, which in turn is limited by the size of the monitor. However, there are various cases where minute details of a graphic are of significance and are not visible to the naked eye. Here are some examples.

In these instances, the creator can label the crucial portions of the graphic, which can be scaled by the user to a desired dimension for the purpose of viewing without distortion. Multiple copies with different magnifications (as often the case with GIF) are not required.

SVG Issues : Picture Imperfect

This section addresses certain concerns that will arise in development and deployment of SVG. Some of the major issues are optimization, security, and use of DTD as SVG grammar.

The following remarks are not necessarily related specifically to SVG language itself, but also to human behaviour and human-computer relationship. They may, directly or indirectly, imply various limitations of SVG. This should not be taken to be lack of enthusiam for the subject but knowing them helps one put the language in context, beware of overexpectations and avoid potential pitfalls.

SVG Rendering

At present, there are standalone SVG-only viewers for a variety of platforms, as well as, browser plug-ins/ActiveX controls for Netscape Communicator and Microsoft Internet Explorer. For a broad adoption of SVG, it will be necessary that to have native support in widely-used browsers. This becomes all the more significant as historically the support for even HTML and CSS has been incomplete, and with propriatary extensions. A list of SVG implementations is available at the W3C SVG site.

SVG Optimization

Performance is an important issue that remains unsolved. Certain steps need to be taken for minimizing SVG file size for optimal transport. Not all of the techniques, however, may be supported by a WYSIWYG image editor. Furthermore, if the source file is processed automatically (for example, to remove unecessary whitespace), the process is irreversible, and hand-editing will become difficult.

SVG Security

Security is another issue. Since SVG graphics is in the end just text (excluding the cases of embedded raster graphics), the source is "open." This raises potential security-related concerns in form of copyright infringement and misuse in a variety of contexts:

These issues already exist with other text-based formats on the Web, such as HTML, CSS and JavaScript. There is a dire need for a solution; some possibilities are:

Of course, a screen capture utility can be used to bypass these schemes, a problem that is beyond the scope of SVG (and even XML). In this case, though the perpetrator will not have the "source," however, will have the "concept."

SVG Grammar

SVG grammar is based on an XML DTD. Among other limitations, DTDs are known to have weak data typing. This can lead to semantic ambiguities in SVG markup. For example, it is possible to write a valid SVG document which assigns a negative value to the radius of a circle. It is expected that use of XML Schemas will improve this situation.

The Missing Dimension

SVG represents 2D graphics, that is, graphics in a plane. 3D objects represented in 2D are only projections and may not completely reflect the true structure of the object. This is because 2D does not have the notions of "depth" and "perspective." In certain cases, when there is no apparent loss of information, this is not a problem. Otherwise, it may lead to what in psychology is known as a geometrical obstacle on part of the viewer, leading to incorrect conclusions. Abstract data sets that have exactly three attributes or shape of a molecule are appropriate instances where the use of 3D is preferable over that of 2D for visualization.


- Tim Bray, in An Introduction to 3DML, January 1999

The growth of SMIL may not have benefited (and actually suffered from overexpectations) from evangelistic claims made in several trade publications as the last one and a half year has shown. The dependence of SVG growth is not far from those factors. Evangelism only lasts so long and reality sets in quickly; unsubstantiated exaggerrated assertions do more harm than good. Several unsubstantiated and outlandish assertions such as "SVG could [...] kill PDF" (which assumed that Portable Document Format (PDF) is for graphics) or that "SVG [...] a revolution in Web animation" (which assumed that script-based image manipulation is new). The point here is not that those assertions are false, but that even raising such possibilities can have negative consequences. When, in absence of concrete examples, opinions are expressed as facts, they can be seriously misleading to new users because the route to reach those either does not exist, or the conclusion has been derived using a poor form of induction. Imprecise and incorrect terminology such as "scriptable animation" (a nonstandard term that implies animation could be scripted, rather than that SVG content can be animated via a script utilizing the SVG DOM) have also appeared recently. To an informed user, it only leads to distraction, confusion and disbelief.

Limitations of Vector Graphics for the Web

Vector graphics does have some inherent limitations. Photographs, for example, contain too much information to effectively reduce down to vectors. Therefore, in such cases, JFIF would still be the preferred format of use.


The Document is The Graphic

SVG creates a "technical" infrastructure for graphics particularly oriented towards the Web. It is an important addition to the world of digital imagery.

Through the advantages it offers and its applicability, SVG expands the graphical horizon of the Web in various dimensions. With the "XMLization" of Virtual Reality Modeling Language (VRML 97), as X3D, SVG will achieve another dimension, spatially.


This work has benefited from postings by Chris Lilley (SVG Editor, W3C), by Jon Ferraiolo (SVG Editor, Adobe Systems, Inc.) and by Paton Lewis (Adobe Systems, Inc.) on the W3C SVG mailing list. I would also like to thank Martin Webb and Hsueh-Ieng Pai for their critical reading and various useful suggestions.


Appendix A : SVG Examples

The examples in this appendix represent nontrivial use of SVG in completely different contexts.

Related items

Perspectives of XML in E-Commerce

XML Conformance : The Burden of Proof

XML Entities and their Applications

XML Euphoria in Perspective

XML and CSS : Structured Markup with Display Semantics

XML Namespaces : Universal Identification in XML Markup

The Emperor has New Clothes : HTML Recast as an XML Application

XML - What's in it for us?

©2015 Martin Webb