VML and SVG Compared

from http://www.grapl.com/vmlnotes/introduction/vml_and_svg_compared.htm

To summarise the story so far:

• VML is available now (in IE 5.0 and above) and it has many benefits if you want to put clickable images in web pages
• SVG is an international standard, but is not yet supported by any of the mainline browsers

How do they compare, functionally? Which one is it worth sitting down to learn?

Comparing VML and SVG
If you simply want to draw some boxes on the page, maybe with simple text labels, then VML is very simple and effective. However it does have some strange blind-spots, particularly if you want detailed control over text placement. Let’s start with a really simple example to show what it does best:

President:
Adrian

VP (Finance):
Gill

VP (Website):
Jonathan

which is all drawn with the instructions ...

•    <div style="margin-top=12pt; margin-left=18pt"> <v:group style="width=300pt; height=200pt" coordsize="3000,2000"> <!-- Paper is white with a simple drop-shadow --> <v:rect style="width=3000; height=2000" fillcolor="white"> <v:shadow on="true" offset="4pt,3pt" color="silver" /> </v:rect> <!-- The President --> <v:rect style="top=400; left=1000; width=1000; height=400"> <v:textbox > <p><center><b>President:</b><br>Adrian</center></p> </v:textbox> </v:rect> <!-- VP of Finance --> <v:rect style="top=1200; left=200; width=1000; height=400"> <v:textbox> <p><center><b>VP (Finance):</b><br>Gill</center></p> </v:textbox> </v:rect> <!-- VP of Website --> <v:rect style="top=1200; left=1800; width=1000; height=400"> <v:textbox> <p><center><b>VP (Website):</b><br>Jonathan</center></p> </v:textbox> </v:rect> <!-- Stub vertical line down from President --> <v:line from="1500,800" to="1500,1000" /> <!-- Polyline bridge between VPs --> <v:polyline points="700,1200,700,1000,2300,1000,2300,1200" /> </v:group> </div> 
   

You can see that shadowed rectangles are very easy, and that you can write standard HTML text into defined regions on the page, using the TextBox tag. This is all very nice, and great for simple diagrams, but unfortunately this is the only way VML knows to write text! If you want to label a piechart, you either need to make lots of redundant boxes, or use the CSS2 absolute positioning instructions to write the labels.

View example as VML

View example as SVG

The code required to write ‘Scotland’ in the right place is really quite awful ....

 <p class=Chart style='position:absolute;
   left:309.1pt;top:107.2pt;width:54.2pt;height:9.1pt; font-size=11pt; 
   text-align=left; '>Scotland</p>

... and it gets worse! Because VML relies completely on the CSS syntax for text placement, it has no way of rotating captions, so writing your Y-axis caption vertically alongside the axis is a very tricky exercise! Actually you can do it, because VML was designed with WordArt in mind, and it has a magic command called TextPath which allows you to do all sorts of bizarre transformations. The snag is that the result is drawn as an outline, rather than written as text, so at small sizes it falls apart terribly.

How does SVG cope here? The first thing you notice is that it positions text in just the same way as drawn graphics, so the same piechart label is rendered as:

<text x="3071" y="1163" 
      style="font-family:Arial;font-size:110; ">Scotland</text>

Which makes a lot more sense. This also allows for a custom co-ordinate system, so everything is multiplied by 10 to save on decimal points. Now SVG also understands about text rotation, so vertical chart labels look much better. OK, it doesn’t do WordArt, but surely this is better rendered as curves and filled areas rather than parameterised text?

Summary
So here we are, faced with a puzzling choice of technologies. VML runs very nicely in Internet Explorer 5.0 and above; SVG is a published standard but you need an add-in viewer (from Adobe) to see the results on screen. No-one will thank you for adding SVG charts to your web-page when they have to go and get a 5.5Mb download just to see your work on screen. If you use VML, it is displayed very nicely in the preview window of Microsoft Outlook, so you can send drawings and charts in the mail. Why wait for SVG when you can do VML today, and it will display so much more quickly than the same graphic in raster format? Well, SVG is a better, cleaner, more complete standard. It is also a lot easier to learn, and seems to be more consistently implemented. Perhaps you should just hang on a little longer and save the pain of learning a potentially obsolete technology?

Where does GraPL fit in?
GraPL offers a high-level specification language for commercial and scientific graphics. If you design your charts in GraPL (desktop) and build them into your website with GraPL.NET, then you can use whichever output format you prefer. All the example charts in the following pages were exported from GraPL in both formats, and with GraPL.NET it is simply a matter of choosing Response.Write grapl.RenderVML or Response.Write grapl.RenderSVG to output the finished chart into your webpage.