SVG and VML

I think these are the two buzzwords, which did not click as expected. I do believe that there is lot of potential available with these two words. In this blog, I would like describe about these two words in brief.

What do you mean by SVG?
Well, as the name suggests it is the short form of Scalable Vector Graphics.
SVG is a language for describing two-dimensional graphics and graphical applications in XML. SVG allows for three types of graphic objects – Vector Graphic shapes, images and text. SVG mobile profiles- SVG Basic and SVG Tiny are targeted to resource limited devices. It enables us to create dynamically generated high quality graphics from the real-time data with structural and visual control. SVG is compatible with DOM.
Using .Net and SVG together, we can write awesome charting applications, image maps etc. There are various SVG viewers available in the market; some of them are also applicable for mobile browsers. Following is the list of some popularly used SVG viewers:
· Adobe SVG Viewer.
· Apache Squiggle SVG Viewer
· Corel SVG Viewer
· CSIRO SVG Viewer
· IBM SVG Viewer

So, how will the basic SVG file look like?
<?xml version="1.0" encoding="UTF-8" ?>
<svg width="100%" height="100%" xmlns=http://www.w3.org/2000/svg>
<text x="20" y="20"> Welcome to SVG </text>
<rect width='100' height='100' x='50' y='50' fill='green'/>
</svg>

What do you mean by VML?
Virtual Markup Language (VML) is nothing but the application of XML 1.0, which defines a format for encoding the vector information with markup to describe how that information may be displayed and edited. It is basically text-based interchange and delivery formats for vector graphics.

VML describes objects such as shapes and groups (collection of shapes). VML allows editing of these objects. It can be also used to create menus and navigational elements using XSL.It supports the DOM. IT uses CSS2 just like HTML for determining layout of Vector Graphics.
So, how will be the basic VML?
<v:shape style='width:1in;height:1in;' strokecolor="red"
strokeweight="2pt" coordsize="21600,21600" adj="17520"
path="m10800,0qx0,10800,10800,21600,21600,10800,10800,0xe
m7340,6445qx6215,7570,7340,8695,8465,7570,7340,6445xnfe
m14260,6445qx13135,7570,14260,8695,15385,7570,14260,6445xnfe
m4960@0c8853@3,12747@3,16640@0nfe">
<v:formulas>
<:f eqn="sum 33030 0 #0"/>
<:f eqn="prod #0 4 3"/>
<:f eqn="prod @0 1 3"/>
<:f eqn="sum @1 0 @2"/>
</v:formulas>
</v:shape>

It can be used with the ASP.NET applications. You can create your own web controls for the same. If you google up, then you would find some examples on the code project as well.

Well, having understood SVG and VML, next question is what are the differences between them?

VML is supported by most of the browsers or rather I would say at least IE 5.0 and above support it. To use SVG, you still need to use add-in viewer controls. SVG is really neat and clean language. It is really easy to understand as well. And above all, VML was designed before the release of SVG specification. I believe that latest versions of browsers will have built-in support for SVG as well. As a matter of fact, there seem to be little confusion on where our applications are heading with respect to these two buzzwords. But in any case, it is always a good idea to know what it is.....:)

Cheers,
Amol.