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 independent of the browser. If you have a standalone SVG document which doesn’t interact with it’s surroundings, this is the way to go
<script type="text/javascript"> // <![CDATA[
var SVGDocument = null
function Initialize(evt) {
SVGDocument = evt.target.ownerDocument.documentElement;
}
// ]]></script>
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 difficulty is due to level of intelligence you give to the bugs.
Continue to Swarm, Lesson 2