The State of MathML : Mathematically Speaking (and Stuttering)
XML Namespaces : Universal Identification in XML Markup
The Emperor has New Clothes : HTML Recast as an XML Application
You are here: irt.org | Articles | Markup Languages | SVG Brings Fast Vector Graphics to Web [ previous next ]
Published on: Wednesday 29th July 1999 By: Janus Boye
A quantum leap in Web graphics is about to happen. A new technology being worked on at the W3C called SVG (Scalable Vector Graphics) will bring the rich, compelling, high-resolution graphics that we all have come to expect in printed catalogs and magazines to the Web.
Todays 2 most commonly used graphics formats on the Web (GIF and JPEG) are both pixel-based, and as we've all probably seen, loose quality when you try to zoom. SVG is entirely based on XML (see XML - What's in it for us?), takes up less space than the average GIF and JPEG, and because of its vector-based nature it has the same high quality when it is displayed on handhelds with limited screen real-estate, as when it is displayed on high-end monitors (even TVs), or when it is printed out on paper.
This article will first cover the exciting functionality that SVG brings to the Web, then discuss the advantages of being an XML-based graphics format, and then finally some words and predictions about the future of SVG.
Most graphics on the Web today are in bitmap formats (e.g. JPEG, GIF and PNG), and thus contains information about each and every pixel in the image. Vector graphics on the other hand just describes shapes and paths, which is a much more efficient approach. Unfortunately we have until the arrival of SVG only had proprietary vector graphic standards such as Flash and QuickTime and no Web standard. SVG changes this.
SVG is currently a working draft at the W3C, with working group members coming from key industry leaders such as Adobe, HP, IBM, Macromedia, Microsoft, Netscape, Quark, Sun and Visio. The working group is planning to have the draft ready as a proposed recommendation in August and then hoping to have turned SVG into an official W3C recommendation by October.
In addition to faster download speeds, SVG also comes with many end user benefits. Some of the nice features of SVG are: high-resolution printing, high-performance zooming and panning inside of graphics without reloading, gradients, animation, filter, kerning, masking, scripting and linking. This results in the user being able to dig deep into an SVG object to obtain more dynamic information - a perfect application for various Internet business applications. More about these and even more features later!
An additional benefit is that since it is based on XML, it is entirely text-based which will open up for search engines to index SVG images, and users will thus be able to search for text within images (e.g. search for a button text, or a streetname on a map). With its text-based nature, it is also possible to create SVG images on the fly (e.g. with a database backend).
For printing we've had PostScript since 1985, when it is was introduced by Adobe. PostScript is a programming language optimized for printing graphics and text, and written in a device independent manner. PostScript is text-based just like SVG, and was one of the first graphic languages to handle scalable fonts and objects well. Unfortunately PostScript comes out with some big files, and is not optimized for the Web.
Vector graphics on the Web is not a new idea, and basically what happened was that a team from Adobe, IBM, Netscape and Sun submitted a note to the W3C about a XML-based Precision Graphics Markup Language (PGML) in April 98, and a team from HP, Macromedia, Microsoft, and Visio submitted a note to the W3C about a XML-based Vector Markup Language (VML) in May 98. As a result of these 2 notes came the SVG working group, which published a set of requirements for SVG in October 98.
The very first draft of SVG then came out in February 99, and since then updates to the draft has been coming out frequently, and the first few experimental implementations has been built (see http://www.w3.org/Graphics/SVG).
XML, developed by the W3C, is a format for representing structured documents and data. SVG is written in XML and therefore benefits from XML's strengths and increasing popularity. Any existing XML parser can read SVG, and thus interchange will be easy.
Here's a little overview of how SVG fits in with other recommendations from the W3C:
Because SVG conforms to the DOM, it will be scriptable just like HTML version 4. This means that you are able to use known functions such as onmouseover, onmouseout, onload, and onfocus on your SVG image. CSS will be used for positioning within the HTML page or layering things as you want, and the switch and test concepts from SMIL will provide for backwards compatibility, so that clients that does not understand SVG instead could be served alternate content (e.g. a GIF or JPEG image). For more information on SMIL see Time Changes Everything.
Last, but not least, XLink and XPointer, will allow for linking from within SVG files to other files on the Web, be it other SVG files, or be it a SMIL presentation or just a simple HTML page.
SVG contains the following 6 predefined objects: Rectangle, circle, ellipse, polyline, polygon and line. The usage of these objects are shown in the following example taken from the SVG Working Draft section 12: Other Vector Graphic Shape
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG July 1999//EN"
"http://www.w3.org/Graphics/SVG/svg-19990706.dtd">
<svg width="4in" height="3in">
<desc>This is a blue circle with a red outline
</desc>
<g>
<circle style="fill: blue; stroke: red"
cx="200" cy="200" r="100"/>
</g>
</svg>This will draw a blue circle with a red outline.
If you want to draw your own unique shape, you can basically draw anything you want with the <path> element, which works like drawing on a piece of paper.
When you have your drawing ready, you can add text to it, by using the text element. This could for example be useful for buttons, organizational charts or maps.
By adding one extra line to the previous example, the blue circle now says Hello World:
<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG July 1999//EN" "http://www.w3.org/Graphics/SVG/svg-19990706.dtd"> <svg width="4in" height="3in"> <desc>This is a blue circle with a red outline</desc> <g> <circle style="fill: blue; stroke: red" cx="200" cy="200" r="100"/> <text x=".5in" y="2in">Hello World</text> </g> </svg>
In addition to text drawn in a straight line, SVG also includes the ability to place text along the shape of a <path> element. This could be a curving path, or any path defined by the designer, and then the base line of the text would follow this path.
SVG parallels the print world, in the sense, that the designer will be able to create SVG graphics with whatever fonts they care to use, and then the same fonts will appear in the end user's browser when viewing an SVG drawing, even if the given end user hasn't purchased the fonts in question. SVG utilizes CSS2's WebFont facility as a key mechanism for reliable delivery of font data to end users.
On top of the cool features I've just covered, SVG also lets you insert images. For example you could insert a PNG or JPEG digital photo into your SVG file. This is all done using SVGs <image> element which is defined as an XLink, and is used much the same way as the HTML element <img>.
An example of how shapes, text and images could be combined into a nice SVG application could be an interactive map. For example bookstores could show the user an initial map, and then the user would be able to dive into the map and find the closest bookstore. The map could then have embedded images of how the bookstore looked.
As stated earlier it is expected that SVG becomes a proposed recommendation at the W3C in August. When it hopefully soon thereafter becomes an official W3C recommendation, I think we will see SVG popping out all over the Web.
Adobe which has been a big driver in the SVG working group, has already said that it is planning to integrate SVG into its suite of graphics applications (Illustrator, PhotoShop, GoLive CyberStudio), plus it is working on a plug-in to Netscape Navigator and Microsoft Internet Explorer to allow them to view SVG files, and it is working on a micro-viewer for a range of clients - from handheld devices to desktop computers. Both Netscape and Microsoft is also participating in the working group, so there is a good chance we will see SVG support in the upcoming versions of our browsers.
I don't think we will be working with handcoding SVG - one can only enter that many coordinates by hand. Instead we will probably just be using the very same tool we are using today to create our images, but instead we will just save to SVG.
Some of the initial areas where SVG seems an obvious fit could be: Advertisements, maps, sales materials, organizational charts and flow diagrams. The advantages that all these areas would benefit from is that SVG is zoomable, linkable, smaller in size than what we currently have, and easy to update.
We will probably also see SVG being used for many other purposes on the Web. Among many things it could be used as a display format for MathML (see MathML - What's in it for us?). In this case MathML could be to markup the content, while SVG would display the actual equations.
In the long-term SVG could perhaps even kill PDF?
Most Web graphics start out in some vector format in some graphics package (e.g. Illustrator, PhotoShop, Quark). This makes them easier to draw and edit, and allows them to be resized and easily reused.
"Today, Web designers have to pick a width and height in pixels and save their work in some image format like JPEG. SVG will let the designer keep that vector flexibility and superior quality for delivery on the Web." said Chris Lilley, W3C Graphics Activity Lead and Chair of the SVG Working Group when the 1st draft was released. Said differently, SVG means that the current time-consuming, quality reducing tricks often employed by Web designers to make their graphics work on the Web will be gone. The workflow will actually flow.
Another big benefit with SVG is that is takes up less space than the existing formats we are working with (GIF and JPEG), thus optimizing browser performance. The color accuracy with over 16 million colors in SVG, instead of the traditional 256, will also be a significant benefit for Web shopping. The product you see on the screen, or print on your printer, will look exactly as the product you receive.
As bandwidth increases, resistance to browser plug-ins diminishing, and vector graphics arriving on the main stage, 1999 could be the year where Web multimedia goes mainstream. Because of its size and efficiency SVG is also a perfect fit for viewing graphics on handhelds.
The Web is potentially on the verge of yet another update.
Enjoy!
The State of MathML : Mathematically Speaking (and Stuttering)
XML Namespaces : Universal Identification in XML Markup
The Emperor has New Clothes : HTML Recast as an XML Application