Vector Graphics

How many times have you waited for a website to go and collect a multitude of little image files, just so it can assemble some simple artwork in your browser? Surely, there has to be a better way, and if you read “Weaving the Web” by Tim Berners-Lee you will find the following on page 179, in the chapter “Mind to Mind”:

“Both JPEG and PNG describe a picture in terms of the square grid of pixels that make up a computer screen. The consortium is developing a new format for drawings that will describe them as abstract shapes, leaving the browser free to fill in the pixels in such a way that the image can be shown with optimal clarity on a wristwatch or a drive-in movie screen. The format, called scalable vector graphics, is based on XML. It will also dramatically speed up the delivery of documents containing drawings, which will open the door to all sorts of new ways of interacting between a person and a web site. And because it is in XML, it will be easy for beginners to read and write. We may soon see all kinds of simple animated graphical interfaces”

So the future of internet graphics looks to be SVG, and in fact the W3C have now finally put their stamp of authority on the SVG standard. Adobe have already implemented a very reasonable SVG viewer, which is freely available from their website. However while the SVG document was being finalised, Microsoft had already implemented another XML tool called Vector Markup Language (VML), which also allows us to put drawings directly into webpages. Full details of VML can also be found on the World Wide Web Consortium page at www.w3c.org where the original specification was lodged in May 1998. Unfortunately, SVG is almost (but not quite) a superset of VML, so code written to the VML standard must be updated to run correctly through the SVG viewer.

What can it do for me?
In some ways, the quote from Weaving the Web says it all. Both VML and SVG are accurate mathematical descriptions of the lines and curves in a drawing, so it will look as good as it can on your mobile phone and on your high-spec PostScript colour printer. It is also quite startling how few bytes you need to describe quite complex shapes, for example:

<v:group style='width:300pt; height:200pt'
   coordorigin="0, 600" coordsize="800, -600">
   
   <v:shape id="duck" href="http://www.dyadic.com" alt="This duck jumps!"
      style='width:800; height:600'
      coordorigin="0, 0" coordsize="800, 600"
      fill="true" fillcolor="#00c0c0">
        <v:fill type="gradient" color2="fill darken(0)" 
             method="linear sigma" angle="120" focus="100%"/>
        <v:stroke on="false" />
    
 <v:path v="m 8 272
 c 73 217 130 209 235 261 
 c 339 313 358 305 388 300
 c 418 296 427 284 441 295
 c 489 333 428 468 505 508
 c 544 528 588 512 621 482
 c 654 452 682 396 749 395
 c 729 350 721 346 616 350
 c 511 353 538 293 595 243
 c 622 217 675 176 659 114
 c 643 52 573 31 496 31
 c 419 31 220 41 144 75
 c 74 121 10 231 8 272 x e"/>
 </v:shape>
</v:group>

... is all you need to draw this very elegant duck (shown first as a GIF image):

which adds up to a little over 9K as a compressed (256-colour) GIF. Of course reducing it to 256 colours has already lost some of the quality of the gradient fill, but the reduction in accuracy is magnified many times when you print it. Working with vector images does have other benefits – if you look carefully at the VML code you will notice that the duck is set as a jump. The browser knows what shape it is without any messing about with mapped images and approximate outlines! If your browser supports VML, you will see what the duck really looks like below, and you can wave the mouse over it and note that you only see the pointing hand when you cross into the blue colour:

If you didn’t see the second duck, you can install the latest version of IE5 to make sure you have VML support. Do make sure to choose a custom installation and verify that VML support is checked on before you install it. Many of the examples are also shown as stand-alone SVG files – you will need to install the free SVG viewer from www.adobe.com if you want to compare these with the VML equivalent.

If you just want to read on anyway, the examples in the following pages are all thumbnailed as images, so feel free to continue!