From 79a2299363e9b9ad151fb4e63fe396e7f300f80d Mon Sep 17 00:00:00 2001
From: Jacques Distler <distler@golem.ph.utexas.edu>
Date: Sun, 18 Apr 2010 12:55:02 -0500
Subject: [PATCH] Content-Type of Cached Files with Period in Name

Monkey patch to prevent ActionCache from overriding
the correct content-type header, when serving cached
pages with a "." in the name. (Thanks to Jason Blevins)

Also sync with latest SVG-Edit.
---
 app/controllers/application_controller.rb     |   14 +
 public/svg-edit/editor/canvg/canvg.js         | 1451 +++++++++++++++++
 public/svg-edit/editor/canvg/rgbcolor.js      |  288 ++++
 .../svg-edit/editor/images/svg_edit_icons.svg |   47 +
 public/svg-edit/editor/svg-editor.css         |   33 +-
 public/svg-edit/editor/svg-editor.html        |   43 +-
 public/svg-edit/editor/svg-editor.js          |  134 +-
 public/svg-edit/editor/svgcanvas.js           |  429 ++++-
 public/svg-edit/test/test1.html               |   21 +-
 9 files changed, 2414 insertions(+), 46 deletions(-)
 create mode 100644 public/svg-edit/editor/canvg/canvg.js
 create mode 100644 public/svg-edit/editor/canvg/rgbcolor.js

diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 3ddaabbb..4fe3332d 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -286,3 +286,17 @@ end
 class Hash
   alias_method(:key, :index) unless method_defined?(:key)
 end
+
+# Monkey patch, to ensure ActionCache doesn't muck with the content-type header.
+module ActionController #:nodoc:
+  module Caching
+    module Actions
+      class ActionCacheFilter
+        private
+          def set_content_type!(controller, extension)
+            return
+          end
+      end
+    end
+  end
+end
\ No newline at end of file
diff --git a/public/svg-edit/editor/canvg/canvg.js b/public/svg-edit/editor/canvg/canvg.js
new file mode 100644
index 00000000..d3aa73e7
--- /dev/null
+++ b/public/svg-edit/editor/canvg/canvg.js
@@ -0,0 +1,1451 @@
+/*
+ * canvg.js - Javascript SVG parser and renderer on Canvas
+ * MIT Licensed 
+ * Gabe Lerner (gabelerner@gmail.com)
+ * http://code.google.com/p/canvg/
+ *
+ * Requires: rgbcolor.js - http://www.phpied.com/rgb-color-parser-in-javascript/
+ */
+if(!window.console) {
+	window.console = {};
+	window.console.log = function(str) {};
+	window.console.dir = function(str) {};
+}
+(function(){
+	// canvg(target, s)
+	// target: canvas element or the id of a canvas element
+	// s: svg string or url to svg file
+	this.canvg = function (target, s) {
+		if (typeof target == 'string') {
+			target = document.getElementById(target);
+		}
+		
+		// reuse class per canvas
+		var svg;
+		if (target.svg == null) {
+			svg = build();
+			target.svg = svg;
+		}
+		else {
+			svg = target.svg;
+			svg.stop();
+		}
+		
+		var ctx = target.getContext('2d');
+		if (s.substr(0,1) == '<') {
+			// load from xml string
+			svg.loadXml(ctx, s);
+		}
+		else {
+			// load from url
+			svg.load(ctx, s);
+		}
+	}
+
+	function build() {
+		var svg = {};
+		
+		svg.FRAMERATE = 30;
+		
+		// globals
+		svg.init = function(ctx) {
+			svg.Definitions = {};
+			svg.Styles = {};
+			svg.Animations = [];
+			svg.ctx = ctx;
+			svg.ViewPort = new (function () {
+				this.viewPorts = [];
+				this.SetCurrent = function(width, height) { this.viewPorts.push({ width: width, height: height }); }
+				this.RemoveCurrent = function() { this.viewPorts.pop(); }
+				this.Current = function() { return this.viewPorts[this.viewPorts.length - 1]; }
+				this.width = function() { return this.Current().width; }
+				this.height = function() { return this.Current().height; }
+				this.ComputeSize = function(d) {
+					if (d != null && typeof(d) == 'number') return d;
+					if (d == 'x') return this.width();
+					if (d == 'y') return this.height();
+					return Math.sqrt(Math.pow(this.width(), 2) + Math.pow(this.height(), 2)) / Math.sqrt(2);			
+				}
+			});
+		}
+		svg.init();
+
+		// trim
+		svg.trim = function(s) { return s.replace(/^\s+|\s+$/g, ''); }
+		
+		// compress spaces
+		svg.compressSpaces = function(s) { return s.replace(/[\s\r\t\n]+/gm,' '); }
+		
+		// ajax
+		svg.ajax = function(url) {
+			var AJAX;
+			if(window.XMLHttpRequest){AJAX=new XMLHttpRequest();}
+			else{AJAX=new ActiveXObject('Microsoft.XMLHTTP');}
+			if(AJAX){
+			   AJAX.open('GET',url,false);
+			   AJAX.send(null);
+			   return AJAX.responseText;
+			}
+			return null;
+		} 
+		
+		// parse xml
+		svg.parseXml = function(xml) {
+			if (window.DOMParser)
+			{
+				var parser = new DOMParser();
+				return parser.parseFromString(xml, 'text/xml');
+			}
+			else 
+			{
+				xml = xml.replace(/<!DOCTYPE svg[^>]*>/, '');
+				var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
+				xmlDoc.async = 'false';
+				xmlDoc.loadXML(xml); 
+				return xmlDoc;
+			}		
+		}
+		
+		svg.Property = function(name, value) {
+			this.name = name;
+			this.value = value;
+			
+			this.hasValue = function() {
+				return (this.value != null && this.value != '');
+			}
+							
+			// return the numerical value of the property
+			this.numValue = function() {
+				if (!this.hasValue()) return 0;
+				
+				var n = parseFloat(this.value);
+				if ((this.value + '').match(/%$/)) {
+					n = n / 100.0;
+				}
+				return n;
+			}
+			
+			this.valueOrDefault = function(def) {
+				if (this.hasValue()) return this.value;
+				return def;
+			}
+			
+			this.numValueOrDefault = function(def) {
+				if (this.hasValue()) return this.numValue();
+				return def;
+			}
+			
+			/* EXTENSIONS */
+			var that = this;
+			
+			// color extensions
+			this.Color = {
+				// augment the current color value with the opacity
+				addOpacity: function(opacity) {
+					var newValue = that.value;
+					if (opacity != null && opacity != '') {
+						var color = new RGBColor(that.value);
+						if (color.ok) {
+							newValue = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + opacity + ')';
+						}
+					}
+					return new svg.Property(that.name, newValue);
+				}
+			}
+			
+			// definition extensions
+			this.Definition = {
+				// get the definition from the definitions table
+				getDefinition: function() {
+					var name = that.value.replace(/^(url\()?#([^\)]+)\)?$/, '$2');
+					return svg.Definitions[name];
+				}	
+			}
+			
+			// length extensions
+			this.Length = {
+				DPI: function(viewPort) {
+					return 96.0; // TODO: compute?
+				},
+				
+				EM: function(viewPort) {
+					var em = 12;
+					
+					var fontSize = new svg.Property('fontSize', svg.ctx.font.match(/[0-9][^\s\t\n\r\/]*/g)[0]);
+					if (fontSize.hasValue()) em = fontSize.Length.toPixels(viewPort);
+					
+					return em;
+				},
+			
+				// get the length as pixels
+				toPixels: function(viewPort) {
+					if (!that.hasValue()) return 0;
+					var s = that.value+'';
+					if (s.match(/em$/)) return that.numValue() * this.EM(viewPort);
+					if (s.match(/ex$/)) return that.numValue() * this.EM(viewPort) / 2.0;
+					if (s.match(/px$/)) return that.numValue();
+					if (s.match(/pt$/)) return that.numValue() * 1.25;
+					if (s.match(/pc$/)) return that.numValue() * 15;
+					if (s.match(/cm$/)) return that.numValue() * this.DPI(viewPort) / 2.54;
+					if (s.match(/mm$/)) return that.numValue() * this.DPI(viewPort) / 25.4;
+					if (s.match(/in$/)) return that.numValue() * this.DPI(viewPort);
+					if (s.match(/%$/)) return that.numValue() * svg.ViewPort.ComputeSize(viewPort);
+					return that.numValue();
+				}
+			}
+			
+			// time extensions
+			this.Time = {
+				// get the time as milliseconds
+				toMilliseconds: function() {
+					if (!that.hasValue()) return 0;
+					var s = that.value+'';
+					if (s.match(/s$/)) return that.numValue() * 1000;
+					if (s.match(/ms$/)) return that.numValue();
+					return that.numValue();
+				}
+			}
+			
+			// angle extensions
+			this.Angle = {
+				// get the angle as radians
+				toRadians: function() {
+					if (!that.hasValue()) return 0;
+					var s = that.value+'';
+					if (s.match(/deg$/)) return that.numValue() * (Math.PI / 180.0);
+					if (s.match(/grad$/)) return that.numValue() * (Math.PI / 200.0);
+					if (s.match(/rad$/)) return that.numValue();
+					return that.numValue() * (Math.PI / 180.0);
+				}
+			}
+		}
+		
+		// points and paths
+		svg.ToNumberArray = function(s) {
+			var a = svg.trim(svg.compressSpaces((s || '').replace(/,/g, ' '))).split(' ');
+			for (var i=0; i<a.length; i++) {
+				a[i] = parseFloat(a[i]);
+			}
+			return a;
+		}		
+		svg.Point = function(x, y) {
+			this.x = x;
+			this.y = y;
+		}
+		svg.CreatePoint = function(s) {
+			var a = svg.ToNumberArray(s);
+			return new svg.Point(a[0], a[1]);
+		}
+		svg.CreatePath = function(s) {
+			var a = svg.ToNumberArray(s);
+			var path = [];
+			for (var i=0; i<a.length; i+=2) {
+				path.push(new svg.Point(a[i], a[i+1]));
+			}
+			return path;
+		}
+		
+		// bounding box
+		svg.BoundingBox = function(x1, y1, x2, y2) { // pass in initial points if you want
+			this.x1 = Number.NaN;
+			this.y1 = Number.NaN;
+			this.x2 = Number.NaN;
+			this.y2 = Number.NaN;
+			
+			this.x = function() { return this.x1; }
+			this.y = function() { return this.y1; }
+			this.width = function() { return this.x2 - this.x1; }
+			this.height = function() { return this.y2 - this.y1; }
+			
+			this.addPoint = function(x, y) {	
+				if (x != null) {
+					if (isNaN(this.x1) || isNaN(this.x2)) {
+						this.x1 = x;
+						this.x2 = x;
+					}
+					if (x < this.x1) this.x1 = x;
+					if (x > this.x2) this.x2 = x;
+				}
+			
+				if (y != null) {
+					if (isNaN(this.y1) || isNaN(this.y2)) {
+						this.y1 = y;
+						this.y2 = y;
+					}
+					if (y < this.y1) this.y1 = y;
+					if (y > this.y2) this.y2 = y;
+				}
+			}			
+			this.addX = function(x) { this.addPoint(x, null); }
+			this.addY = function(y) { this.addPoint(null, y); }
+			
+			this.addQuadraticCurve = function(p0x, p0y, p1x, p1y, p2x, p2y) {
+				var cp1x = p0x + 2/3 * (p1x - p0x); // CP1 = QP0 + 2/3 *(QP1-QP0)
+				var cp1y = p0y + 2/3 * (p1y - p0y); // CP1 = QP0 + 2/3 *(QP1-QP0)
+				var cp2x = cp1x + 1/3 * (p2x - p0x); // CP2 = CP1 + 1/3 *(QP2-QP0)
+				var cp2y = cp1y + 1/3 * (p2y - p0y); // CP2 = CP1 + 1/3 *(QP2-QP0)
+				this.addBezierCurve(p0x, p0y, cp1x, cp2x, cp1y,	cp2y, p2x, p2y);
+			}
+			
+			this.addBezierCurve = function(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {
+				// from http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html
+				var p0 = [p0x, p0y], p1 = [p1x, p1y], p2 = [p2x, p2y], p3 = [p3x, p3y];
+				this.addPoint(p0[0], p0[1]);
+				this.addPoint(p3[0], p3[1]);
+				
+				for (i=0; i<=1; i++) {
+					var f = function(t) { 
+						return Math.pow(1-t, 3) * p0[i]
+						+ 3 * Math.pow(1-t, 2) * t * p1[i]
+						+ 3 * (1-t) * Math.pow(t, 2) * p2[i]
+						+ Math.pow(t, 3) * p3[i];
+					}
+					
+					var b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
+					var a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
+					var c = 3 * p1[i] - 3 * p0[i];
+					
+					if (a == 0) {
+						if (b == 0) continue;
+						var t = -c / b;
+						if (0 < t && t < 1) {
+							if (i == 0) this.addX(f(t));
+							if (i == 1) this.addY(f(t));
+						}
+						continue;
+					}
+					
+					var b2ac = Math.pow(b, 2) - 4 * c * a;
+					if (b2ac < 0) continue;
+					var t1 = (-b + Math.sqrt(b2ac)) / (2 * a);
+					if (0 < t1 && t1 < 1) {
+						if (i == 0) this.addX(f(t1));
+						if (i == 1) this.addY(f(t1));
+					}
+					var t2 = (-b - Math.sqrt(b2ac)) / (2 * a);
+					if (0 < t2 && t2 < 1) {
+						if (i == 0) this.addX(f(t2));
+						if (i == 1) this.addY(f(t2));
+					}
+				}
+			}
+			
+			this.addPoint(x1, y1);
+			this.addPoint(x2, y2);
+		}
+		
+		// transforms
+		svg.Transform = function(v) {	
+			var that = this;
+			this.Type = {}
+		
+			// translate
+			this.Type.translate = function(s) {
+				this.p = svg.CreatePoint(s);			
+				this.apply = function(ctx) {
+					ctx.translate(this.p.x || 0.0, this.p.y || 0.0);
+				}
+			}
+			
+			// rotate
+			this.Type.rotate = function(s) {
+				var a = svg.ToNumberArray(s);
+				this.angle = new svg.Property('angle', a[0]);
+				this.cx = a[1] || 0;
+				this.cy = a[2] || 0;
+				this.apply = function(ctx) {
+					ctx.translate(this.cx, this.cy);
+					ctx.rotate(this.angle.Angle.toRadians());
+					ctx.translate(-this.cx, -this.cy);
+				}
+			}
+			
+			this.Type.scale = function(s) {
+				this.p = svg.CreatePoint(s);
+				this.apply = function(ctx) {
+					ctx.scale(this.p.x || 1.0, this.p.y || this.p.x || 1.0);
+				}
+			}
+			
+			this.Type.matrix = function(s) {
+				this.m = svg.ToNumberArray(s);
+				this.apply = function(ctx) {
+					ctx.transform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]);
+				}
+			}
+			
+			this.Type.SkewBase = function(s) {
+				this.base = that.Type.matrix;
+				this.base(s);
+				this.angle = new svg.Property('angle', s);
+			}
+			this.Type.SkewBase.prototype = new this.Type.matrix;
+			
+			this.Type.skewX = function(s) {
+				this.base = that.Type.SkewBase;
+				this.base(s);
+				this.m = [1, 0, Math.tan(this.angle.Angle.toRadians()), 1, 0, 0];
+			}
+			this.Type.skewX.prototype = new this.Type.SkewBase;
+			
+			this.Type.skewY = function(s) {
+				this.base = that.Type.SkewBase;
+				this.base(s);
+				this.m = [1, Math.tan(this.angle.Angle.toRadians()), 0, 1, 0, 0];
+			}
+			this.Type.skewY.prototype = new this.Type.SkewBase;
+		
+			this.transforms = [];
+			this.apply = function(ctx) {
+				for (var i=0; i<this.transforms.length; i++) {
+					this.transforms[i].apply(ctx);
+				}
+			}
+			
+			var data = v.split(/\s(?=[a-z])/);
+			for (var i=0; i<data.length; i++) {
+				var type = data[i].split('(')[0];
+				var s = data[i].split('(')[1].replace(')','');
+				var transform = eval('new this.Type.' + type + '(s)');
+				this.transforms.push(transform);
+			}
+		}
+		
+		// elements
+		svg.Element = {}
+		
+		svg.Element.ElementBase = function(node) {	
+			this.attributes = {};
+			this.styles = {};
+			this.children = [];
+			
+			// get or create attribute
+			this.attribute = function(name, createIfNotExists) {
+				var a = this.attributes[name];
+				if (a != null) return a;
+							
+				a = new svg.Property(name, '');
+				if (createIfNotExists == true) this.attributes[name] = a;
+				return a;
+			}
+			
+			// get or create style
+			this.style = function(name, createIfNotExists) {
+				var s = this.styles[name];
+				if (s != null) return s;
+				
+				var a = this.attribute(name);
+				if (a != null && a.hasValue()) {
+					return a;
+				}
+					
+				s = new svg.Property(name, '');
+				if (createIfNotExists == true) this.styles[name] = s;
+				return s;
+			}
+			
+			// base render
+			this.render = function(ctx) {
+				ctx.save();
+				this.setContext(ctx);
+				this.renderChildren(ctx);
+				this.clearContext(ctx);
+				ctx.restore();
+			}
+			
+			// base set context
+			this.setContext = function(ctx) {
+				// OVERRIDE ME!
+			}
+			
+			// base clear context
+			this.clearContext = function(ctx) {
+				// OVERRIDE ME!
+			}			
+			
+			// base render children
+			this.renderChildren = function(ctx) {
+				for (var i=0; i<this.children.length; i++) {
+					this.children[i].render(ctx);
+				}
+			}
+				
+			if (node != null) {
+				// add children
+				for (var i=0; i<node.childNodes.length; i++) {
+					var childNode = node.childNodes[i];
+					if (childNode.nodeType == 1) { //ELEMENT_NODE
+						var child = svg.CreateElement(childNode);
+						child.parent = this;
+						this.children.push(child);
+					}
+				}
+				
+				// add attributes
+				for (var i=0; i<node.attributes.length; i++) {
+					var attribute = node.attributes[i];
+					this.attributes[attribute.nodeName] = new svg.Property(attribute.nodeName, attribute.nodeValue);
+				}
+										
+				// add tag styles
+				var styles = svg.Styles[this.type];
+				if (styles != null) {
+					for (var name in styles) {
+						this.styles[name] = styles[name];
+					}
+				}					
+				
+				// add class styles
+				if (this.attribute('class').hasValue()) {
+					var classes = svg.compressSpaces(this.attribute('class').value).split(' ');
+					for (var j=0; j<classes.length; j++) {
+						styles = svg.Styles['.'+classes[j]];
+						if (styles != null) {
+							for (var name in styles) {
+								this.styles[name] = styles[name];
+							}
+						}
+					}
+				}
+				
+				// add inline styles
+				if (this.attribute('style').hasValue()) {
+					var styles = this.attribute('style').value.split(';');
+					for (var i=0; i<styles.length; i++) {
+						if (svg.trim(styles[i]) != '') {
+							var style = styles[i].split(':');
+							var name = svg.trim(style[0]);
+							var value = svg.trim(style[1]);
+							this.styles[name] = new svg.Property(name, value);
+						}
+					}
+				}
+				
+				// set id
+				if (this.attribute('id').hasValue()) svg.Definitions[this.attribute('id').value] = this;				
+			}
+		}
+		
+		svg.Element.RenderedElementBase = function(node) {
+			this.base = svg.Element.ElementBase;
+			this.base(node);
+			
+			this.setContext = function(ctx) {
+				// fill
+				if (this.style('fill').value.indexOf('url(') == 0) {
+					var grad = this.style('fill').Definition.getDefinition();
+					if (grad != null && grad.createGradient) {
+						ctx.fillStyle = grad.createGradient(ctx, this);
+					}
+				}
+				else {
+					if (this.style('fill').hasValue()) {
+						var fillStyle = this.style('fill');
+						if (this.style('fill-opacity').hasValue()) fillStyle = fillStyle.Color.addOpacity(this.style('fill-opacity').value);
+						ctx.fillStyle = (fillStyle.value == 'none' ? 'rgba(0,0,0,0)' : fillStyle.value);
+					}
+				}
+									
+				// stroke
+				if (this.style('stroke').hasValue()) {
+					var strokeStyle = this.style('stroke');
+					if (this.style('stroke-opacity').hasValue()) strokeStyle = strokeStyle.Color.addOpacity(this.style('stroke-opacity').value);
+					ctx.strokeStyle = (strokeStyle.value == 'none' ? 'rgba(0,0,0,0)' : strokeStyle.value);
+				}
+				if (this.style('stroke-width').hasValue()) ctx.lineWidth = this.style('stroke-width').Length.toPixels();
+				if (this.style('stroke-linecap').hasValue()) ctx.lineCap = this.style('stroke-linecap').value;
+				if (this.style('stroke-linejoin').hasValue()) ctx.lineJoin = this.style('stroke-linejoin').value;
+				if (this.style('stroke-miterlimit').hasValue()) ctx.miterLimit = this.style('stroke-miterlimit').value;
+
+				// font
+				if (this.style('font-size').hasValue()) {
+					var fontFamily = this.style('font-family').valueOrDefault('Arial');
+					var fontSize = this.style('font-size').numValueOrDefault('12') + 'px';
+					ctx.font = fontSize + ' ' + fontFamily;
+				}
+				
+				// transform
+				if (this.attribute('transform').hasValue()) { 
+					var transform = new svg.Transform(this.attribute('transform').value);
+					transform.apply(ctx);
+				}
+				
+				// clip
+				if (this.attribute('clip-path').hasValue()) {
+					var clip = this.attribute('clip-path').Definition.getDefinition();
+					if (clip != null) clip.apply(ctx);
+				}
+				
+				// opacity
+				if (this.style('opacity').hasValue()) {
+					ctx.globalAlpha = this.style('opacity').numValue();
+				}
+			}		
+		}
+		svg.Element.RenderedElementBase.prototype = new svg.Element.ElementBase;
+		
+		svg.Element.PathElementBase = function(node) {
+			this.base = svg.Element.RenderedElementBase;
+			this.base(node);
+			
+			this.path = function(ctx) {
+				if (ctx != null) ctx.beginPath();
+				return new svg.BoundingBox();
+			}
+			
+			this.renderChildren = function(ctx) {
+				this.path(ctx);
+				if (ctx.fillStyle != '') ctx.fill();
+				if (ctx.strokeStyle != '') ctx.stroke();	
+			}
+			
+			this.getBoundingBox = function() {
+				return this.path();
+			}
+		}
+		svg.Element.PathElementBase.prototype = new svg.Element.RenderedElementBase;
+		
+		// svg element
+		svg.Element.svg = function(node) {
+			this.base = svg.Element.RenderedElementBase;
+			this.base(node);
+			
+			this.baseClearContext = this.clearContext;
+			this.clearContext = function(ctx) {
+				this.baseClearContext(ctx);
+				svg.ViewPort.RemoveCurrent();
+			}
+			
+			this.baseSetContext = this.setContext;
+			this.setContext = function(ctx) {
+				this.baseSetContext(ctx);
+				
+				// create new view port
+				if (this.attribute('x').hasValue() && this.attribute('y').hasValue()) {
+					ctx.translate(this.attribute('x').Length.toPixels('x'), this.attribute('y').Length.toPixels('y'));
+				}
+				
+				var width = svg.ViewPort.width();
+				var height = svg.ViewPort.height();
+				if (this.attribute('width').hasValue() && this.attribute('height').hasValue()) {
+					width = this.attribute('width').Length.toPixels('x');
+					height = this.attribute('height').Length.toPixels('y');
+					ctx.beginPath();
+					ctx.moveTo(0, 0);
+					ctx.lineTo(width, 0);
+					ctx.lineTo(width, height);
+					ctx.lineTo(0, height);
+					ctx.closePath();
+					ctx.clip();
+				}
+				svg.ViewPort.SetCurrent(width, height);	
+						
+				// viewbox
+				if (this.attribute('viewBox').hasValue()) {				
+					var viewBox = svg.ToNumberArray(this.attribute('viewBox').value);
+					var minX = viewBox[0];
+					var minY = viewBox[1];
+					width = viewBox[2];
+					height = viewBox[3];
+					
+					// aspect ratio - http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
+					var preserveAspectRatio = svg.compressSpaces(this.attribute('preserveAspectRatio').value);
+					preserveAspectRatio = preserveAspectRatio.replace(/^defer\s/,''); // ignore defer
+					var align = preserveAspectRatio.split(' ')[0] || 'xMidYMid';
+					var meetOrSlice = preserveAspectRatio.split(' ')[1] || 'meet';					
+					
+					// calculate scale
+					var scaleX = svg.ViewPort.width() / width;
+					var scaleY = svg.ViewPort.height() / height;
+					var scaleMin = Math.min(scaleX, scaleY);
+					var scaleMax = Math.max(scaleX, scaleY);
+					if (meetOrSlice == 'meet') { width *= scaleMin; height *= scaleMin; }
+					if (meetOrSlice == 'slice') { width *= scaleMax; height *= scaleMax; }	
+
+					// align
+					if (align.match(/^xMid/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(svg.ViewPort.width() / 2.0 - width / 2.0, 0); 
+					if (align.match(/YMid$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, svg.ViewPort.height() / 2.0 - height / 2.0); 
+					if (align.match(/^xMax/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(svg.ViewPort.width() - width, 0); 
+					if (align.match(/YMax$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, svg.ViewPort.height() - height); 
+
+					// scale
+					if (meetOrSlice == 'meet') ctx.scale(scaleMin, scaleMin); 
+					if (meetOrSlice == 'slice') ctx.scale(scaleMax, scaleMax); 	
+					ctx.translate(-minX, -minY);		
+
+					svg.ViewPort.RemoveCurrent();	
+					svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]);						
+				}				
+				
+				// initial values
+				ctx.fillStyle = '#000000';
+				ctx.strokeStyle = 'rgba(0,0,0,0)';
+				ctx.lineCap = 'butt';
+				ctx.lineJoin = 'miter';
+				ctx.miterLimit = 4;
+			}
+		}
+		svg.Element.svg.prototype = new svg.Element.RenderedElementBase;
+
+		// rect element
+		svg.Element.rect = function(node) {
+			this.base = svg.Element.PathElementBase;
+			this.base(node);
+			
+			this.path = function(ctx) {
+				var x = this.attribute('x').Length.toPixels('x');
+				var y = this.attribute('y').Length.toPixels('y');
+				var width = this.attribute('width').Length.toPixels('x');
+				var height = this.attribute('height').Length.toPixels('y');
+				var rx = this.attribute('rx').Length.toPixels('x');
+				var ry = this.attribute('ry').Length.toPixels('y');
+				if (this.attribute('rx').hasValue() && !this.attribute('ry').hasValue()) ry = rx;
+				if (this.attribute('ry').hasValue() && !this.attribute('rx').hasValue()) rx = ry;
+				
+				if (ctx != null) {
+					ctx.beginPath();
+					ctx.moveTo(x + rx, y);
+					ctx.lineTo(x + width - rx, y);
+					ctx.quadraticCurveTo(x + width, y, x + width, y + ry)
+					ctx.lineTo(x + width, y + height - ry);
+					ctx.quadraticCurveTo(x + width, y + height, x + width - rx, y + height)
+					ctx.lineTo(x + rx, y + height);
+					ctx.quadraticCurveTo(x, y + height, x, y + height - ry)
+					ctx.lineTo(x, y + ry);
+					ctx.quadraticCurveTo(x, y, x + rx, y)
+					ctx.closePath();
+				}
+				
+				return new svg.BoundingBox(x, y, x + width, y + height);
+			}
+		}
+		svg.Element.rect.prototype = new svg.Element.PathElementBase;
+		
+		// circle element
+		svg.Element.circle = function(node) {
+			this.base = svg.Element.PathElementBase;
+			this.base(node);
+			
+			this.path = function(ctx) {
+				var cx = this.attribute('cx').Length.toPixels('x');
+				var cy = this.attribute('cy').Length.toPixels('y');
+				var r = this.attribute('r').Length.toPixels();
+			
+				if (ctx != null) {
+					ctx.beginPath();
+					ctx.arc(cx, cy, r, 0, Math.PI * 2, true); 
+					ctx.closePath();
+				}
+				
+				return new svg.BoundingBox(cx - r, cy - r, cx + r, cy + r);
+			}
+		}
+		svg.Element.circle.prototype = new svg.Element.PathElementBase;	
+
+		// ellipse element
+		svg.Element.ellipse = function(node) {
+			this.base = svg.Element.PathElementBase;
+			this.base(node);
+			
+			this.path = function(ctx) {
+				var KAPPA = 4 * ((Math.sqrt(2) - 1) / 3);
+				var rx = this.attribute('rx').Length.toPixels('x');
+				var ry = this.attribute('ry').Length.toPixels('y');
+				var cx = this.attribute('cx').Length.toPixels('x');
+				var cy = this.attribute('cy').Length.toPixels('y');
+				
+				if (ctx != null) {
+					ctx.beginPath();
+					ctx.moveTo(cx, cy - ry);
+					ctx.bezierCurveTo(cx + (KAPPA * rx), cy - ry,  cx + rx, cy - (KAPPA * ry), cx + rx, cy);
+					ctx.bezierCurveTo(cx + rx, cy + (KAPPA * ry), cx + (KAPPA * rx), cy + ry, cx, cy + ry);
+					ctx.bezierCurveTo(cx - (KAPPA * rx), cy + ry, cx - rx, cy + (KAPPA * ry), cx - rx, cy);
+					ctx.bezierCurveTo(cx - rx, cy - (KAPPA * ry), cx - (KAPPA * rx), cy - ry, cx, cy - ry);
+					ctx.closePath();
+				}
+				
+				return new svg.BoundingBox(cx - rx, cy - ry, cx + rx, cy + ry);
+			}
+		}
+		svg.Element.ellipse.prototype = new svg.Element.PathElementBase;			
+		
+		// line element
+		svg.Element.line = function(node) {
+			this.base = svg.Element.PathElementBase;
+			this.base(node);
+						
+			this.path = function(ctx) {
+				var x1 = this.attribute('x1').Length.toPixels('x');
+				var y1 = this.attribute('y1').Length.toPixels('y');
+				var x2 = this.attribute('x2').Length.toPixels('x');
+				var y2 = this.attribute('y2').Length.toPixels('y');
+				
+				if (ctx != null) {
+					ctx.beginPath();
+					ctx.moveTo(x1, y1);
+					ctx.lineTo(x2, y2);
+				}
+				
+				return new svg.BoundingBox(x1, y1, x2, y2);
+			}
+		}
+		svg.Element.line.prototype = new svg.Element.PathElementBase;		
+				
+		// polyline element
+		svg.Element.polyline = function(node) {
+			this.base = svg.Element.PathElementBase;
+			this.base(node);
+			
+			this.points = svg.CreatePath(this.attribute('points').value);
+			this.path = function(ctx) {
+				var bb = new svg.BoundingBox(this.points[0].x, this.points[0].y);
+				if (ctx != null) {
+					ctx.beginPath();
+					ctx.moveTo(this.points[0].x, this.points[0].y);
+				}
+				for (var i=1; i<this.points.length; i++) {
+					bb.addPoint(this.points[i].x, this.points[i].y);
+					if (ctx != null) ctx.lineTo(this.points[i].x, this.points[i].y);
+				}
+				return bb;
+			}
+		}
+		svg.Element.polyline.prototype = new svg.Element.PathElementBase;				
+				
+		// polygon element
+		svg.Element.polygon = function(node) {
+			this.base = svg.Element.polyline;
+			this.base(node);
+			
+			this.basePath = this.path;
+			this.path = function(ctx) {
+				var bb = this.basePath(ctx);
+				if (ctx != null) {
+					ctx.lineTo(this.points[0].x, this.points[0].y);
+					ctx.closePath();
+				}
+				return bb;
+			}
+		}
+		svg.Element.polygon.prototype = new svg.Element.polyline;
+
+		// path element
+		svg.Element.path = function(node) {
+			this.base = svg.Element.PathElementBase;
+			this.base(node);
+					
+			var d = this.attribute('d').value;
+			// TODO: floating points, convert to real lexer based on http://www.w3.org/TR/SVG11/paths.html#PathDataBNF
+			d = d.replace(/,/gm,' '); // get rid of all commas
+			d = d.replace(/([A-Za-z])([A-Za-z])/gm,'$1 $2'); // separate commands from commands
+			d = d.replace(/([A-Za-z])([A-Za-z])/gm,'$1 $2'); // separate commands from commands
+			d = d.replace(/([A-Za-z])([^\s])/gm,'$1 $2'); // separate commands from points
+			d = d.replace(/([^\s])([A-Za-z])/gm,'$1 $2'); // separate commands from points
+			d = d.replace(/([0-9])([+\-])/gm,'$1 $2'); // separate digits when no comma
+			d = d.replace(/(\.[0-9]*)(\.)/gm,'$1 $2'); // separate digits when no comma
+			d = svg.compressSpaces(d); // compress multiple spaces
+			d = svg.trim(d);
+			this.PathParser = new (function(d) {
+				this.tokens = d.split(' ');
+				
+				this.reset = function() {
+					this.i = -1;
+					this.command = '';
+					this.control = new svg.Point(0, 0);
+					this.current = new svg.Point(0, 0);
+				}
+				
+				this.isEnd = function() {
+					return this.i == this.tokens.length - 1;
+				}
+				
+				this.isCommandOrEnd = function() {
+					if (this.isEnd()) return true;
+					return this.tokens[this.i + 1].match(/[A-Za-z]/) != null;
+				}
+				
+				this.isRelativeCommand = function() {
+					return this.command == this.command.toLowerCase();
+				}
+				
+				this.getToken = function() {
+					this.i = this.i + 1;
+					return this.tokens[this.i];
+				}
+				
+				this.getScalar = function() {
+					return parseFloat(this.getToken());
+				}
+				
+				this.nextCommand = function() {
+					this.command = this.getToken();
+				}				
+				
+				this.getPoint = function() {
+					var p = new svg.Point(this.getScalar(), this.getScalar());
+					return this.makeAbsolute(p);
+				}
+				
+				this.getAsControlPoint = function() {
+					var p = this.getPoint();
+					this.control = p;
+					return p;
+				}
+				
+				this.getAsCurrentPoint = function() {
+					var p = this.getPoint();
+					this.current = p;
+					return p;	
+				}
+				
+				this.getReflectedControlPoint = function() {
+					var p = new svg.Point(2 * this.current.x - this.control.x, 2 * this.current.y - this.control.y);					
+					return this.makeAbsolute(p);
+				}
+				
+				this.makeAbsolute = function(p) {
+					if (this.isRelativeCommand()) {
+						p.x = this.current.x + p.x;
+						p.y = this.current.y + p.y;
+					}
+					return p;
+				}
+			})(d);
+			
+			this.path = function(ctx) {				
+				var pp = this.PathParser;
+				pp.reset();
+				
+				var bb = new svg.BoundingBox();
+				if (ctx != null) ctx.beginPath();
+				while (!pp.isEnd()) {
+					pp.nextCommand();
+					if (pp.command.toUpperCase() == 'M') {
+						var p = pp.getAsCurrentPoint();
+						bb.addPoint(p.x, p.y);
+						if (ctx != null) ctx.moveTo(p.x, p.y);
+						while (!pp.isCommandOrEnd()) {
+							var p = pp.getAsCurrentPoint();
+							bb.addPoint(p.x, p.y);
+							if (ctx != null) ctx.lineTo(p.x, p.y);
+						}
+					}
+					else if (pp.command.toUpperCase() == 'L') {
+						while (!pp.isCommandOrEnd()) {
+							var p = pp.getAsCurrentPoint();
+							bb.addPoint(p.x, p.y);
+							if (ctx != null) ctx.lineTo(p.x, p.y);
+						}
+					}
+					else if (pp.command.toUpperCase() == 'H') {
+						while (!pp.isCommandOrEnd()) {
+							pp.current.x = (pp.isRelativeCommand() ? pp.current.x : 0) + pp.getScalar();
+							bb.addPoint(pp.current.x, pp.current.y);
+							if (ctx != null) ctx.lineTo(pp.current.x, pp.current.y);
+						}
+					}
+					else if (pp.command.toUpperCase() == 'V') {
+						while (!pp.isCommandOrEnd()) {
+							pp.current.y = (pp.isRelativeCommand() ? pp.current.y : 0) + pp.getScalar();
+							bb.addPoint(pp.current.x, pp.current.y);
+							if (ctx != null) ctx.lineTo(pp.current.x, pp.current.y);
+						}
+					}
+					else if (pp.command.toUpperCase() == 'C') {
+						while (!pp.isCommandOrEnd()) {
+							var curr = pp.current;
+							var p1 = pp.getPoint();
+							var cntrl = pp.getAsControlPoint();
+							var cp = pp.getAsCurrentPoint();
+							bb.addBezierCurve(curr.x, curr.y, p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
+							if (ctx != null) ctx.bezierCurveTo(p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
+						}
+					}
+					else if (pp.command.toUpperCase() == 'S') {
+						while (!pp.isCommandOrEnd()) {
+							var curr = pp.current;
+							var p1 = pp.getReflectedControlPoint();
+							var cntrl = pp.getAsControlPoint();
+							var cp = pp.getAsCurrentPoint();
+							bb.addBezierCurve(curr.x, curr.y, p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
+							if (ctx != null) ctx.bezierCurveTo(p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
+						}				
+					}					
+					else if (pp.command.toUpperCase() == 'Q') {
+						while (!pp.isCommandOrEnd()) {
+							var curr = pp.current;
+							var cntrl = pp.getAsControlPoint();
+							var cp = pp.getAsCurrentPoint();
+							bb.addQuadraticCurve(curr.x, curr.y, cntrl.x, cntrl.y, cp.x, cp.y);
+							if (ctx != null) ctx.quadraticCurveTo(cntrl.x, cntrl.y, cp.x, cp.y);
+						}
+					}					
+					else if (pp.command.toUpperCase() == 'T') {
+						while (!pp.isCommandOrEnd()) {
+							var curr = pp.current;
+							var cntrl = pp.getReflectedControlPoint();
+							pp.control = cntrl;
+							var cp = pp.getAsCurrentPoint();
+							bb.addQuadraticCurve(curr.x, curr.y, cntrl.x, cntrl.y, cp.x, cp.y);
+							if (ctx != null) ctx.quadraticCurveTo(cntrl.x, cntrl.y, cp.x, cp.y);
+						}					
+					}
+					else if (pp.command.toUpperCase() == 'A') {
+						while (!pp.isCommandOrEnd()) {
+						    var curr = pp.current;
+							var rx = pp.getScalar();
+							var ry = pp.getScalar();
+							var xAxisRotation = pp.getScalar() * (Math.PI / 180.0);
+							var largeArcFlag = pp.getScalar();
+							var sweepFlag = pp.getScalar();
+							var cp = pp.getAsCurrentPoint();
+							
+							// Conversion from endpoint to center parameterization
+							// http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
+							// x1', y1'
+							var currp = new svg.Point(
+								Math.cos(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.sin(xAxisRotation) * (curr.y - cp.y) / 2.0,
+								-Math.sin(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.cos(xAxisRotation) * (curr.y - cp.y) / 2.0
+							);
+							// cx', cy'
+							var s = (largeArcFlag == sweepFlag ? -1 : 1) * Math.sqrt(
+								((Math.pow(rx,2)*Math.pow(ry,2))-(Math.pow(rx,2)*Math.pow(currp.y,2))-(Math.pow(ry,2)*Math.pow(currp.x,2))) /
+								(Math.pow(rx,2)*Math.pow(currp.y,2)+Math.pow(ry,2)*Math.pow(currp.x,2))
+							);
+							if (isNaN(s)) s = 0;
+							var cpp = new svg.Point(s * rx * currp.y / ry, s * -ry * currp.x / rx);
+							// cx, cy
+							var centp = new svg.Point(
+								(curr.x + cp.x) / 2.0 + Math.cos(xAxisRotation) * cpp.x - Math.sin(xAxisRotation) * cpp.y,
+								(curr.y + cp.y) / 2.0 + Math.sin(xAxisRotation) * cpp.x + Math.cos(xAxisRotation) * cpp.y
+							);
+							// vector magnitude
+							var m = function(v) { return Math.sqrt(Math.pow(v[0],2) + Math.pow(v[1],2)); }
+							// angle between two vectors
+							var a = function(u, v) { return (u[0]*v[1] < u[1]*v[0] ? -1 : 1) * Math.acos((u[0]*v[0]+u[1]*v[1]) / (m(u)*m(v))); }
+							// initial angle
+							var a1 = a([1,0], [(currp.x-cpp.x)/rx,(currp.y-cpp.y)/ry]);
+							// angle delta
+							var ad = a([(currp.x-cpp.x)/rx,(currp.y-cpp.y)/ry], [(-currp.x-cpp.x)/rx,(-currp.y-cpp.y)/ry]);
+							if (sweepFlag == 0 && ad > 0) ad = ad - 2 * Math.PI;
+							if (sweepFlag == 1 && ad < 0) ad = ad + 2 * Math.PI;
+							
+							bb.addPoint(cp.x, cp.y); // TODO: this is too naive, make it better
+							if (ctx != null) {
+								var r = rx > ry ? rx : ry;
+								var sx = rx > ry ? 1 : rx / ry;
+								var sy = rx > ry ? ry / rx : 1;
+							
+								ctx.translate(centp.x, centp.y);
+								ctx.rotate(xAxisRotation);
+								ctx.scale(sx, sy);
+								ctx.arc(0, 0, r, a1, a1 + ad, 1 - sweepFlag);
+								ctx.scale(1/sx, 1/sy);
+								ctx.rotate(-xAxisRotation);
+								ctx.translate(-centp.x, -centp.y);
+							}
+						}
+					}
+					else if (pp.command.toUpperCase() == 'Z') {
+						if (ctx != null) ctx.closePath();
+					}
+				}
+				
+				return bb;
+			}
+		}
+		svg.Element.path.prototype = new svg.Element.PathElementBase;
+		
+		// definitions element
+		svg.Element.defs = function(node) {
+			this.base = svg.Element.ElementBase;
+			this.base(node);			
+		}
+		svg.Element.defs.prototype = new svg.Element.ElementBase;
+		
+		// base for gradients
+		svg.Element.GradientBase = function(node) {
+			this.base = svg.Element.ElementBase;
+			this.base(node);
+			
+			this.gradientUnits = this.attribute('gradientUnits').valueOrDefault('objectBoundingBox');
+			
+			this.stops = [];			
+			for (var i=0; i<this.children.length; i++) {
+				var child = this.children[i];
+				this.stops.push(child);
+			}	
+
+			this.getGradient = function() {
+				// OVERRIDE ME!
+			}			
+
+			this.createGradient = function(ctx, element) {
+				var g = this.getGradient(ctx, element);
+				for (var i=0; i<this.stops.length; i++) {
+					g.addColorStop(this.stops[i].offset, this.stops[i].color);
+				}
+				return g;				
+			}
+		}
+		svg.Element.GradientBase.prototype = new svg.Element.ElementBase;
+		
+		// linear gradient element
+		svg.Element.linearGradient = function(node) {
+			this.base = svg.Element.GradientBase;
+			this.base(node);
+			
+			this.getGradient = function(ctx, element) {
+				var bb = element.getBoundingBox();
+				
+				var x1 = (this.gradientUnits == 'objectBoundingBox' 
+					? bb.x() + bb.width() * this.attribute('x1').numValue() 
+					: this.attribute('x1').Length.toPixels('x'));
+				var y1 = (this.gradientUnits == 'objectBoundingBox' 
+					? bb.y() + bb.height() * this.attribute('y1').numValue()
+					: this.attribute('y1').Length.toPixels('y'));
+				var x2 = (this.gradientUnits == 'objectBoundingBox' 
+					? bb.x() + bb.width() * this.attribute('x2').numValue()
+					: this.attribute('x2').Length.toPixels('x'));
+				var y2 = (this.gradientUnits == 'objectBoundingBox' 
+					? bb.y() + bb.height() * this.attribute('y2').numValue()
+					: this.attribute('y2').Length.toPixels('y'));
+				
+				return ctx.createLinearGradient(x1, y1, x2, y2);
+			}
+		}
+		svg.Element.linearGradient.prototype = new svg.Element.GradientBase;
+		
+		// radial gradient element
+		svg.Element.radialGradient = function(node) {
+			this.base = svg.Element.GradientBase;
+			this.base(node);
+			
+			this.getGradient = function(ctx, element) {
+				var bb = element.getBoundingBox();
+				
+				var cx = (this.gradientUnits == 'objectBoundingBox' 
+					? bb.x() + bb.width() * this.attribute('cx').numValue() 
+					: this.attribute('cx').Length.toPixels('x'));
+				var cy = (this.gradientUnits == 'objectBoundingBox' 
+					? bb.y() + bb.height() * this.attribute('cy').numValue() 
+					: this.attribute('cy').Length.toPixels('y'));
+				
+				var fx = cx;
+				var fy = cy;
+				if (this.attribute('fx').hasValue()) {
+					fx = (this.gradientUnits == 'objectBoundingBox' 
+					? bb.x() + bb.width() * this.attribute('fx').numValue() 
+					: this.attribute('fx').Length.toPixels('x'));
+				}
+				if (this.attribute('fy').hasValue()) {
+					fy = (this.gradientUnits == 'objectBoundingBox' 
+					? bb.y() + bb.height() * this.attribute('fy').numValue() 
+					: this.attribute('fy').Length.toPixels('y'));
+				}
+				
+				var r = (this.gradientUnits == 'objectBoundingBox' 
+					? (bb.width() + bb.height()) / 2.0 * this.attribute('r').numValue()
+					: this.attribute('r').Length.toPixels());
+				
+				return ctx.createRadialGradient(fx, fy, 0, cx, cy, r);
+			}
+		}
+		svg.Element.radialGradient.prototype = new svg.Element.GradientBase;
+		
+		// gradient stop element
+		svg.Element.stop = function(node) {
+			this.base = svg.Element.ElementBase;
+			this.base(node);
+			
+			this.offset = this.attribute('offset').numValue();
+			
+			var stopColor = this.style('stop-color');
+			if (this.style('stop-opacity').hasValue()) stopColor = stopColor.Color.addOpacity(this.style('stop-opacity').value);
+			this.color = stopColor.value;
+		}
+		svg.Element.stop.prototype = new svg.Element.ElementBase;
+		
+		// animation base element
+		svg.Element.AnimateBase = function(node) {
+			this.base = svg.Element.ElementBase;
+			this.base(node);
+			
+			svg.Animations.push(this);
+			
+			this.duration = 0.0;
+			this.begin = this.attribute('begin').Time.toMilliseconds();
+			this.maxDuration = this.begin + this.attribute('dur').Time.toMilliseconds();
+
+			this.calcValue = function() {
+				// OVERRIDE ME!
+				return '';
+			}
+			
+			this.update = function(delta) {			
+				// if we're past the end time
+				if (this.duration > this.maxDuration) {
+					// loop for indefinitely repeating animations
+					if (this.attribute('repeatCount').value == 'indefinite') {
+						this.duration = 0.0
+					}
+					else {
+						return false; // no updates made
+					}
+				}			
+				this.duration = this.duration + delta;
+			
+				// if we're past the begin time
+				var updated = false;
+				if (this.begin < this.duration) {
+					var newValue = this.calcValue(); // tween
+					var attributeType = this.attribute('attributeType').value;
+					var attributeName = this.attribute('attributeName').value;
+					
+					if (this.parent != null) {
+						if (attributeType == 'CSS') {
+							this.parent.style(attributeName, true).value = newValue;
+						}
+						else { // default or XML
+							if (this.attribute('type').hasValue()) {
+								// for transform, etc.
+								var type = this.attribute('type').value;
+								this.parent.attribute(attributeName, true).value = type + '(' + newValue + ')';
+							}
+							else {
+								this.parent.attribute(attributeName, true).value = newValue;
+							}
+						}
+						updated = true;
+					}
+				}
+				
+				return updated;
+			}
+			
+			// fraction of duration we've covered
+			this.progress = function() {
+				return ((this.duration - this.begin) / (this.maxDuration - this.begin));
+			}			
+		}
+		svg.Element.AnimateBase.prototype = new svg.Element.ElementBase;
+		
+		// animate element
+		svg.Element.animate = function(node) {
+			this.base = svg.Element.AnimateBase;
+			this.base(node);
+			
+			this.calcValue = function() {
+				var from = this.attribute('from').numValue();
+				var to = this.attribute('to').numValue();
+				
+				// tween value linearly
+				return from + (to - from) * this.progress(); 
+			};
+		}
+		svg.Element.animate.prototype = new svg.Element.AnimateBase;
+			
+		// animate color element
+		svg.Element.animateColor = function(node) {
+			this.base = svg.Element.AnimateBase;
+			this.base(node);
+
+			this.calcValue = function() {
+				var from = new RGBColor(this.attribute('from').value);
+				var to = new RGBColor(this.attribute('to').value);
+				
+				if (from.ok && to.ok) {
+					// tween color linearly
+					var r = from.r + (to.r - from.r) * this.progress();
+					var g = from.g + (to.g - from.g) * this.progress();
+					var b = from.b + (to.b - from.b) * this.progress();
+					return 'rgb('+parseInt(r,10)+','+parseInt(g,10)+','+parseInt(b,10)+')';
+				}
+				return this.attribute('from').value;
+			};
+		}
+		svg.Element.animateColor.prototype = new svg.Element.AnimateBase;
+		
+		// animate transform element
+		svg.Element.animateTransform = function(node) {
+			this.base = svg.Element.animate;
+			this.base(node);
+		}
+		svg.Element.animateTransform.prototype = new svg.Element.animate;
+		
+		// text element
+		svg.Element.text = function(node) {
+			this.base = svg.Element.ElementBase;
+			this.base(node);
+			
+			// accumulate all the child text nodes, then trim them
+			this.text = '';
+			for (var i=0; i<node.childNodes.length; i++) {
+				if (node.childNodes[i].nodeType == 3) { // TEXT
+					this.text = this.text + node.childNodes[i].nodeValue;
+				}
+			}
+			this.text = svg.trim(this.text);
+			
+			this.render = function(ctx) {
+				var x = this.attribute('x').Length.toPixels('x');
+				var y = this.attribute('y').Length.toPixels('y');
+				if (ctx.fillText) ctx.fillText(this.text, x, y);
+			}
+		}
+		svg.Element.text.prototype = new svg.Element.ElementBase;
+		
+		// group element
+		svg.Element.g = function(node) {
+			this.base = svg.Element.RenderedElementBase;
+			this.base(node);
+		}
+		svg.Element.g.prototype = new svg.Element.RenderedElementBase;
+
+		svg.Element.a = function(node) {
+			this.base = svg.Element.RenderedElementBase;
+			this.base(node);
+		}
+		svg.Element.a.prototype = new svg.Element.RenderedElementBase;
+		
+		svg.Element.style = function(node) { 
+			this.base = svg.Element.ElementBase;
+			this.base(node);
+			
+			var css = node.childNodes[0].nodeValue;
+			css = css.replace(/(\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*+\/)|(\/\/.*)/gm, ''); // remove comments
+			css = svg.compressSpaces(css); // replace whitespace
+			var cssDefs = css.split('}');
+			for (var i=0; i<cssDefs.length; i++) {
+				if (svg.trim(cssDefs[i]) != '') {
+					var cssDef = cssDefs[i].split('{');
+					var cssClasses = cssDef[0].split(',');
+					var cssProps = cssDef[1].split(';');
+					for (var j=0; j<cssClasses.length; j++) {
+						var cssClass = svg.trim(cssClasses[j]);
+						if (cssClass != '') {
+							var props = {};
+							for (var k=0; k<cssProps.length; k++) {
+								var prop = cssProps[k].split(':');
+								var name = prop[0];
+								var value = prop[1];
+								if (name != null && value != null) {
+									props[svg.trim(prop[0])] = new svg.Property(svg.trim(prop[0]), svg.trim(prop[1]));
+								}
+							}
+							svg.Styles[cssClass] = props;
+						}
+					}
+				}
+			}
+		}
+		svg.Element.style.prototype = new svg.Element.ElementBase;
+		
+		// use element 
+		svg.Element.use = function(node) {
+			this.base = svg.Element.RenderedElementBase;
+			this.base(node);
+			
+			this.baseSetContext = this.setContext;
+			this.setContext = function(ctx) {
+				this.baseSetContext(ctx);
+				if (this.attribute('x').hasValue()) ctx.translate(this.attribute('x').Length.toPixels('x'), 0);
+				if (this.attribute('y').hasValue()) ctx.translate(0, this.attribute('y').Length.toPixels('y'));
+			}
+			
+			this.renderChildren = function(ctx) {
+				var element = this.attribute('xlink:href').Definition.getDefinition();
+				if (element != null) element.render(ctx);
+			}
+		}
+		svg.Element.use.prototype = new svg.Element.RenderedElementBase;
+		
+		// clip element
+		svg.Element.clipPath = function(node) {
+			this.base = svg.Element.ElementBase;
+			this.base(node);
+			
+			this.apply = function(ctx) {
+				for (var i=0; i<this.children.length; i++) {
+					if (this.children[i].path) {
+						this.children[i].path(ctx);
+						ctx.clip();
+					}
+				}
+			}
+		}
+		svg.Element.clipPath.prototype = new svg.Element.ElementBase;
+
+		// title element, do nothing
+		svg.Element.title = function(node) {
+		}
+		svg.Element.title.prototype = new svg.Element.ElementBase;
+
+		// desc element, do nothing
+		svg.Element.desc = function(node) {
+		}
+		svg.Element.desc.prototype = new svg.Element.ElementBase;		
+		
+		svg.Element.MISSING = function(node) {
+			console.log('ERROR: Element \'' + node.nodeName + '\' not yet implemented.');
+		}
+		svg.Element.MISSING.prototype = new svg.Element.ElementBase;
+		
+		// element factory
+		svg.CreateElement = function(node) {
+			var className = 'svg.Element.' + node.nodeName.replace(/^[^:]+:/,'');
+			if (!eval(className)) className = 'svg.Element.MISSING';
+		
+			var e = eval('new ' + className + '(node)');
+			e.type = node.nodeName;
+			return e;
+		}
+				
+		// load from url
+		svg.load = function(ctx, url) {
+			svg.loadXml(ctx, svg.ajax(url));
+		}
+		
+		// load from xml
+		svg.loadXml = function(ctx, xml) {
+			svg.init(ctx);
+		
+			var dom = svg.parseXml(xml);
+			var e = svg.CreateElement(dom.documentElement);
+			
+			// set canvas size
+			if (e.attribute('width').hasValue()) {
+				ctx.canvas.width = e.attribute('width').Length.toPixels(ctx.canvas.parentNode.clientWidth);
+			}
+			if (e.attribute('height').hasValue()) {
+				ctx.canvas.height = e.attribute('height').Length.toPixels(ctx.canvas.parentNode.clientHeight);
+			}
+			svg.ViewPort.SetCurrent(ctx.canvas.clientWidth, ctx.canvas.clientHeight);
+			
+			// render loop
+			ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
+			e.render(ctx);
+			svg.intervalID = setInterval(function() { 
+				// update animations
+				var needUpdate = false;
+				for (var i=0; i<svg.Animations.length; i++) {
+					needUpdate = needUpdate | svg.Animations[i].update(1000 / svg.FRAMERATE);
+				}
+			
+				// render if needed
+				if (needUpdate) {
+					ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
+					e.render(ctx);
+				}
+			}, 1000 / svg.FRAMERATE);
+		}
+		
+		svg.stop = function() {
+			if (svg.intervalID) {
+				clearInterval(svg.intervalID);
+			}
+		}
+		
+		return svg;
+	}
+})();
\ No newline at end of file
diff --git a/public/svg-edit/editor/canvg/rgbcolor.js b/public/svg-edit/editor/canvg/rgbcolor.js
new file mode 100644
index 00000000..04423f29
--- /dev/null
+++ b/public/svg-edit/editor/canvg/rgbcolor.js
@@ -0,0 +1,288 @@
+/**
+ * A class to parse color values
+ * @author Stoyan Stefanov <sstoo@gmail.com>
+ * @link   http://www.phpied.com/rgb-color-parser-in-javascript/
+ * @license Use it if you like it
+ */
+function RGBColor(color_string)
+{
+    this.ok = false;
+
+    // strip any leading #
+    if (color_string.charAt(0) == '#') { // remove # if any
+        color_string = color_string.substr(1,6);
+    }
+
+    color_string = color_string.replace(/ /g,'');
+    color_string = color_string.toLowerCase();
+
+    // before getting into regexps, try simple matches
+    // and overwrite the input
+    var simple_colors = {
+        aliceblue: 'f0f8ff',
+        antiquewhite: 'faebd7',
+        aqua: '00ffff',
+        aquamarine: '7fffd4',
+        azure: 'f0ffff',
+        beige: 'f5f5dc',
+        bisque: 'ffe4c4',
+        black: '000000',
+        blanchedalmond: 'ffebcd',
+        blue: '0000ff',
+        blueviolet: '8a2be2',
+        brown: 'a52a2a',
+        burlywood: 'deb887',
+        cadetblue: '5f9ea0',
+        chartreuse: '7fff00',
+        chocolate: 'd2691e',
+        coral: 'ff7f50',
+        cornflowerblue: '6495ed',
+        cornsilk: 'fff8dc',
+        crimson: 'dc143c',
+        cyan: '00ffff',
+        darkblue: '00008b',
+        darkcyan: '008b8b',
+        darkgoldenrod: 'b8860b',
+        darkgray: 'a9a9a9',
+        darkgreen: '006400',
+        darkkhaki: 'bdb76b',
+        darkmagenta: '8b008b',
+        darkolivegreen: '556b2f',
+        darkorange: 'ff8c00',
+        darkorchid: '9932cc',
+        darkred: '8b0000',
+        darksalmon: 'e9967a',
+        darkseagreen: '8fbc8f',
+        darkslateblue: '483d8b',
+        darkslategray: '2f4f4f',
+        darkturquoise: '00ced1',
+        darkviolet: '9400d3',
+        deeppink: 'ff1493',
+        deepskyblue: '00bfff',
+        dimgray: '696969',
+        dodgerblue: '1e90ff',
+        feldspar: 'd19275',
+        firebrick: 'b22222',
+        floralwhite: 'fffaf0',
+        forestgreen: '228b22',
+        fuchsia: 'ff00ff',
+        gainsboro: 'dcdcdc',
+        ghostwhite: 'f8f8ff',
+        gold: 'ffd700',
+        goldenrod: 'daa520',
+        gray: '808080',
+        green: '008000',
+        greenyellow: 'adff2f',
+        honeydew: 'f0fff0',
+        hotpink: 'ff69b4',
+        indianred : 'cd5c5c',
+        indigo : '4b0082',
+        ivory: 'fffff0',
+        khaki: 'f0e68c',
+        lavender: 'e6e6fa',
+        lavenderblush: 'fff0f5',
+        lawngreen: '7cfc00',
+        lemonchiffon: 'fffacd',
+        lightblue: 'add8e6',
+        lightcoral: 'f08080',
+        lightcyan: 'e0ffff',
+        lightgoldenrodyellow: 'fafad2',
+        lightgrey: 'd3d3d3',
+        lightgreen: '90ee90',
+        lightpink: 'ffb6c1',
+        lightsalmon: 'ffa07a',
+        lightseagreen: '20b2aa',
+        lightskyblue: '87cefa',
+        lightslateblue: '8470ff',
+        lightslategray: '778899',
+        lightsteelblue: 'b0c4de',
+        lightyellow: 'ffffe0',
+        lime: '00ff00',
+        limegreen: '32cd32',
+        linen: 'faf0e6',
+        magenta: 'ff00ff',
+        maroon: '800000',
+        mediumaquamarine: '66cdaa',
+        mediumblue: '0000cd',
+        mediumorchid: 'ba55d3',
+        mediumpurple: '9370d8',
+        mediumseagreen: '3cb371',
+        mediumslateblue: '7b68ee',
+        mediumspringgreen: '00fa9a',
+        mediumturquoise: '48d1cc',
+        mediumvioletred: 'c71585',
+        midnightblue: '191970',
+        mintcream: 'f5fffa',
+        mistyrose: 'ffe4e1',
+        moccasin: 'ffe4b5',
+        navajowhite: 'ffdead',
+        navy: '000080',
+        oldlace: 'fdf5e6',
+        olive: '808000',
+        olivedrab: '6b8e23',
+        orange: 'ffa500',
+        orangered: 'ff4500',
+        orchid: 'da70d6',
+        palegoldenrod: 'eee8aa',
+        palegreen: '98fb98',
+        paleturquoise: 'afeeee',
+        palevioletred: 'd87093',
+        papayawhip: 'ffefd5',
+        peachpuff: 'ffdab9',
+        peru: 'cd853f',
+        pink: 'ffc0cb',
+        plum: 'dda0dd',
+        powderblue: 'b0e0e6',
+        purple: '800080',
+        red: 'ff0000',
+        rosybrown: 'bc8f8f',
+        royalblue: '4169e1',
+        saddlebrown: '8b4513',
+        salmon: 'fa8072',
+        sandybrown: 'f4a460',
+        seagreen: '2e8b57',
+        seashell: 'fff5ee',
+        sienna: 'a0522d',
+        silver: 'c0c0c0',
+        skyblue: '87ceeb',
+        slateblue: '6a5acd',
+        slategray: '708090',
+        snow: 'fffafa',
+        springgreen: '00ff7f',
+        steelblue: '4682b4',
+        tan: 'd2b48c',
+        teal: '008080',
+        thistle: 'd8bfd8',
+        tomato: 'ff6347',
+        turquoise: '40e0d0',
+        violet: 'ee82ee',
+        violetred: 'd02090',
+        wheat: 'f5deb3',
+        white: 'ffffff',
+        whitesmoke: 'f5f5f5',
+        yellow: 'ffff00',
+        yellowgreen: '9acd32'
+    };
+    for (var key in simple_colors) {
+        if (color_string == key) {
+            color_string = simple_colors[key];
+        }
+    }
+    // emd of simple type-in colors
+
+    // array of color definition objects
+    var color_defs = [
+        {
+            re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
+            example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'],
+            process: function (bits){
+                return [
+                    parseInt(bits[1]),
+                    parseInt(bits[2]),
+                    parseInt(bits[3])
+                ];
+            }
+        },
+        {
+            re: /^(\w{2})(\w{2})(\w{2})$/,
+            example: ['#00ff00', '336699'],
+            process: function (bits){
+                return [
+                    parseInt(bits[1], 16),
+                    parseInt(bits[2], 16),
+                    parseInt(bits[3], 16)
+                ];
+            }
+        },
+        {
+            re: /^(\w{1})(\w{1})(\w{1})$/,
+            example: ['#fb0', 'f0f'],
+            process: function (bits){
+                return [
+                    parseInt(bits[1] + bits[1], 16),
+                    parseInt(bits[2] + bits[2], 16),
+                    parseInt(bits[3] + bits[3], 16)
+                ];
+            }
+        }
+    ];
+
+    // search through the definitions to find a match
+    for (var i = 0; i < color_defs.length; i++) {
+        var re = color_defs[i].re;
+        var processor = color_defs[i].process;
+        var bits = re.exec(color_string);
+        if (bits) {
+            channels = processor(bits);
+            this.r = channels[0];
+            this.g = channels[1];
+            this.b = channels[2];
+            this.ok = true;
+        }
+
+    }
+
+    // validate/cleanup values
+    this.r = (this.r < 0 || isNaN(this.r)) ? 0 : ((this.r > 255) ? 255 : this.r);
+    this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g);
+    this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b);
+
+    // some getters
+    this.toRGB = function () {
+        return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
+    }
+    this.toHex = function () {
+        var r = this.r.toString(16);
+        var g = this.g.toString(16);
+        var b = this.b.toString(16);
+        if (r.length == 1) r = '0' + r;
+        if (g.length == 1) g = '0' + g;
+        if (b.length == 1) b = '0' + b;
+        return '#' + r + g + b;
+    }
+
+    // help
+    this.getHelpXML = function () {
+
+        var examples = new Array();
+        // add regexps
+        for (var i = 0; i < color_defs.length; i++) {
+            var example = color_defs[i].example;
+            for (var j = 0; j < example.length; j++) {
+                examples[examples.length] = example[j];
+            }
+        }
+        // add type-in colors
+        for (var sc in simple_colors) {
+            examples[examples.length] = sc;
+        }
+
+        var xml = document.createElement('ul');
+        xml.setAttribute('id', 'rgbcolor-examples');
+        for (var i = 0; i < examples.length; i++) {
+            try {
+                var list_item = document.createElement('li');
+                var list_color = new RGBColor(examples[i]);
+                var example_div = document.createElement('div');
+                example_div.style.cssText =
+                        'margin: 3px; '
+                        + 'border: 1px solid black; '
+                        + 'background:' + list_color.toHex() + '; '
+                        + 'color:' + list_color.toHex()
+                ;
+                example_div.appendChild(document.createTextNode('test'));
+                var list_item_value = document.createTextNode(
+                    ' ' + examples[i] + ' -> ' + list_color.toRGB() + ' -> ' + list_color.toHex()
+                );
+                list_item.appendChild(example_div);
+                list_item.appendChild(list_item_value);
+                xml.appendChild(list_item);
+
+            } catch(e){}
+        }
+        return xml;
+
+    }
+
+}
+
diff --git a/public/svg-edit/editor/images/svg_edit_icons.svg b/public/svg-edit/editor/images/svg_edit_icons.svg
index 5f37fefe..3d45e1ff 100644
--- a/public/svg-edit/editor/images/svg_edit_icons.svg
+++ b/public/svg-edit/editor/images/svg_edit_icons.svg
@@ -345,6 +345,25 @@
 	</svg>
 </g>
 
+<g id="export">
+	<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+	 <defs>
+	  <linearGradient id="svg_5" x1="0.77734" y1="0.51172" x2="0.09375" y2="0.53516">
+	   <stop offset="0" stop-color="#81bbf4"/>
+	   <stop offset="1" stop-color="#376eb7"/>
+	  </linearGradient>
+	 </defs>
+	 <g>
+	  <rect x="7.22599" y="1.3603" width="15.76465" height="21.51735" id="svg_55" fill="#eaeaea" stroke="#606060"/>
+	  <circle fill="#31abed" stroke-width="0.5" cx="17.4206" cy="11.1278" r="4.69727" id="svg_3"/>
+	  <path fill="#ffcc00" stroke-width="0.5" d="m9.67673,20.24302l7.38701,-6.80778l2.91746,6.71323" id="svg_4"/>
+	  <rect fill="#ff5555" stroke-width="0.5" x="9.5385" y="2.94914" width="5.74652" height="5.74652" id="svg_2"/>
+	  <path d="m6.13727,17.94236l5.77328,-4.91041l-5.86949,-5.1832l-0.09622,2.36426l-4.64805,-0.06751l-0.04665,5.54694l4.79093,-0.02342l0.09623,2.27334z" id="svg_45" fill="url(#svg_5)" stroke="#285582"/>
+	  <title>Layer 1</title>
+	 </g>
+	</svg>
+</g>
+
 <g id="open">
 <svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
@@ -618,6 +637,34 @@
 </svg>
 </g>
 
+<g id="width">
+	<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+	  <path id="svg_6" d="m19,42.5l-7.5,7.5l7.5,7.5l0,-15zm0,7.5l62,0l0,-7.5l7.5,7.5l-7.5,7.5l0,-7.5" stroke-width="8" stroke="#000000" fill="#000000"/>
+	</svg>
+</g>
+
+<g id="height">
+	<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+	  <path transform="rotate(90, 50, 50)" fill="#000000" stroke="#000000" stroke-width="8" d="m19,42.5l-7.5,7.5l7.5,7.5l0,-15zm0,7.5l62,0l0,-7.5l7.5,7.5l-7.5,7.5l0,-7.5" id="svg_6"/>
+	</svg>
+</g>
+
+<g id="c_radius">
+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
+  <rect stroke="#404040" fill="none" stroke-width="0.5" x="2.37501" y="2.4375" width="43.9375" height="43.9375" id="svg_1" rx="13" ry="13"/>
+  <path fill="none" stroke="#000000" d="m2.43674,15.88952l13.73722,0l0.08978,-13.46483m0.08978,14.08493" id="svg_3"/>
+  <line fill="none" stroke="#000000" x1="16.35107" y1="15.88934" x2="5.20504" y2="5.20504" id="svg_4" stroke-dasharray="2,2"/>
+</svg>
+</g>
+
+<g id="align">
+	<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg">
+	  <rect stroke="#606060" fill="#c0c0c0" id="svg_4" height="7" width="12" y="7.5" x="4.5"/>
+	  <rect stroke="#c15909" fill="#ef9a23" id="svg_2" height="40" width="2" y="-10" x="9.5"/>
+	  <rect stroke="#ffffff" fill="none" id="svg_5" height="5" width="10" y="8.5" x="5.5"/>
+	</svg>
+</g>
+
 <g id="align_left">
 	<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
 	  <rect stroke="#606060" fill="#ffffff" id="svg_4" height="7" width="12" y="2.5" x="2.5"/>
diff --git a/public/svg-edit/editor/svg-editor.css b/public/svg-edit/editor/svg-editor.css
index 9cddaf5b..8aea6d62 100644
--- a/public/svg-edit/editor/svg-editor.css
+++ b/public/svg-edit/editor/svg-editor.css
@@ -601,6 +601,16 @@ span.zoom_tool {
 
 }
 
+#svg_editor .icon_label {
+	float: left;
+	padding-top: 3px;
+	padding-right: 3px;
+}
+
+#svg_editor .width_label {
+	padding-right: 5px;
+}
+
 #tool_bold, #tool_italic { 
 	font: bold 2.1em/1.1em serif;
 	text-align: center;
@@ -608,6 +618,11 @@ span.zoom_tool {
 	position: relative;
 }
 
+#text {
+	position: absolute;
+	left: -9999px;
+}
+
 #tool_bold span, #tool_italic span { 
 	position: absolute;
 	width: 100%;
@@ -736,7 +751,8 @@ span.zoom_tool {
 }
 
 #svg_editor .stroke_tool.down div div,
-#svg_editor .stroke_tool.down button {
+#svg_editor .stroke_tool.down button,
+#tools_top .dropdown.down > * {
 	border: 1px inset gray;
 	background: #F4E284;
 }
@@ -749,6 +765,12 @@ span.zoom_tool {
 	float: left;
 }
 
+
+#tools_top .dropdown div {
+	border: 1px solid transparent;
+	margin-top: 3px;
+}
+
 #option_lists ul {
 	display: none;
 	position: absolute;
@@ -759,6 +781,15 @@ span.zoom_tool {
 	padding-left: 0;
 }
 
+#option_lists #position_opts {
+	width: 90px;
+	margin-left: -32px;
+}
+
+#option_lists #position_opts li {
+	float: left;
+}
+
 #svg_editor ul li.current {
 	background-color: #F4E284;
 }
diff --git a/public/svg-edit/editor/svg-editor.html b/public/svg-edit/editor/svg-editor.html
index e3ee5bc2..34043694 100644
--- a/public/svg-edit/editor/svg-editor.html
+++ b/public/svg-edit/editor/svg-editor.html
@@ -112,6 +112,11 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 				Save Image [S]
 			</li>
 			
+			<li id="tool_export">
+				<div></div>
+				Export as PNG
+			</li>
+			
 			<li id="tool_docprops">
 				<div></div>
 				Document Properties [I]
@@ -181,6 +186,11 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			</div>
 		</div>
 		
+		<div class="dropdown toolset" id="tool_position" title="Align Element to Page">
+				<div id="cur_position" class="icon_label"></div>
+				<button></button>
+		</div>		
+
 		<div id="xy_panel" class="toolset">
 			<label>
 				x: <input id="selected_x" class="attr_changer" title="Change X coordinate" size="3" data-attr="x"/>
@@ -225,25 +235,26 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 	<div id="rect_panel">
 		<div class="toolset">
 			<label>
-				<span id="rwidthLabel">width:</span>
+				<span id="rwidthLabel" class="icon_label"></span>
 				<input id="rect_width" class="attr_changer" title="Change rectangle width" size="3" data-attr="width"/>
 			</label>
 			<label>
-				<span id="rheightLabel">height:</span>
+				<span id="rheightLabel" class="icon_label"></span>
 				<input id="rect_height" class="attr_changer" title="Change rectangle height" size="3" data-attr="height"/>
 			</label>
 		</div>
-		<label id="cornerRadiusLabel">Corner Radius:
-			<input id="rect_rx" size="3" value="0" type="text" title="Change Rectangle Corner Radius" data-attr="Corner Radius"/>
+		<label id="cornerRadiusLabel" title="Change Rectangle Corner Radius">
+			<span class="icon_label"></span>
+			<input id="rect_rx" size="3" value="0" type="text" data-attr="Corner Radius"/>
 		</label>
 	</div>
 
 	<div id="image_panel">
 	<div class="toolset">
-		<label><span id="iwidthLabel">width:</span>
+		<label><span id="iwidthLabel" class="icon_label"></span>
 		<input id="image_width" class="attr_changer" title="Change image width" size="3" data-attr="width"/>
 		</label>
-		<label><span id="iheightLabel">height:</span>
+		<label><span id="iheightLabel" class="icon_label"></span>
 		<input id="image_height" class="attr_changer" title="Change image height" size="3" data-attr="height"/>
 		</label>
 	</div>
@@ -339,10 +350,9 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			<span id="font_sizeLabel">size:</span>
 			<input id="font_size" title="Change Font Size" size="3" value="0" type="text"/>
 		</label>
-		<label>
-			<!-- Text content -->
-			<input id="text" type="text" title="Change text contents" size="35"/>
-		</label>
+		
+		<!-- Not visible, but still used -->
+		<input id="text" type="text" size="35"/>
 	</div>
 	
 	<div id="path_node_panel">
@@ -516,6 +526,15 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 		<li class="tool_button" id="linecap_square" title="Linecap: Square"></li>
 		<li class="tool_button" id="linecap_round" title="Linecap: Round"></li>
 	</ul>
+	
+	<ul id="position_opts">
+		<li class="push_button" id="tool_posleft" title="Align Left"></li>
+		<li class="push_button" id="tool_poscenter" title="Align Center"></li>
+		<li class="push_button" id="tool_posright" title="Align Right"></li>
+		<li class="push_button" id="tool_postop" title="Align Top"></li>
+		<li class="push_button" id="tool_posmiddle" title="Align Middle"></li>
+		<li class="push_button" id="tool_posbottom" title="Align Bottom"></li>
+	</ul>
 </div>
 
 
@@ -556,9 +575,9 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			<fieldset id="change_resolution">
 				<legend id="svginfo_dim">Canvas Dimensions</legend>
 
-				<label><span id="svginfo_width">Width:</span> <input type="text" id="canvas_width" size="6"/></label>
+				<label><span id="svginfo_width">width:</span> <input type="text" id="canvas_width" size="6"/></label>
 					
-				<label><span id="svginfo_height">Height:</span> <input type="text" id="canvas_height" size="6"/></label>
+				<label><span id="svginfo_height">height:</span> <input type="text" id="canvas_height" size="6"/></label>
 				
 				<label>
 					<select id="resolution">
diff --git a/public/svg-edit/editor/svg-editor.js b/public/svg-edit/editor/svg-editor.js
index 49c0c325..ac1646fd 100644
--- a/public/svg-edit/editor/svg-editor.js
+++ b/public/svg-edit/editor/svg-editor.js
@@ -177,7 +177,8 @@
 					svgEditor.setConfig(urldata);
 					
 					var src = urldata.source;
-
+					var qstr = $.param.querystring();
+					
 					if(src) {
 						if(src.indexOf("data:") === 0) {
 							// plusses get replaced by spaces, so re-insert
@@ -186,6 +187,9 @@
 						} else {
 							Editor.loadFromString(src);
 						}
+					} else if(qstr.indexOf('paramurl=') !== -1) {
+						// Get paramater URL (use full length of remaining location.href)
+						svgEditor.loadFromURL(qstr.substr(9));
 					} else if(urldata.url) {
 						svgEditor.loadFromURL(urldata.url);
 					}
@@ -268,6 +272,7 @@
 				
 					'#tool_clear div,#layer_new':'new_image',
 					'#tool_save div':'save',
+					'#tool_export div':'export',
 					'#tool_open div div':'open',
 					'#tool_import div div':'import',
 					'#tool_source':'source',
@@ -303,12 +308,13 @@
 					'#tool_group':'group',
 					'#tool_ungroup':'ungroup',
 					
-					'#tool_alignleft':'align_left',
-					'#tool_aligncenter':'align_center',
-					'#tool_alignright':'align_right',
-					'#tool_aligntop':'align_top',
-					'#tool_alignmiddle':'align_middle',
-					'#tool_alignbottom':'align_bottom',
+					'#tool_alignleft, #tool_posleft':'align_left',
+					'#tool_aligncenter, #tool_poscenter':'align_center',
+					'#tool_alignright, #tool_posright':'align_right',
+					'#tool_aligntop, #tool_postop':'align_top',
+					'#tool_alignmiddle, #tool_posmiddle':'align_middle',
+					'#tool_alignbottom, #tool_posbottom':'align_bottom',
+					'#cur_position':'align',
 					
 					'#linecap_butt,#cur_linecap':'linecap_butt',
 					'#linecap_round':'linecap_round',
@@ -327,6 +333,10 @@
 					'#tool_source_save,#tool_docprops_save':'ok',
 					'#tool_source_cancel,#tool_docprops_cancel':'cancel',
 					
+					'#rwidthLabel, #iwidthLabel':'width',
+					'#rheightLabel, #iheightLabel':'height',
+					'#cornerRadiusLabel span':'c_radius',
+					
 					'.flyout_arrow_horiz':'arrow_right',
 					'.dropdown button, #main_button .dropdown':'arrow_down',
 					'#palette .palette_item:first, #fill_bg, #stroke_bg':'no_color'
@@ -472,8 +482,7 @@
 				// can just provide their own custom save handler and might not want the XML prolog
 				svg = "<?xml version='1.0'?>\n" + svg;
 				
-				// Creates and opens an HTML page that provides a link to the SVG, a preview, and the markup. 
-				// Also includes warning about Mozilla bug #308590 when applicable
+				// Opens the SVG in new window, with warning about Mozilla bug #308590 when applicable
 				
 				var win = window.open("data:image/svg+xml;base64," + Utils.encode64(svg));
 				
@@ -502,6 +511,32 @@
 				}
 			};
 			
+			var exportHandler = function(window, data) {
+
+				var issues = data.issues;
+				
+				if(!$('#export_canvas').length) {
+					$('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
+				}
+				var c = $('#export_canvas')[0];
+				
+				c.width = svgCanvas.contentW;
+				c.height = svgCanvas.contentH;
+				canvg(c, data.svg);
+				var datauri = c.toDataURL('image/png');
+				var win = window.open(datauri);
+				
+				var note = 'Select "Save As..." in your browser to save this image as a PNG file.';
+				
+				// Check if there's issues
+
+				if(issues.length) {
+					var pre = "\n \u2022 ";
+					note += ("\n\nAlso note these issues:" + pre + issues.join(pre));
+				} 
+				win.alert(note);
+			};
+			
 			// called when we've selected a different element
 			var selectedChanged = function(window,elems) {
 				var mode = svgCanvas.getMode();
@@ -1219,8 +1254,10 @@
 			svgCanvas.bind("selected", selectedChanged);
 			svgCanvas.bind("changed", elementChanged);
 			svgCanvas.bind("saved", saveHandler);
+			svgCanvas.bind("exported", exportHandler);
 			svgCanvas.bind("zoomed", zoomChanged);
 			svgCanvas.bind("extension_added", extAdded);
+			svgCanvas.textActions.setInputElem($("#text")[0]);
 		
 			var str = '<div class="palette_item" data-rgb="none"></div>'
 			$.each(palette, function(i,item){
@@ -1615,17 +1652,19 @@
 			}
 			
 			// TODO: Combine this with addDropDown or find other way to optimize
-			var addAltDropDown = function(elem, list, callback, dropUp) {
+			var addAltDropDown = function(elem, list, callback, opts) {
 				var button = $(elem);
 				var list = $(list);
 				var on_button = false;
+				var dropUp = opts.dropUp;
 				if(dropUp) {
 					$(elem).addClass('dropup');
 				}
-			
 				list.find('li').bind('mouseup', function() {
 					callback.apply(this, arguments);
-					$(this).addClass('current').siblings().removeClass('current');
+					if(!opts.multiclick) {
+						$(this).addClass('current').siblings().removeClass('current');
+					}
 				});
 				
 				$(window).mouseup(function(evt) {
@@ -1641,8 +1680,12 @@
 				
 				$(elem).bind('mousedown',function() {
 					var off = $(elem).offset();
-					off.top -= list.height();
-					off.left += 8;
+					if(dropUp) {
+						off.top -= list.height();
+						off.left += 8;
+					} else {
+						off.top += $(elem).height();
+					}
 					$(list).offset(off);
 					
 					if (!button.hasClass('down')) {
@@ -1661,6 +1704,12 @@
 				}).mouseout(function() {
 					on_button = false;
 				});
+				
+				if(opts.multiclick) {
+					list.mousedown(function() {
+						on_button = true;
+					});
+				}
 			}
 			
 			addDropDown('#font_family_dropdown', function() {
@@ -1722,7 +1771,7 @@
 				var icon = $.getSvgIcon(this.id).clone();
 				$('#cur_linecap').empty().append(icon);
 				$.resizeSvgIcons({'#cur_linecap .svg_icon': 20});
-			}, true);
+			}, {dropUp: true});
 			
 			addAltDropDown('#stroke_linejoin', '#linejoin_opts', function() {
 				var val = this.id.split('_')[1];
@@ -1731,7 +1780,12 @@
 				var icon = $.getSvgIcon(this.id).clone();
 				$('#cur_linejoin').empty().append(icon);
 				$.resizeSvgIcons({'#cur_linejoin .svg_icon': 20});
-			}, true);
+			}, {dropUp: true});
+			
+			addAltDropDown('#tool_position', '#position_opts', function() {
+				var letter = this.id.replace('tool_pos','').charAt(0);
+				svgCanvas.alignSelectedElements(letter, 'page');
+			}, {multiclick: true});
 			
 			/*
 			
@@ -1958,6 +2012,35 @@
 				svgCanvas.save(saveOpts);
 			};
 			
+			var clickExport = function() {
+				if(window.canvg) {
+					svgCanvas.rasterExport();
+					return;
+				} else {
+					$.getScript('canvg/rgbcolor.js', function() {
+						$.getScript('canvg/canvg.js');
+						// Would normally run svgCanvas.rasterExport() here,
+						// but that causes popup dialog box
+					});
+				}
+				var count = 0;
+				
+				// Run export when window.canvg is created
+				var timer = setInterval(function() {
+					count++;
+					if(window.canvg) {
+						clearInterval(timer);
+						svgCanvas.rasterExport();
+						return;
+					}
+					
+					if(count > 100) { // 5 seconds
+						clearInterval(timer);
+						$.alert("Error: Failed to load CanVG script");
+					}
+				}, 50);
+			}
+			
 			// by default, svgCanvas.open() is a no-op.
 			// it is up to an extension mechanism (opera widget, etc) 
 			// to call setCustomHandlers() which will make it do something
@@ -2067,7 +2150,7 @@
 				var res = svgCanvas.getResolution();
 				$('#canvas_width').val(res.w);
 				$('#canvas_height').val(res.h);
-				$('#canvas_title').val(svgCanvas.getImageTitle());
+				$('#canvas_title').val(svgCanvas.getDocumentTitle());
 				
 				// Update background color with current one
 				var blocks = $('#bg_blocks div');
@@ -2103,7 +2186,7 @@
 					hideSourceEditor();
 					zoomImage();
 					populateLayers();
-					setTitle(svgCanvas.getImageTitle());
+					setTitle(svgCanvas.getDocumentTitle());
 				}
 		
 				if (!svgCanvas.setSvgString($('#svg_source_textarea').val())) {
@@ -2127,7 +2210,7 @@
 				// set title
 				var new_title = $('#canvas_title').val();
 				setTitle(new_title);
-				svgCanvas.setImageTitle(new_title);
+				svgCanvas.setDocumentTitle(new_title);
 			
 				// update resolution
 				var width = $('#canvas_width'), w = width.val();
@@ -2192,7 +2275,7 @@
 				var size_num = icon_sizes[size];
 				
 				// Change icon size
-				$('.tool_button, .push_button, .tool_button_current, .disabled, #url_notice, #tool_open')
+				$('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open')
 				.find('> svg, > img').each(function() {
 					this.setAttribute('width',size_num);
 					this.setAttribute('height',size_num);
@@ -2213,6 +2296,7 @@
 					.tool_button_current,\
 					.push_button_pressed,\
 					.disabled,\
+					.icon_label,\
 					.tools_flyout .tool_button": {
 						'width': {s: '16px', l: '32px', xl: '48px'},
 						'height': {s: '16px', l: '32px', xl: '48px'},
@@ -2313,6 +2397,9 @@
 					},
 					"input.spin-button.down": {
 						'background-position': {l: '100% -85px', xl: '100% -82px'}
+					},
+					"#position_opts": {
+						'width': {all: (size_num*4) +'px'}
 					}
 				};
 				
@@ -2329,8 +2416,8 @@
 						selector = '#svg_editor ' + selector.replace(/,/g,', #svg_editor');
 						style_str += selector + '{';
 						$.each(rules, function(prop, values) {
-							if(values[size]) {
-								style_str += (prop + ':' + values[size] + ';');
+							if(values[size] || values.all) {
+								style_str += (prop + ':' + (values[size] || values.all) + ';');
 							}
 						});
 						style_str += '}';
@@ -2994,6 +3081,7 @@
 					{sel:'#tool_zoom', fn: clickZoom, evt: 'mouseup', key: 9},
 					{sel:'#tool_clear', fn: clickClear, evt: 'mouseup', key: [modKey+'N', true]},
 					{sel:'#tool_save', fn: function() { editingsource?saveSourceEditor():clickSave()}, evt: 'mouseup', key: [modKey+'S', true]},
+					{sel:'#tool_export', fn: clickExport, evt: 'mouseup'},
 					{sel:'#tool_open', fn: clickOpen, evt: 'mouseup', key: [modKey+'O', true]},
 					{sel:'#tool_import', fn: clickImport, evt: 'mouseup'},
 					{sel:'#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true]},
@@ -3316,7 +3404,7 @@
 				updateCanvas(true);
 // 			});
 			
-		//	var revnums = "svg-editor.js ($Rev: 1514 $) ";
+		//	var revnums = "svg-editor.js ($Rev: 1526 $) ";
 		//	revnums += svgCanvas.getVersion();
 		//	$('#copyright')[0].setAttribute("title", revnums);
 		
diff --git a/public/svg-edit/editor/svgcanvas.js b/public/svg-edit/editor/svgcanvas.js
index b43d33f5..6d7b1257 100644
--- a/public/svg-edit/editor/svgcanvas.js
+++ b/public/svg-edit/editor/svgcanvas.js
@@ -1603,7 +1603,6 @@ function BatchCommand(text) {
 			if(elem.id == 'svgcontent') {
 				// Process root element separately
 				var res = canvas.getResolution();
-//				console.log('res',res);
 				out.push(' width="' + res.w + '" height="' + res.h + '" xmlns="'+svgns+'"');
 				
 				var nsuris = {};
@@ -3183,7 +3182,7 @@ function BatchCommand(text) {
 							"xml:space": "preserve"
 						}
 					});
-					newText.textContent = "text";
+// 					newText.textContent = "text";
 					break;
 				case "path":
 					// Fall through
@@ -3193,6 +3192,12 @@ function BatchCommand(text) {
 					pathActions.mouseDown(evt, mouse_target, start_x, start_y);
 					started = true;
 					break;
+				case "textedit":
+					start_x *= current_zoom;
+					start_y *= current_zoom;
+					textActions.mouseDown(evt, mouse_target, start_x, start_y);
+					started = true;
+					break;
 				case "rotate":
 					started = true;
 					// we are starting an undoable change (a drag-rotation)
@@ -3495,6 +3500,21 @@ function BatchCommand(text) {
 					
 					pathActions.mouseMove(mouse_x, mouse_y);
 					
+					break;
+				case "textedit":
+					x *= current_zoom;
+					y *= current_zoom;
+// 					if(rubberBox && rubberBox.getAttribute('display') != 'none') {
+// 						assignAttributes(rubberBox, {
+// 							'x': Math.min(start_x,x),
+// 							'y': Math.min(start_y,y),
+// 							'width': Math.abs(x-start_x),
+// 							'height': Math.abs(y-start_y)
+// 						},100);
+// 					}
+					
+					textActions.mouseMove(mouse_x, mouse_y);
+					
 					break;
 				case "rotate":
 					var box = canvas.getBBox(selected),
@@ -3588,6 +3608,9 @@ function BatchCommand(text) {
 							if (selectedElements[0].nodeName == "path" && selectedElements[1] == null) {
 								pathActions.select(t);
 							} // if it was a path
+							else if (selectedElements[0].nodeName == "text" && selectedElements[1] == null) {
+								textActions.select(t, x, y);
+							} // if it was a path
 							// else, if it was selected and this is a shift-click, remove it from selection
 							else if (evt.shiftKey) {
 								if(tempJustSelected != t) {
@@ -3685,7 +3708,8 @@ function BatchCommand(text) {
 					break;
 				case "text":
 					keep = true;
-					canvas.clearSelection();
+					canvas.addToSelection([element]);
+					textActions.start(element);
 					break;
 				case "path":
 					// set element to null here so that it is not removed nor finalized
@@ -3702,6 +3726,11 @@ function BatchCommand(text) {
 					element = null;
 					pathActions.mouseUp(evt);
 					break;
+				case "textedit":
+					keep = false;
+					element = null;
+					textActions.mouseUp(evt, mouse_x, mouse_y);
+					break;
 				case "rotate":
 					keep = true;
 					element = null;
@@ -3836,6 +3865,356 @@ function BatchCommand(text) {
 		
 	}());
 
+	var textActions = canvas.textActions = function() {
+		var curtext;
+		var textinput;
+		var cursor;
+		var selblock;
+		var blinker;
+		var chardata = [];
+		var textbb, transbb;
+		var xform, imatrix;
+		var last_x, last_y;
+		var allow_dbl;
+		
+		function setCursor(index) {
+			var empty = (textinput.value === "");
+		
+			if(!arguments.length) {
+				if(empty) {
+					index = 0;
+				} else {
+					if(textinput.selectionEnd !== textinput.selectionStart) return;
+					index = textinput.selectionEnd;
+				}
+			}
+			
+			var charbb;
+			charbb = chardata[index];
+			if(!empty) {
+				textinput.setSelectionRange(index, index);
+			}
+			cursor = getElem("text_cursor");
+			if (!cursor) {
+				cursor = document.createElementNS(svgns, "line");
+				assignAttributes(cursor, {
+					'id': "text_cursor",
+					'stroke': "#333",
+					'stroke-width': 1
+				});
+				cursor = getElem("selectorParentGroup").appendChild(cursor);
+			}
+			
+			if(!blinker) {
+				blinker = setInterval(function() {
+					var show = (cursor.getAttribute('display') === 'none');
+					cursor.setAttribute('display', show?'inline':'none');
+				}, 600);
+
+			}
+				
+			assignAttributes(cursor, {
+				x1: charbb.x * current_zoom,
+				y1: textbb.y * current_zoom,
+				x2: charbb.x * current_zoom,
+				y2: (textbb.y + textbb.height) * current_zoom,
+				visibility: 'visible',
+				display: 'inline',
+				transform: (xform || '')
+			});
+			
+			if(selblock) selblock.setAttribute('width', 0);
+		}
+		
+		function setSelection(start, end, skipInput) {
+			if(start === end) {
+				setCursor(end);
+				return;
+			}
+		
+			if(!skipInput) {
+				textinput.setSelectionRange(start, end);
+			}
+			
+			selblock = getElem("text_selectblock");
+			if (!selblock) {
+				selblock = document.createElementNS(svgns, "rect");
+				assignAttributes(selblock, {
+					'id': "text_selectblock",
+					'fill': "green",
+					'opacity': .5,
+					'style': "pointer-events:none"
+				});
+				selblock = getElem("selectorParentGroup").appendChild(selblock);
+			}
+			
+			var startbb = chardata[start];
+			
+			var endbb = chardata[end];
+			
+			cursor.setAttribute('visibility', 'hidden');
+			assignAttributes(selblock, {
+				'x': startbb.x * current_zoom,
+				'y': textbb.y * current_zoom,
+				'width': (endbb.x - startbb.x) * current_zoom,
+				'height': textbb.height * current_zoom,
+				'display': 'inline',
+				'transform': (xform || '')
+			});
+		}
+		
+		function getIndexFromPoint(mouse_x, mouse_y) {
+			// Position cursor here
+			var pt = svgroot.createSVGPoint();
+			pt.x = mouse_x;
+			pt.y = mouse_y;
+
+			// No content, so return 0
+			if(chardata.length == 1) return 0;
+			
+			// Determine if cursor should be on left or right of character
+			var charpos = curtext.getCharNumAtPosition(pt);
+			if(charpos < 0) {
+				// Out of text range, look at mouse coords
+				charpos = chardata.length - 2;
+				if(mouse_x <= chardata[0].x) {
+					charpos = 0;
+				}
+			} else if(charpos >= chardata.length - 2) {
+				charpos = chardata.length - 2;
+			}
+			var charbb = chardata[charpos];
+			var mid = charbb.x + (charbb.width/2);
+			if(mouse_x > mid) {
+				charpos++;
+			}
+			return charpos;
+		}
+		
+		function setCursorFromPoint(mouse_x, mouse_y) {
+			setCursor(getIndexFromPoint(mouse_x, mouse_y));
+		}
+		
+		function setEndSelectionFromPoint(x, y, apply) {
+			var i1 = textinput.selectionStart;
+			var i2 = getIndexFromPoint(x, y);
+			
+			var start = Math.min(i1, i2);
+			var end = Math.max(i1, i2);
+			setSelection(start, end, !apply);
+		}
+			
+		function screenToPt(x_in, y_in) {
+			var out = {
+				x: x_in,
+				y: y_in
+			}
+			
+			if(xform) {
+				var pt = transformPoint(out.x, out.y, imatrix);
+				out.x = pt.x;
+				out.y = pt.y;
+			}
+			
+			out.x /= current_zoom;
+			out.y /= current_zoom;			
+			
+			return out;
+		}
+		
+		function hideCursor() {
+			if(cursor) {
+				cursor.setAttribute('visibility', 'hidden');
+			}
+		}
+		
+		function selectAll(evt) {
+			setSelection(0, curtext.textContent.length);
+			$(this).unbind(evt);
+		}
+
+		function selectWord(evt) {
+			if(!allow_dbl) return;
+		
+			var ept = transformPoint( evt.pageX, evt.pageY, root_sctm ),
+				mouse_x = ept.x * current_zoom,
+				mouse_y = ept.y * current_zoom;
+			var pt = screenToPt(mouse_x, mouse_y);
+			
+			var index = getIndexFromPoint(pt.x, pt.y);
+			var str = curtext.textContent;
+			var first = str.substr(0, index).replace(/[a-z0-9]+$/i, '').length;
+			var m = str.substr(index).match(/^[a-z0-9]+/i);
+			var last = (m?m[0].length:0) + index;
+			setSelection(first, last);
+			
+			// Set tripleclick
+			$(evt.target).click(selectAll);
+			setTimeout(function() {
+				$(evt.target).unbind('click', selectAll);
+			}, 300);
+			
+		}
+
+		return {
+			select: function(target, x, y) {
+				if (curtext == target) {
+					textActions.toEditMode(x, y);
+				} // going into pathedit mode
+				else {
+					curtext = target;
+				}	
+			},
+			start: function(elem) {
+				curtext = elem;
+				textActions.toEditMode();
+			},
+			mouseDown: function(evt, mouse_target, start_x, start_y) {
+				var pt = screenToPt(start_x, start_y);
+			
+				textinput.focus();
+				setCursorFromPoint(pt.x, pt.y);
+				last_x = start_x;
+				last_y = start_y;
+				
+				// TODO: Find way to block native selection
+			},
+			mouseMove: function(mouse_x, mouse_y) {
+				var pt = screenToPt(mouse_x, mouse_y);
+				setEndSelectionFromPoint(pt.x, pt.y);
+			},			
+			mouseUp: function(evt, mouse_x, mouse_y) {
+				var pt = screenToPt(mouse_x, mouse_y);
+				setEndSelectionFromPoint(pt.x, pt.y, true);
+				
+				// TODO: Find a way to make this work: Use transformed BBox instead of evt.target 
+// 				if(last_x === mouse_x && last_y === mouse_y
+// 					&& !Utils.rectsIntersect(transbb, {x: pt.x, y: pt.y, width:0, height:0})) {
+// 					textActions.toSelectMode(true);				
+// 				}
+				if(last_x === mouse_x && last_y === mouse_y && evt.target !== curtext) {
+					textActions.toSelectMode(true);
+				}
+
+			},
+			setCursor: setCursor,
+			toEditMode: function(x, y) {
+				allow_dbl = false;
+				current_mode = "textedit";
+				selectorManager.requestSelector(curtext).showGrips(false);
+
+				textActions.init();
+				$(curtext).css('cursor', 'text');
+				
+				if(!arguments.length) {
+					setCursor();
+				} else {
+					var pt = screenToPt(x, y);
+					setCursorFromPoint(pt.x, pt.y);
+				}
+				
+				setTimeout(function() {
+					allow_dbl = true;
+				}, 300);
+			},
+			toSelectMode: function(selectElem) {
+				current_mode = "select";
+				clearInterval(blinker);
+				blinker = null;
+				if(selblock) $(selblock).attr('display','none');
+				if(cursor) $(cursor).attr('visibility','hidden');
+				$(curtext).css('cursor', 'move');
+				
+				if(selectElem) {
+					canvas.clearSelection();
+					$(curtext).css('cursor', 'move');
+					
+					call("selected", [curtext]);
+					canvas.addToSelection([curtext], true);
+				}
+				if(!curtext.textContent.length) {
+					// No content, so delete
+					canvas.deleteSelectedElements();
+				}
+				
+				curtext = false;
+			},
+			setInputElem: function(elem) {
+				textinput = elem;
+				$(textinput).blur(hideCursor);
+			},
+			clear: function() {
+				if(current_mode == "textedit") {
+					textActions.toSelectMode();
+				}
+			},
+			init: function(inputElem) {
+				if(!curtext) return;
+			
+				if(!curtext.parentNode) {
+					// Result of the ffClone, need to get correct element
+					curtext = selectedElements[0];
+					selectorManager.requestSelector(curtext).showGrips(false);
+				}
+			
+				var str = curtext.textContent;
+				var len = str.length;
+				
+				xform = curtext.getAttribute('transform');
+
+				textbb = canvas.getBBox(curtext);
+				
+				if(xform) {
+					var tlist = canvas.getTransformList(curtext);
+					var matrix = transformListToTransform(tlist).matrix;
+					imatrix = matrix.inverse();
+// 					var tbox = transformBox(textbb.x, textbb.y, textbb.width, textbb.height, matrix);
+// 					transbb = {
+// 						width: tbox.tr.x - tbox.tl.x,
+// 						height: tbox.bl.y - tbox.tl.y,
+// 						x: tbox.tl.x,
+// 						y: tbox.tl.y
+// 					}
+				} else {
+// 					transbb = textbb;
+				}
+
+				chardata = Array(len);
+				textinput.focus();
+				
+				$(curtext).unbind('dblclick', selectWord).dblclick(selectWord);
+				
+				if(!len) {
+					var end = {x: textbb.x + (textbb.width/2), width: 0};
+				}
+				
+				for(var i=0; i<len; i++) {
+					var start = curtext.getStartPositionOfChar(i);
+					var end = curtext.getEndPositionOfChar(i);
+					
+					// Get a "bbox" equivalent for each character. Uses the
+					// bbox data of the actual text for y, height purposes
+					
+					// TODO: Decide if y, width and height are actually necessary
+					chardata[i] = {
+						x: start.x,
+						y: textbb.y, // start.y?
+						width: end.x - start.x,
+						height: textbb.height
+					};
+				}
+				
+				// Add a last bbox for cursor at end of text
+				chardata.push({
+					x: end.x,
+					width: 0
+				});
+				
+				setSelection(textinput.selectionStart, textinput.selectionEnd, true);
+			}
+		}
+	}();
+	
 	var pathActions = function() {
 		
 		var subpath = false;
@@ -5814,6 +6193,35 @@ function BatchCommand(text) {
 		call("saved", str);
 	};
 
+	this.rasterExport = function() {
+		// remove the selected outline before serializing
+		this.clearSelection();
+		
+		// Check for known CanVG issues 
+		var issues = [];
+		
+		// Selector and notice
+		var issue_list = {
+			'feGaussianBlur': 'Blurred elements will appear as un-blurred',
+			'text': 'Text may not appear as expected',
+			'image': 'Image elements will not appear',
+			'foreignObject': 'foreignObject elements will not appear',
+			'marker': 'Marker elements (arrows, etc) will not appear',
+			'[stroke-dasharray]': 'Strokes will appear filled',
+			'[stroke^=url]': 'Strokes with gradients will not appear'
+		};
+		var content = $(svgcontent);
+		
+		$.each(issue_list, function(sel, descr) {
+			if(content.find(sel).length) {
+				issues.push(descr);
+			}
+		});
+
+		var str = svgCanvasToString();
+		call("exported", {svg: str, issues: issues});
+	};
+	
 	// Walks the tree and executes the callback on each element in a top-down fashion
 	var walkTree = function(elem, cbFn){
 		if (elem && elem.nodeType == 1) {
@@ -6688,7 +7096,7 @@ function BatchCommand(text) {
 		};
 	};
 	
-	this.getImageTitle = function() {
+	this.getDocumentTitle = function() {
 		var childs = svgcontent.childNodes;
 		for (var i=0; i<childs.length; i++) {
 			if(childs[i].nodeName == 'title') {
@@ -6698,7 +7106,7 @@ function BatchCommand(text) {
 		return '';
 	}
 	
-	this.setImageTitle = function(newtitle) {
+	this.setDocumentTitle = function(newtitle) {
 		var childs = svgcontent.childNodes, doc_title = false, old_title = '';
 		
 		var batchCmd = new BatchCommand("Change Image Title");
@@ -6852,6 +7260,7 @@ function BatchCommand(text) {
 
 	this.setMode = function(name) {
 		pathActions.clear(true);
+		textActions.clear();
 		
 		cur_properties = (selectedElements[0] && selectedElements[0].nodeName == 'text') ? cur_text : cur_shape;
 		current_mode = name;
@@ -7431,8 +7840,10 @@ function BatchCommand(text) {
 
 	this.setTextContent = function(val) {
 		this.changeSelectedAttribute("#text", val);
+		textActions.init(val);
+		textActions.setCursor();
 	};
-
+	
 	this.setImageURL = function(val) {
 		var elem = selectedElements[0];
 		if(!elem) return;
@@ -8413,8 +8824,8 @@ function BatchCommand(text) {
 		if (relative_to == 'page') {
 			minx = 0;
 			miny = 0;
-			maxx = svgcontent.getAttribute('width');
-			maxy = svgcontent.getAttribute('height');
+			maxx = canvas.contentW;
+			maxy = canvas.contentH;
 		}
 
 		var dx = new Array(len);
@@ -8453,7 +8864,7 @@ function BatchCommand(text) {
 	// Function: getVersion
 	// Returns a string which describes the revision number of SvgCanvas.
 	this.getVersion = function() {
-		return "svgcanvas.js ($Rev: 1514 $)";
+		return "svgcanvas.js ($Rev: 1526 $)";
 	};
 	
 	this.setUiStrings = function(strs) {
diff --git a/public/svg-edit/test/test1.html b/public/svg-edit/test/test1.html
index 657f4a42..762c6557 100644
--- a/public/svg-edit/test/test1.html
+++ b/public/svg-edit/test/test1.html
@@ -23,7 +23,26 @@
 		return [m.a,m.b,m.c,m.d,m.e,m.f].join(',');
 	}
 
-  	var svgCanvas = new SvgCanvas(document.getElementById("svgcanvas")),
+  	var svgCanvas = new $.SvgCanvas(document.getElementById("svgcanvas"), {
+			canvas_expansion: 3,
+			dimensions: [640,480],
+			initFill: {
+				color: 'FF0000',  // solid red
+				opacity: 1
+			},
+			initStroke: {
+				width: 5,
+				color: '000000',  // solid black
+				opacity: 1
+			},
+			initOpacity: 1,
+			imgPath: 'images/',
+			langPath: 'locale/',
+			extPath: 'extensions/',
+			extensions: ['ext-arrows.js', 'ext-connector.js', 'ext-eyedropper.js'],
+			initTool: 'select',
+			wireframe: false
+		}),
   		svgroot = document.getElementById("svgroot"),
   		svgdoc = svgroot.documentElement,
   		svgns = "http://www.w3.org/2000/svg",