We all know SVG is a wonderful format for graphics (otherwise we wouldn't be here). However,
the true power of SVG isn't released until combined with scripting. The support for the XML
DOM written into the SVG plugin by Adobe is very extensive, and short of the few blunders
outlined here, very easy to use.
Before we begin, you will need to know a good amount of Javascript. You have to be one of the
people who knows how to write your own functions, not simply scavenging them (which I do not
have anything against). You also need to know good programming practices and a good
understanding of algebra.
The project we will build today is called "Swarm." The intended effect is that of several bugs
crawling or flying around your plugin window. This is the first part, where we deal with
getting objects to move.
First you should have a good understanding of the XML DOM and what it is capable of. For this
please read the XML DOM Discussion [coming soon]. We will be using routines which deal with
selecting the correct svg element and manipulating it's attributes.
The very first step in obtaining your SVG plugin is a tricky one. However, once you learn this
trick, you can use it with ease.
We need to be able to access the root of the SVG document. This is where all navigation through
xml elements is done and thus a very vital step. There are two ways to accomplish this.
1.) Browser Code.
This method of detection basically uses the name specified by your browser to navigate to the
SVG document. Consider the following HTML fragment:
<html>
<body>
<embed name="Example1" width="..." height="..." SRC="..." TYPE="image/svg-xml">
</body>
</html>
The Javascript to navigate to the SVG element is rather trivial. It is simply
var foo = document.Example1.getSVGDocument()
However, in general this is a bad way to go about doing this. It assumes that your svg is
embedded in an HTML page (which it may not always be) and that the name is static. You
may be in for a huge surprise if you copy that SVG document to another page and have to
spend hours figuring out why the Javascript doesn't work. Furthermore, several copies of
the same object then require unique names and code to run properly. This method does, however,
work in certain circumstances (e.g. Javascript from one SVG doc modifying another SVG doc)
2.) SVG Initialization Event
This Javascript is far more stable and is used completely independantlt of the browser. If
you have a standalone SVG document which doesn't interact with it's surroudings, this is the
way to go
<svg onload="Initialize(evt)">
<defs>
<script>
<![CDATA[
var SVGDocument = null
function Initialize(LoadEvent)
{
SVGDocument = LoadEvent.getTarget().getOwnerDocument();
}
]]>
</script>
</defs>
</svg>
What happens here is that once the SVG has finished loading, the onload event is fired. We
capture that event and send it to our routine - Initialize(). Initialize then gets the
target of that event (a child of the SVG document) and from that, extrapolates the document
object.
I think that's enough for today. Honestly, that's the trickiest part of the entire ordeal.
From there, any further dfficulty is due to level of intelligence you give to the bugs.
Swarm, Lesson 2
