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
tags.
"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.
"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:
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.
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.
Next week I will take a more detailed look at some of the SVG
elements that can be used to construct a more complex
document.
"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.
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.
