Click here for a free WYSIWYG pixel precision HTML editor.

================================================
<!--content start-->
<!--headline start-->SVG Coding.<!--headline end-->
<!--body start-->
For the last few weeks I have been talking about SVG or
"Scalable Vector Graphics". The articles to date are
posted at:
issue57top1.htm
issue58top1.htm
issue59top1.htm
In this final article in this series I will take a more
detailed look at the code itself.

SVG is not a small topic and cannot be dealt with
adequately with a few brief articles. It is still a
technology very much in its infancy with a lot of growing
pains to go through before its true impact can be
realized. The fact is, SVG will either become an important
topic for the majority of Web Designers or it will go the
way of VRML, another web format that held great promise
but never seemed to get the critical mass of supporters
needed to make it into the mainstream.

The two most likely factors that will determine the
success or failure of SVG is the distribution of a
sufficient number of players on enough machines and the
ease with which SVG enabled content can be created. The
distribution of SVG players is for most of us a wild card
that is beyond our control. If an SVG player were added to
Napster it would be a done deal (even if they don't
survive). Failing that, it will need a deal with
Microsoft, AOL, Adobe's full marketing skills, or a few
killer SVG enabled web sites and authoring programs to
make it fly.

Creating SVG content is a more addressable issue for web
content developers and authors. Just how easy or hard is
it?

SVG is an XML format. For those of you experienced with
HTML, the structure and logic will look very similar, as
will many of the tags. Like HTML 3.2 and later, SVG makes
extensive use of Style Sheets (CSS) to position elements
and define their properties. The fact is if you want to
create a page that looks very similar to your current HTML
web pages, you can probably come very close.

I have posted an example at iss62fig1.svg. As with all SVG
files at this time, you will need to install a Player in
order to view them. The one we have been using is
available from Adobe at:
http://www.adobe.com/svg/viewer/install/

The first thing you will notice in this example is that
this page is not going to win any design awards. Competent
design and art is something that always transcends the
medium used to express it. Other than that it does look
like a very simplistic web page. If you try to view the
source however, you will discover that the View Source
button is not available. That is probably due to the fact
that the page is not being displayed by the browser but by
the player. To view the source, right click on the page
and select the view source from there.

Below you will find an extract from the source. The
missing portion is the XML version and Doctype. These are
pretty standard on all XML documents including HTML. I
briefly mentioned them in a previous issue so I will skip
over them here.





SShade1" style="stroke:gray; stroke-width:2"
points="0,0 480,0 480,80 80,80 80,450 0,450"/>
 
<g id="OObj" transform="translate(290.00,229.50)">
GObj" class="dfltt" x="-97px" y="-21px" width="194px" height="42px">
<tspan x="-97" y="-21" style="font-size:19px;" >Welcome to my SVG web site. tspan>
xlink:href="iss62fig4.svg">
<tspan x="-97" y="  6" style="text-decoration:underline;fill:blue;">Click here to see an animated SVG page tspan>

g>

<g id="OObj4" transform="translate(56.00,44.00)">
GObj4" xlink:href="D:/IMSStudio/VirtualMechanics/VMLogos/vm-logo-port.gif"
x="-54px" y="-30px" width="108px" height="60px">
Geo4

g>
svg>

is61fig2 SVG code example

My apologies if the site of code gives some of you the
shivers. As with HTML, it is certain that there will be
editors available to create SVG pages. Many web designers
however, prefer direct access to the underlying code.
Although this example is pretty simple, it illustrates
some of the basic elements that are common to many typical
HTML web pages plus a couple of less common components.

SVG code needs to be contained within <svg> svg> tags to
identify it the same way that HTML should be contained
within tags. The SVG element can also be
used to set a variety of additional values. In the above
example, it establishes the viewable area at 100% of the
space available. Many other coordinates are available
including pixels, centimeters etc.  

The next section is an embedded style container that
predefines the default Text style and a Fill color. I have
discussed CSS styles in the past since they are also
common to the current HTML standards so I shall not
discuss them here. Two things that should be noted is that
Styles are used in the same way in SVG as they are in HTML
and that not all current Style elements are supported. The
best information I have suggests that about 50% of CSS2 is
supported in SVG. But which 50%?

The next sections are the meat of this SVG example. I have
made them more complex than then they need to be in order
to illustrate some points. The first element is a polygon.
This along with elements like rectangles and ellipses, are
not included in HTML or DHTML. SVG is after all a Vector
graphics format so it is should be obvious that these
types of elements will be included. As I have previously
mentioned, the big advantage here is that vector graphics
can be created in a fraction of the bandwidth of an
equivalent bitmap image. The formats for these graphic
elements is pretty obvious which I am sure you will
discover if you decide to try it for yourselves.

The next component is the <g> tag surrounding several
other tags including ,<tspan> and an anchor tag.
The G tag is a grouping element that enables you to assign
common attributes to several other elements. In this
instance the interior elements share an "id" and a
transformation. At this point I am not really clear about
the difference between <g>, <div>, and a few other
tags. They all seem to be container tags that do pretty
much the same thing. The thing to note here is that the id
allows you to address the group at a later time and change
its transformation. For those of you that may not know,
transformations are built on top of a matrix (like the
movie) and allow you to move, rotate and scale an object.
Because the G tag includes an id and transformation, the
interior text can be animated. If you want to see it done,
try this link: iss62fig2.svg

Within the Group element you will find a Text tag. HTML
assumes that anything within your document that is not
part of a tag or container is text and will display it.
SVG makes no such assumption. If you want to display text
you will need to place it within TEXT tags. Text in SVG is
considered no different than any other graphic element.
You can consequently assign an id, style and
transformation to it. Rotating text to any angle is
consequently a snap.

Within the TEXT element you will notice TSPAN elements.
SVG does not support the basic text-formatting elements
you will find in HTML since most have been deprecated. You
will consequently need to use Styles to format your text.
The TSPAN element is a container that allows you to do
that. If you look at the TSPAN tags above, you will note
that in addition to styles, they include X and Y
coordinates. If you have not figured it out yet, there is
no such thing as a line or paragraph break in SVG. If you
want to start a new line you will need to move the text to
the new location yourself. It would appear that since text
is supported extensively in HTML, the decision was made to
primarily treat text as a graphic element and to skip many
of the basic formatting operations in SVG. It is one thing
to provide minimal or no graphic support in a text system
and another to provide only minimal support for text in a
graphic system. This is a limitation that will hopefully
be addressed in the next SVG specification.

The other tag within the G element is the Anchor tag. This
works in pretty much the same way as it does in HTML
except that it more closely follows the XML specification
for linking. You will need to use xlink:href to specify
the URL that you are linking to. There is also no support
for Link, Alink and Vlink formatting which means that the
link will be indistinguishable if you do not handle it
yourself. I have simply added a blue underline style in
the above example.

The final GROUP contains a bitmap picture using the
tag. Like the other graphic elements, the image
can be assigned an id, transformation and styles. The most
significant thing to note in this example is that the
image is a GIF. The SVG specification that I have seen
does not actually require support for GIF's preferring to
emphasize support for PNG images, which is a W3C sanction
format (GIF is not). If there is no sanctioned support for
GIF then there is no sanctioned support for animated GIF's
and in fact, even though the Adobe viewer will display
this image, it will not cycle through an animated GIF. If
you would like to find out more about GIF and PNG images,
take a look at our PNG article at:
issue31top1.htm

That is it for the above example but not for SVG. Probably
the most important feature in SVG is its support for
animation. That is after all, its primary purpose. To
paraphrase directly from the W3C spec on SVG "...Using the
various animation elements, you can define motion paths,
fade-in or fade-out effects, and objects that grow,
shrink, spin or change color."

Elements in the above example can be animated very easily
by adding an <animateMotion> tag within the G tags.

In the following example, I have added an animateMotion
tag to the G group containing the image. The effect of
doing this can be seen at:
iss62fig4.svg

<g id="OObj4" transform="translate(56.00,44.00)">
GObj4" xlink:href="vm-logo-port.gif" x="-54px" y="-30px" width="108px" height="60px">

<animateMotion path="M 40 40 L 300 300" begin="1s" dur="6s" fill="freeze"/>
g>

iss62fig4

In this example, a very simple motion path is created that
starts at x=40, y=40 and moves to x=300, y=300. The
elements of the group are told to start after a 1 second
delay and to take 6 seconds to complete the motion. At the
end of the animation the element will freeze so that it
does not move back.

This is a very simple example of the animateMotion tag.
Elements can also be told to scale and rotate, travel
different distances, follow complex paths and much more.
There are also other animation tags that allow you to
change an elements color, to fade in and out, to create
complex transformations and much more. Using animation in
SVG is quite extensive and probably a good article for a
future newsletter.

That is it for this series on SVG. It seems as if I have
written a lot about it but only scratched the surface. If
as I expect, SVG makes it into the light of day, I will
return to this topic in the future.
<!--body end-->
<!--content end-->
================================================
"IMS Web Tips" ISSN 1488-7088
&copy; 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 join.imswebtips@list.imswebtips.com or visit www.IMSWebTips.com 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.