source: Using Internal & External Scripts, [rit.edu]

<script type="text/ecmascript" xlink:href="scripts/changeCircle.js"/>

To reference a CSS file within an SVG file refer to the following example code.

<?xml-stylesheet href="styles_austria_1.css" type="text/css"?> 

Here's what an SVG CSS file looks like.

.str1 {stroke:#0093DD;stroke-width:16;color:#0093DD}
.str2 {stroke:#0093DD;stroke-width:12}
.str3 {stroke:#0093DD;stroke-width:10}
.str4 {stroke:#0093DD;stroke-width:6}

.str0 {stroke:#DA251D;stroke-width:55;color:#DA251D}
.str6 {stroke:#BB90BB;stroke-width:44;color:#BB90BB}
.str5 {stroke:#0093DD;stroke-width:4}
.str7 {stroke:#1F1A17;stroke-width:13}

.fil0 {fill:none}
.fil2 {fill:#1F1A17}
.fil1 {fill:#C4E5FA}
.fil3 {fill:#FFFFFF}

Source: Example for using CSS-Styles [carto.net]
Reference: Styling - SVG 1.1 - 20030114 [w3.org]

First of all the Ruby code reads the text, splits it into an array and then saves it in XML format.

require 'rexml/document'
include REXML

a = "Open source is a development method for software that harnesses the power of distributed peer 
review and transparency of process. The promise of open source is better quality, higher reliability, 
more flexibility, lower cost, and an end to predatory vendor lock-in.".split(' ') 

doc = Document.new
doc.add_element('text')
oline = Element.new('line')

char_count = 0
a.each do |word|
  
  oword = Element.new('word')
  oword.text = word.to_s
  oword.add_attribute('length',char_count)
  oline << oword 
  char_count += word.length
  
  if char_count > 50
    doc.root << oline
    oline = Element.new('line')
    char_count = 0
  end
end
doc.root << oline
puts char_count
puts doc

Here's a sample of the XML created

<text>
  <line>
    <word length='0'>Open</word><word length='4'>source</word><word length='10'>is</word>
    <word length='12'>a</word><word length='13'>development</word><word length='24'>method</word>
    <word length='30'>for</word><word length='33'>software</word><word length='41'>that</word>
    <word length='45'>harnesses</word>
  </line>
  <line>
    <word length='0'>the</word><word length='3'>power</word>
    <word length='8'>of</word><word length='10'>distributed</word><word length='21'>peer</word>
    <word length='25'>review</word><word length='31'>and</word><word length='34'>transparency</word>
    <word length='46'>of</word><word length='48'>process.</word>
  </line>
  <line>
    <word length='0'>The</word>
    <word length='3'>promise</word><word length='10'>of</word><word length='12'>open</word>
    <word length='16'>source</word><word length='22'>is</word><word length='24'>better</word>
    <word length='30'>quality,</word><word length='38'>higher</word><word length='44'>reliability,</word>
  </line>
  <line>
    <word length='0'>more</word><word length='4'>flexibility,</word><word length='16'>lower</word>
    <word length='21'>cost,</word><word length='26'>and</word><word length='29'>an</word>
    <word length='31'>end</word><word length='34'>to</word><word length='36'>predatory</word>
    <word length='45'>vendor</word>
  </line>
  <line>
    <word length='0'>lock-in.</word>
  </line>
</text>

The XML is then transformed to SVG using the following XSL file

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output encoding="UTF-8"
            method="xml"
            indent="yes"/>
            
  <xsl:template match="text">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%"
                  xmlns:xlink="http://www.w3.org/1999/xlink" >
      <g id="sketch" class="sketch">
        <xsl:apply-templates select="line"/>
      </g>
    </svg>
  </xsl:template>
  
  <xsl:template match="line">
    <xsl:variable name="xfactor">12</xsl:variable>
    <xsl:variable name="yfactor">20</xsl:variable>
    <xsl:variable name="pos" select="position()"></xsl:variable>
    <xsl:apply-templates select="word">
      <xsl:with-param name="xfactor" select="$xfactor"></xsl:with-param>
      <xsl:with-param name="y" select="$pos * $yfactor + 10"></xsl:with-param>
    </xsl:apply-templates>
  </xsl:template>

  <xsl:template match="word">
    <xsl:param name="xfactor"/>
    <xsl:param name="y"/>
    <text xmlns="http://www.w3.org/2000/svg" font-size="12pt" x="{@length * $xfactor +10}" y="{$y}" id="t1"><xsl:value-of select="."/></text>
  </xsl:template>
</xsl:stylesheet>

The final SVG output [twitxr.com] shows 5 lines of text with each word as a separate SVG text element.

This XSL file is intended to be used as an SVG XSL template file which displays SVG content using Gorg (XSLT back-end processor).

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output encoding="UTF-8"
            method="xml"
            indent="yes"/>
            
  <xsl:template match="mainpage">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%"
                xmlns:xlink="http://www.w3.org/1999/xlink" >

    <g>
    <text font-size="12pt" x="50" y="50" id="t2" stroke="olive"><xsl:value-of select="title"/></text>
    </g>

  </svg>
  </xsl:template>
</xsl:stylesheet>

Reference: 'using XSLT to generate SVG' http://snurl.com/24pwo [carto.net]

This code is a complete SVG document which can be copied and pasted into a file saved as an SVG document (eg. makeZoom.svg) and run locally within your SVG compliant web browser. When the user clicks on the yellow rectangle the shape will increase in size giving the appearance that the document has just been zoomed in.

<svg	xmlns="http://www.w3.org/2000/svg" width="100%"
		xmlns:xlink="http://www.w3.org/1999/xlink" id="cont" viewBox="0 0 300 100">
  <g>	
    <g id="sketch" class="sketch">
      <rect x="130"
  y="6" width="20px" height="10px" fill="yellow" onclick="zoomIn()" />
    </g>
  </g>

  <script>
  <![CDATA[
  function zoomIn(){

    document.getElementById('sketch').parentNode.setAttribute('transform','translate(-70  ,-6)')
    document.getElementById('sketch').setAttribute('transform','scale(1.5)')
  }
  ]]>
  </script>
</svg>

I started off experimenting with viewBox however for simplicity, transform seems better suited for zoom, and panning.

Reference:
Coordinate Systems, Transformations and Units - SVG 1.1 - 20030114 [w3.org]
Example for viewbox control [carto.net]

This ECMAScript implements an undo feature for the SVG whiteboard. When the user presses CTRL+Z the last shape in the message_buffer variable is removed.

  function undoLast() {
    ipos = getLastMethodPos(message_buffer,-1)
    if (ipos > 0)
      message_buffer = message_buffer.substring(0, ipos)
    else
      message_buffer = ''    
  }
  
  function getLastMethodPos(message, pos) {
    i = message.indexOf('<method', pos+1)
    if (i >= 0) 
      result = getLastMethodPos(message, i)
    else
      result = pos 
    return result;
  }

Here's an example of the messages (containing shapes) stored in the message_buffer

"<method name='create'><params><param var='type'>shape</param><param var='body'>
polyline%20x%3D%27524%27%20y%3D%27198%27%20fill%3D%27none%27%20stroke%3D%27red%27%20id%3D
%27348553%27%20stroke-width%3D%272%27%20points%3D%27524%2C198%20523%2C198%20522%2C198%20521%2C198%20
513%2C198%20511%2C198%20503%2C198%20495%2C200%20493%2C200%20485%2C204%20483%2C205%20475%2C207%20474%
2C208%20470%2C212%20466%2C216%20465%2C217%20464%2C219%20463%2C220%20463%2C222%20463%2C223%20463%2C22
5%20463%2C226%20463%2C228%20464%2C230%20465%2C231%20466%2C233%20467%2C234%20471%2C238%20472%2C238%20
478%2C242%20484%2C246%20485%2C247%20488%2C247%20489%2C248%20491%2C248%20493%2C249%20496%2C249%20497%
2C249%20505%2C249%20515%2C249%20521%2C247%20531%2C245%20533%2C245%20539%2C243%20547%2C243%20548%2C24
3%20550%2C242%20555%2C237%20556%2C237%20557%2C235%20558%2C234%20558%2C233%20559%2C231%20559%2C230%20
560%2C228%20560%2C226%20560%2C222%20559%2C221%20559%2C220%20559%2C219%20559%2C217%20559%2C216%20558%
2C215%20558%2C214%20556%2C208%20555%2C206%20555%2C205%20553%2C199%20549%2C191%20547%2C185%20546%2C18
4%20544%2C176%20540%2C170%20539%2C168%20535%2C162%20534%2C161%20528%2C155%20528%2C154%20524%2C148%20
518%2C144%20517%2C143%20511%2C139%20509%2C138%20501%2C134%20499%2C133%20491%2C129%20489%2C129%20479%
2C129%20469%2C129%20467%2C129%20459%2C129%20457%2C129%20454%2C129%20452%2C129%20446%2C131%20438%2C13
1%20437%2C132%20435%2C132%20435%2C133%20434%2C133%20434%2C134%20433%2C134%20433%2C135%27%23%3A
</param><param var='sender'>34855</param></params></method><method name='create'><params><param 
var='type'>shape</param><param var='body'>polyline%20x%3D%27457%27%20y%3D%27175%27%20fill%3D%27none
%27%20stroke%3D%27red%27%20id%3D
%27348554%27%20stroke-width%3D%272%27%20points%3D%27457%2C175%20456%2C175%20455%2C176%20454%2C176%20
453%2C177%20452%2C177%20451%2C177%20449%2C178%20448%2C179%20442%2C181%20440%2C183%20438%2C184%20438%
2C185%20437%2C186%20436%2C187%20435%2C189%20435%2C191%20434%2C193%20434%2C194%20433%2C195%20433%2C19
6%20431%2C200%20431%2C201%20431%2C203%20431%2C205%20431%2C206%20431%2C207%20431%2C208%20431%2C209%20
431%2C210%20431%2C211%20431%2C212%20431%2C213%20431%2C214%20431%2C215%20431%2C216%20431%2C217%20432%
2C223%20432%2C224%20432%2C225%20432%2C226%20433%2C226%20433%2C227%20433%2C228%20433%2C229%20434%2C22
9%20434%2C230%20435%2C231%20435%2C233%20435%2C234%20436%2C235%20437%2C236%20437%2C237%20438%2C237%20
438%2C238%20438%2C239%20438%2C240%20439%2C240%20439%2C241%20443%2C245%20444%2C246%20444%2C247%20445%
2C247%20446%2C248%20447%2C248%20448%2C248%20448%2C249%20449%2C249%20450%2C250%20451%2C251%20452%2C25
2%20454%2C253%20455%2C253%20461%2C255%20462%2C255%20464%2C256%20466%2C256%20467%2C257%20469%2C257%20
469%2C258%20471%2C259%20472%2C259%20474%2C260%20475%2C260%20477%2C261%20478%2C261%20480%2C262%20481%
2C262%20481%2C263%20482%2C263%20483%2C263%20484%2C263%20485%2C263%20486%2C263%20489%2C263%20491%2C26
3%20492%2C263%20495%2C263%20496%2C263%20502%2C261%20504%2C261%20507%2C261%20509%2C261%20510%2C261%20
511%2C261%20512%2C261%20513%2C261%20515%2C261%20517%2C261%20518%2C261%20520%2C260%20523%2C260%20524%
2C260%20526%2C259%20528%2C259%20529%2C259%20534%2C258%20535%2C258%20536%2C257%20537%2C257%20538%2C25
7%20540%2C257%27%23%3A</param><param var='sender'>34855</param></params></method>"

In the above example there are 2 methods calls ready to be sent to the server, the 2nd method would be removed after the undoLast() function had executed.

The methods are ready to be passed to the function getLatestMessages which passes the request through the ProjectX API, which then returns the results.

This code only removes the shape before it's sent to the server, I still need to write the code to delete a shape which is in the server whiteboardqueue, and remove the shape element from the web browser display (SVG DOM).

    <rect id="c1" x="510"
y="120" width="20px" height="20px" fill="pink" stroke="blue" onclick="setPenColour(evt)"/>
  <![CDATA[
  function setPenColour(evt) {
    m_pen_colour = evt.target.getAttribute('fill');
  }
  ]]>

Reference:
Tutorials - SVG [kevlindev.com]
Tutorials - SVG - Events [kevlindev.com]

This code is very similar to Draw a series of lines using SVG [dzone.com] but now we can draw a series of points at the same time the mouse button is pressed and is moving. Here's an example of the SVG squiggle output [twitxr.com].

<svg	xmlns="http://www.w3.org/2000/svg" width="100%"
		xmlns:xlink="http://www.w3.org/1999/xlink" >
  <g id="sketch" class="sketch">

    <rect x="0"
y="0" width="100%" height="100%" fill="yellow" />
  </g>

  <script>
  <![CDATA[
  var	xmlns="http://www.w3.org/2000/svg"
  Root=document.documentElement
  on_start(Root)

  function mouseUp(evt) {
	  on_pen_up(Root);
  }

  function on_start(R){
	  var Attr={
	    "onmousemove":"mouseMove",
      "onmousedown":"add_line(evt)",	
      "onmouseup":"mouseUp"
	  }
	  assignAttr(R,Attr)
  }

  function on_pen_down(R){
	  var Attr={
	    "onmousemove":"addPoint(evt)",
	    "onmouseup":"on_pen_up(Root)"
	  }
	  assignAttr(R,Attr)
  }

  function on_pen_up(R){
	  var Attr={
	    "onmousemove":"null"
	  }
	  assignAttr(R,Attr)
  }

  function add_line(evt){
	  //if (evt.target.nodeName!="rect") return
	  var C=document.createElementNS(xmlns,"polyline") 
	
	  var Attr={
		  "x":30,
		  "y":180,
		  "fill":'none',
		  "stroke": '#44a',
		  "id":'pl1',
		  "stroke-width":2
	  }
    
	  assignAttr(C,Attr)
	  Root.appendChild(C)
    
	  on_pen_down(Root)
  }

  function addPoint (evt) {
    element = document.getElementById('pl1') 	
    var point = element.ownerDocument.documentElement.createSVGPoint(); 
    point.x = evt.clientX; 
    point.y = evt.clientY;
    
    element.points.appendItem(point);
  }

  function assignAttr(O,A){
	  for (i in A) O.setAttributeNS(null,i, A[i])
  }

  ]]>
  </script>

  <text font-size="12pt" x="50" y="20" id="t1">Click something to move it</text>
  <text font-size="12pt" x="80" y="40" id="t2">Click nothing to add something</text>
</svg>

*update 7:44pm*
By simply making the id unique using a global variable count it was possible to draw multiple polylines [twitxr.com].

This code draws a line every time the user presses the mouse button. Here is an example of the SVG output [twitxr.com].

Tested in Firefox 3 beta 4.

<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 onclick="addPoint(evt, document.getElementById('pl1'));"> 
  <title>click to add point to polyline</title>
  <script type="text/ecmascript">
    <![CDATA[ 
      function addPoint (evt, element) {
        var point = element.ownerDocument.documentElement.createSVGPoint(); 
        point.x = evt.clientX; 
        point.y = evt.clientY; 
        element.points.appendItem(point);
      }
    ]]>
  </script> 
  <rect x="0" y="0" width="100%" height="100%" fill-opacity="0" />
  <polyline id="pl1" fill="none" stroke="green" stroke-width="2" points="30,180 50,150" />
</svg> 

Demonstrates creating creating and dragging circles using SVG and ECMAScript.

Tested on Firefox 3 beta 4.

file: makeDragDrop.svg

<svg	xmlns="http://www.w3.org/2000/svg" width="100%"
		xmlns:xlink="http://www.w3.org/1999/xlink" >
<script><![CDATA[
var	xmlns="http://www.w3.org/2000/svg"
	xlink="http://www.w3.org/1999/xlink" 
	Root=document.documentElement
standardize(Root)

function standardize(R){
	var Attr={
		"onmouseup":"add(evt)",
		"onmousedown":"grab(evt)",
		"onmousemove":null,
		"onmouseover":"hilight(evt)",
		"onmouseout":"hilight(evt)"
	}
	assignAttr(R,Attr)
}
function hilight(evt){
	var T=evt.target
	if (T.nodeName=="rect") return
	if (evt.type=="mouseover") T.setAttributeNS(null,"stroke-opacity",1)
	else T.setAttributeNS(null,"stroke-opacity",.5)
}
function add(evt){
	if (evt.target.nodeName!="rect") return
	var C=document.createElementNS(xmlns,"circle") 
	var stroke=Color()
	var rad=10+Math.random()*50
	var Attr={
		r:rad,
		cx:evt.clientX,
		cy:evt.clientY,
		"fill": Color(),
		"fill-opacity":.75,
		"stroke": stroke,
		"stroke-opacity":.5,
		"id":stroke,
		"stroke-width":10+Math.random()*(55-rad)
	}
	assignAttr(C,Attr)
	Root.appendChild(C)
}
function grab(evt){
	var O=evt.target
	if (evt.target.nodeName=="rect") return
	var Attr={
		"onmousemove":"slide(evt,'"+O.id+"')",
		"onmouseup":"standardize(Root)"
	}
	assignAttr(Root,Attr)
}
function slide(evt,id){
	var o=document.getElementById(id)
	var c=""; if (o.nodeName=="circle") c="c"
	o.setAttributeNS(null, c+"x", evt.clientX)
	o.setAttributeNS(null, c+"y", evt.clientY)
}
function assignAttr(O,A){
	for (i in A) O.setAttributeNS(null,i, A[i])
}
function Color(){
	return "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"
}
]]>
</script>
<rect width="100%" height="100%" fill="white"/>
<text font-size="12pt" x="50" y="20" id="t1">Click something to move it</text>
<text font-size="12pt" x="80" y="40" id="t2">Click nothing to add something</text>
</svg>

Source file copied from http://srufaculty.sru.edu/david.dailey/svg/makeDragDrop.svg