SVG is built on top of XML in order to describe 2D vector capable graphics. XML stands for “Extensible Markup Language”. A full description of XML is best suited for a future article since it can be quite technical. To simplify XML, it is similar to HTML but provides greater customization of the tags. HTML is a set of pre-defined tags that are used to describe a web page. XML however, does not pre-define the tags.
“I already know HTML. Does this mean it will be replaced by XML?”
There is a bit of confusion surrounding XML and it’s relationship with HTML. HTML already does its job quite well. If you were to use XML to create an easily understood general format for people to create web pages you would end up with something very similar (or identical) to HTML. The problem with HTML is that this is really all it can do. XML on the other hand, provides them ability to create other document formats such as databases, spreadsheets and e-commerce sites.
SVG could not be built on top of HTML because HTML’s format is fixed. XML on the other hand is the ideal candidate to create a new open graphics format for the web. If you would like to delve into XML in more detail, you can take a look at the following sites:
“But am I going to have to learn XML in order to use SVG?”
The answer is no. You are going to have to learn SVG if you want to code it yourself. By doing that you will have learned this particular flavor of XML. XML used for a spreadsheet however, will probably look very different.
“What do I need to do to get started?”
It is expected that the major Browser’s will support SVG in the near future. Until they do release versions with native SVG support you will need to install an SVG viewer plugin for your current browser. There are several available. I tried Adobe’s viewer but there are others. These are the one’s that I am aware of:
Adobe: http://www.adobe.com/svg/viewer/install/
IBM : http://www.alphaworks.ibm.com/tech/svgview
CSIRO: http://sis.cmis.csiro.au/svg/index.html
“So how do I add SVG to my web site?”
You can create SVG in several different ways. The simplest and most straightforward way is to create a “.svg” file using a standard text editor. The format for an SVG file is similar to a HTML document but the tags are different.
<?xml version=”1.0″ standalone=”yes”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 20000802//EN” “http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd”>
<svg width=”5cm” height=”6cm”>
<desc>An SVG example.</desc>
<rect style=”fill:blue;” x=”0.5cm” y=”0.5cm” width=”2cm” height=”1cm”/>
<rect style=”fill:green;” x=”3.5cm” y=”0.5cm” width=”1cm” height=”1.5cm”/>
<ellipse style=”fill:red;” cx=”2.5cm” cy=”3.5cm” rx=”2cm” ry=”1cm” />
<text style=”fill:black;” x=”0.8cm” y=”5.5cm”>A simple SVG example.</text>
</svg>
If you have your viewer installed correctly, you should be able to see this example posted at:
www.imswebtips.com/is58fig1.svg
The first two lines of the file identify this as an XML document to be interpreted as SVG. This is pretty standard boilerplate but it will need to be done correctly.
The interesting stuff starts within the SVG tags. As you will note the elements within this example are pretty simple to interpret. Rectangles, ellipses, text, images etc. Pretty much everything you could find within a HTML document.
Like DHTML, SVG also supports CSS (Cascading Style Sheets) and access to the DOM (Document Object Model) using Javascript. This means that an SVG document can be fully animated. But unlike DHTML, the document supports vector graphics so that it will be much faster and provide more flexibility.
Steve White of http://www.IMSWebTips.com Virtual Mechanics & IMSWebTips offers DHTML tools and information, and also publishes a web tips ezine with lots of great ideas, snippets of code, and HTML and DHTML tutorials for any webmaster, regardless of experience.
