SVG (Scalable Vector Graphics) - Overview about the possibilities and advantages as well as the current implementations of the new XML-based standard for Web graphics
Seminar Paper 2002 18 Pages
Table of Contents
1.1 Current Status of SVG
1.2 Primary Concepts
1.3 SVG’s Benefits
2.1 Displaying SVG
2.2 Tools for Creating SVG
SVG is the new XML-based standard for Web graphics and is the acronym for “Scalable Vector Graphics”. It allows Web designers and developers to easily create highly interactive two-dimensial vector graphics, on which they can apply a wide range of filter effects and animations. In the subsequent chapters I will provide more information about the development process of SVG, its main concepts and current implementations.
1.1 Current Status of SVG
The first public working draft for SVG was published on 2nd February 1999 by the World Wide Web consortium (W3C), which is an organisation of about 500 members that has already “developed more than 35 technical specifications for the Web's infrastructure” (W3C, 1999) since it was created in October 1994. This draft already contains information about the SVG’s main goals and purposes. Since this point of time new more elaborated drafts have been released every two months on the average.
It lasted two and a half years since SVG finally reached the status of a W3C Recommendation on the 4th September 2001. In its current form, the Recommendation consists of 617 pages divided in 23 chapters and is edited by Jon Ferraiolo, who is Senior Computer Scientist at Adobe Systems Inc.
Although the SVG Recommendation was not written for ordinary users but for technical implementors, due to numerous examples it is not difficult to understand. According to the information provided at the W3C site for SVG work has already continued on the modular SVG 1.1 and on the “Mobile SVG profiles” specification. For further information about the ongoing development process please check the related W3C sites.
1.2 Primary Concepts
Before describing the meaning of the components “scalable” “vector” and “graphics”, I want to provide you with the W3C’s definition of SVG:
“SVG is a language for describing two-dimensional graphics in XML. SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text.
Text can be in any XML namespace suitable to the appplication, which enhances searchability and accessibility of the SVG graphics. The feature set includes nested transformations, clipping paths, alpha masks, filter effects, template objects and extensibility.
SVG drawings can be dynamic and interactive. The Document Object Model (DOM) for SVG, which includes the full XML DOM, allows for straightforward and efficient vector graphics animation via scripting. ... (2001)
As you can see from the definition above, SVG offers a wide range of possible applications. SVG is for example perfectly qualified to be used for creating complete Web sites or for displaying quantitative data stored in XML files, which might be provided by a native XML database (e.g. Software AG’s Tamino). This is just a short abstract of all the imaginable applications for SVG. If you are searching for more sophisticated examples, you can find them at Adobe’s “SVG Zone”.
As I have already stated before, SVG stands for “Scalable Vector Graphics” and is a subset of XML for representing vector graphics with pure ASCII code. This brings the advantage of XML’s openness, transportability and interoperability. Since SVG is an XML application, it can be used stand-alone or embedded in other subsets of XML like for example XHTML or MathML.
According to the W3C being scalable in terms of graphics means not being limited to a single, prescribed pixel size. Thus you can increase or decrease your graphic uniformly without losing quality. SVG furthermore offers the possibility to reuse already written code within the same graphic or to reference it inside other SVG graphics allowing complex illustrations to be built up in many different parts.
Due to the fact that SVG is a vector format, the graphic itself is made up of curves, lines and other mathematical shapes. Hence there is no need to store information about every single pixel of the graphic, but to save details about the mathematical functions to describe its basic shapes.
1.3 SVG’s Benefits
Beside the already mentioned benefits, SVG can offer many other conveniences as well. The following markup code should illustrate the clear and plain structure of a typical SVG graphic:
illustration not visible in this excerpt
Image 1: SVG example source code
Since the structure of SVG is that simple and human- readable, it can be learned very quickly. As I stated in the previous chapter, SVG provides all known advantages of common vector graphics like for example wmf (Windows-Meta-File format) or cgm (Computer Grafics Metafile). Beside the fact that compared to raster-formats like JPG or PNG SVG files are very small in size, you can zoom in or zoom out your grafic without losing quality.
One of the biggest advantages of SVG is its ability to apply client-side filter effects (e.g. dropping shadows), which you usually do not have when you work with vector graphics. SVG posseses an own filter element which allows you to apply one or more filters to an SVG object. Using this element you can blur an image, change its color saturation or characteristics, produce a beveled or embossed effect and lighting effects.
In addition to all those features SVG is also capable of applying different kinds of animation. The graphic designer has the tremendous possibility to transform or animate every single attribute or characteristic (e.g. position, colour, rotation, length, height,..) of his graphic. He can therefore make the graphic move around the screen, pop up from behind, rescale itself or react to different mouse events. A good and simple example of an animated SVG graphic written by Antoine Quint, who is the author of the XML.com SVG column, can be viewed at http://www.xml.com/2002/01/23/svg/cubes_final.svgz.
Due to the fact that SVG is a rather young standard just a few programs dealing with SVG are currently available. A complete list of them can be found at http://www.w3.org/Graphics/SVG/SVG-Implementations.htm8. In my personal opinion Adobe and the open-source Apache XML project are the most ambitious manufacturers of SVG software. They have both released a significant number of applications essential for the development and acceptance of SVG.
 The recent working draft for SVG 1.1 can be found at http://www.w3.org/TR/SVG11/
 More information about “Moblie SVG profiles“ are located at http://www.w3.org/TR/SVGMobile/
 if you want to take a look at my personal homepage completly created with SVG, you can find it at http://huditsch.piranho.com/
 MathML is an XML application designed for representing mathematical functions and equations
 More information about the Apache project can be found at http://xml.apache.org/