The SVG method

Last week I briefly discussed the history of Web Design
technology to introduce Scalable Vector Graphics or SVG. If
you did not have a chance to read it, the article is posted
at: www.imswebtips.com/issue57top1.htm This week I
shall discuss the SVG method to provide an introduction to
actually using SVG on your web site.

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

"I already know HTML. Does this mean that it will be replaced
by XML?"

There is a bit of confusion surrounding XML and is it
intended to replace HTML? This is unlikely. 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 the
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 already 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:


"So how do I add SVG to my web site?"

You can create SVG in several different ways. The simplest
and most straight forward 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"?\>
\svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
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"/\>
 \cx="2.5cm" cy="3.5cm" rx="2cm" ry="1cm" /\>
 \y="5.5cm"\>A simple SVG example.\


If you have your viewer installed correctly, you should be
able to see this example posted at:

The first two lines of the file ide
ntify 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

Next week I will take a more detailed look at some of the SVG
elements that can be used to construct a more complex

"IMS Web Tips" ISSN 1488-7088
© Copyright 2000 Virtual Mechanics

"IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on creating, maintaining and promoting their web sites.

To subscribe send an email to imswebtips@oaknetpub.com with SUBSCRIBE in the Body of your email or visit the IMS Web Tips home page for subscription information and a list of past articles.


If you like the contents of this newsletter, please recommend it to a friend. Not only will you help us to continue to provide you with useful and informative articles, you could also win $10,000. Click here for details.
Web Engine DHTML Editor
IMS WebTips
WebDwarf V2
Virtual Mechanics Home
IMS WebTips