SVG-Edit foreignObject tool refactored as an extension

Thanks to Alexis Deveria. (Though I did fix one small bug.) My patch-file is now down to a mere 178 lines (a big chunk of which is Revision 569). Also, the font-size for foreignObjects defaults to 16pt, which will be more useful in Instiki.
2010-02-16 23:14:04 -06:00 · 2010-02-16 23:14:04 -06:00 · ce47d49e69
parent 63f1d34d74
commit ce47d49e69
8 changed files with 562 additions and 298 deletions
--- a/public/svg-edit/editor/extensions/closepath_icons.svg
+++ b/public/svg-edit/editor/extensions/closepath_icons.svg
@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+<g id="close">
+<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <marker viewBox="0 0 10 10" id="close_arrow_fw2" refY="5" markerUnits="strokeWidth" markerWidth="5" markerHeight="5" orient="auto" refX="8">
+   <path d="m0,0l10,5l-10,5l5,-5l-5,-5z" fill="#f00"/>
+  </marker>
+ </defs>
+ <g>
+  <title>Layer 1</title>
+  <path stroke="#000" stroke-width="15" fill="#ffc8c8" d="m121.5,40l-84,106l27,115l166,2l29,-111"/>
+  <line x1="240" y1="136" x2="169.5" y2="74" stroke="#f00" stroke-width="15" fill="none" marker-end="url(#close_arrow_fw2)"/>
+  <g stroke-width="15" stroke="#00f" fill="#00ffff">
+  <circle r="30" cy="41" cx="123"/>
+  <circle r="30" cy="146" cx="40"/>
+  <circle r="30" cy="260" cx="69"/>
+  <circle r="30" cy="260" cx="228"/>
+  <circle r="30" cy="148" cx="260"/>
+  </g>
+ </g>
+</svg>
+</g>
+<g id="open">
+<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g>
+  <title>Layer 1</title>
+  <path stroke="#000" stroke-width="15" fill="#ffc8c8" d="m123.5,38l-84,106l27,115l166,2l29,-111"/>
+  <line x1="276.5" y1="153" x2="108.5" y2="24" stroke="#000" stroke-width="10" fill="none"/>
+  <g stroke-width="15" stroke="#00f" fill="#0ff">
+   <circle r="30" cy="41" cx="123"/>
+   <circle r="30" cy="146" cx="40"/>
+   <circle r="30" cy="260" cx="69"/>
+   <circle r="30" cy="260" cx="228"/>
+   <circle r="30" cy="148" cx="260"/>
+  </g>
+  <g  stroke="#f00" stroke-width="20" fill="none">
+   <line x1="168" y1="24.00001" x2="210" y2="150"/>
+   <line x1="210" y1="24.00001" x2="168" y2="150"/>
+  </g>
+ </g>
+</svg>
+</g>
+</svg>
--- a/public/svg-edit/editor/extensions/ext-closepath.js
+++ b/public/svg-edit/editor/extensions/ext-closepath.js
@ -43,12 +43,13 @@ $(function() {
 		
 		return {
 			name: "ClosePath",
+			svgicons: "extensions/closepath_icons.svg",
 			context_tools: [{
 				type: "tool_button",
 				panel: "closepath_panel",
 				title: "Open or Close path",
 				id: "close",
-				events: { mousedown: toggleClosed }
+				events: { click: toggleClosed }
 			}],
 			callback: function() {
 				$('#closepath_panel').hide();
--- a/public/svg-edit/editor/extensions/ext-foreignobject.js
+++ b/public/svg-edit/editor/extensions/ext-foreignobject.js
@ -0,0 +1,278 @@
+/*
+ * ext-foreignobject.js
+ *
+ * Licensed under the Apache License, Version 2
+ *
+ * Copyright(c) 2010 Jacques Distler 
+ * Copyright(c) 2010 Alexis Deveria 
+ *
+ */
+
+$(function() {
+	svgCanvas.addExtension("foreignObject", function(S) {
+		var svgcontent = S.svgcontent,
+			addElem = S.addSvgElementFromJson,
+			selElems,
+			svgns = "http://www.w3.org/2000/svg",
+			xlinkns = "http://www.w3.org/1999/xlink",
+			xmlns = "http://www.w3.org/XML/1998/namespace",
+			xmlnsns = "http://www.w3.org/2000/xmlns/",
+			se_ns = "http://svg-edit.googlecode.com",
+			htmlns = "http://www.w3.org/1999/xhtml",
+			mathns = "http://www.w3.org/1998/Math/MathML",
+			editingforeign = false,
+			svgdoc = S.svgroot.parentNode.ownerDocument;
+			
+			
+		var properlySourceSizeTextArea = function(){
+			// TODO: remove magic numbers here and get values from CSS
+			var height = $('#svg_source_container').height() - 80;
+			$('#svg_source_textarea').css('height', height);
+		};
+
+		function showPanel(on) {
+			var fc_rules = $('#fc_rules');
+			if(!fc_rules.length) {
+				fc_rules = $('<style id="fc_rules"><\/style>').appendTo('head');
+			} 
+			fc_rules.text(!on?"":" #tool_topath { display: none !important; }");
+			$('#foreignObject_panel').toggle(on);
+		}
+
+		function toggleSourceButtons(on) {
+			$('#tool_source_save, #tool_source_cancel').toggle(!on);
+			$('#foreign_save, #foreign_cancel').toggle(on);
+		}
+		
+			
+		// Function: setForeignString(xmlString, elt)
+		// This function sets the content of element elt to the input XML.
+		//
+		// Parameters:
+		// xmlString - The XML text.
+		// elt - the parent element to append to
+		//
+		// Returns:
+		// This function returns false if the set was unsuccessful, true otherwise.
+		function setForeignString(xmlString) {
+			var elt = selElems[0];
+			try {
+				// convert string into XML document
+				var newDoc = Utils.text2xml('<svg xmlns="'+svgns+'" xmlns:xlink="'+xlinkns+'">'+xmlString+'</svg>');
+				// run it through our sanitizer to remove anything we do not support
+				S.sanitizeSvg(newDoc.documentElement);
+				
+				elt.parentNode.replaceChild(svgdoc.importNode(newDoc.documentElement.firstChild, true), elt);
+				S.call("changed", [elt]);
+				svgCanvas.clearSelection();
+			} catch(e) {
+				console.log(e);
+				return false;
+			}
+	
+			return true;
+		};
+
+		function showForeignEditor() {
+			var elt = selElems[0];
+			if (!elt || editingforeign) return;
+			editingforeign = true;
+			toggleSourceButtons(true);
+			elt.removeAttribute('fill');
+
+			var str = S.svgToString(elt, 0);
+			$('#svg_source_textarea').val(str);
+			$('#svg_source_editor').fadeIn();
+			properlySourceSizeTextArea();
+			$('#svg_source_textarea').focus();
+		}
+		
+		function setAttr(attr, val) {
+			svgCanvas.changeSelectedAttribute(attr, val);
+			S.call("changed", selElems);
+		}
+		
+		
+		return {
+			name: "foreignObject",
+			svgicons: "extensions/foreignobject-icons.xml",
+			buttons: [{
+				id: "tool_foreign",
+				type: "mode",
+				title: "Foreign Object Tool",
+				events: {
+					'click': function() {
+						svgCanvas.setMode('foreign')
+					}
+				}
+			},{
+				id: "edit_foreign",
+				type: "context",
+				panel: "foreignObject_panel",
+				title: "Edit ForeignObject Content",
+				events: {
+					'click': function() {
+						showForeignEditor();
+					}
+				}
+			}],
+			
+			context_tools: [{
+				type: "input",
+				panel: "foreignObject_panel",
+				title: "Change foreignObject's width",
+				id: "foreign_width",
+				label: "w",
+				size: 3,
+				events: {
+					change: function() {
+						setAttr('width', this.value);
+					}
+				}
+			},{
+				type: "input",
+				panel: "foreignObject_panel",
+				title: "Change foreignObject's height",
+				id: "foreign_height",
+				label: "h",
+				events: {
+					change: function() {
+						setAttr('height', this.value);
+					}
+				}
+			}, {
+				type: "input",
+				panel: "foreignObject_panel",
+				title: "Change foreignObject's height",
+				id: "foreign_font_size",
+				label: "font-size",
+				size: 2,
+				defval: 16,
+				events: {
+					change: function() {
+						setAttr('font-size', this.value);
+					}
+				}
+			}
+			
+			
+			],
+			callback: function() {
+				$('#foreignObject_panel').hide();
+
+				var endChanges = function() {
+					$('#svg_source_editor').hide();
+					editingforeign = false;
+					$('#svg_source_textarea').blur();
+					toggleSourceButtons(false);
+				}
+
+				// TODO: Needs to be done after orig icon loads
+				setTimeout(function() {				
+					// Create source save/cancel buttons
+					var save = $('#tool_source_save').clone()
+						.hide().attr('id', 'foreign_save').unbind()
+						.appendTo("#tool_source_back").click(function() {
+							
+							if (!editingforeign) return;
+
+							if (!setForeignString($('#svg_source_textarea').val())) {
+								$.confirm("Errors found. Revert to original?", function(ok) {
+									if(!ok) return false;
+									endChanges();
+								});
+							} else {
+								endChanges();
+							}
+							// setSelectMode();	
+						});
+						
+					var cancel = $('#tool_source_cancel').clone()
+						.hide().attr('id', 'foreign_cancel').unbind()
+						.appendTo("#tool_source_back").click(function() {
+							endChanges();
+						});
+					
+				}, 3000);
+			},
+			mouseDown: function(opts) {
+				var e = opts.event;
+				
+				if(svgCanvas.getMode() == "foreign") {
+
+					var newText = S.addSvgElementFromJson({
+						"element": "foreignObject",
+						"attr": {
+							"x": opts.start_x,
+							"y": opts.start_y,
+							"id": S.getNextId(),
+							"font-size": 16, //cur_text.font_size,
+							"width": "48",
+							"height": "20",
+							"style": "pointer-events:inherit"
+						}
+					});
+					var m = svgdoc.createElementNS(mathns, 'math');
+					m.setAttributeNS(xmlnsns, 'xmlns', mathns);
+					m.setAttribute('display', 'inline');
+					var mi = svgdoc.createElementNS(mathns, 'mi');
+					mi.setAttribute('mathvariant', 'normal');
+					mi.textContent = "\u03A6";
+					var mo = svgdoc.createElementNS(mathns, 'mo');
+					mo.textContent = "\u222A";
+					var mi2 = svgdoc.createElementNS(mathns, 'mi');
+					mi2.textContent = "\u2133";
+					m.appendChild(mi);
+					m.appendChild(mo);
+					m.appendChild(mi2);
+					newText.appendChild(m);
+					return {
+						started: true
+					}
+				}
+			},
+			mouseUp: function(opts) {
+				var e = opts.event;
+				
+				if(svgCanvas.getMode() == "foreign") {
+					var attrs = $(e.target).attr(["width", "height"]);
+					keep = (attrs.width != 0 || attrs.height != 0);
+					
+					svgCanvas.addToSelection([e.target], true);
+					return {
+						keep: keep,
+						element: e.target
+					}
+
+				}
+				
+			},
+			selectedChanged: function(opts) {
+				// Use this to update the current selected elements
+				selElems = opts.elems;
+				
+				var i = selElems.length;
+				
+				while(i--) {
+					var elem = selElems[i];
+					if(elem && elem.tagName == "foreignObject") {
+						if(opts.selectedElement && !opts.multiselected) {
+							$('#foreign_font_size').val(elem.getAttribute("font-size"));
+							$('#foreign_width').val(elem.getAttribute("width"));
+							$('#foreign_height').val(elem.getAttribute("height"));
+						
+							showPanel(true);
+						} else {
+							showPanel(false);
+						}
+					} else {
+						showPanel(false);
+					}
+				}
+			},
+			elementChanged: function(opts) {
+				var elem = opts.elems[0];
+			}
+		};
+	});
+});
--- a/public/svg-edit/editor/extensions/foreignobject-icons.xml
+++ b/public/svg-edit/editor/extensions/foreignobject-icons.xml
@ -0,0 +1,96 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+	<g id="tool_foreign">
+		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 84 84">
+		  <g fill="#444" opacity="0.2" transform="translate(6,6)">
+		  <path d="M42.8,74.3c0,4.3,0,5.9,11.8,5.9l4.1,0l0,3.8c-4.5-0.4-16.1-0.4-21.2-0.3c-5.1,0-16.6,0-21,0.4l0-3.8l4.1,0
+			c11.8,0,11.8-1.7,11.8-5.9l0-6.9C13.9,65.6,0,54.6,0,42c0-12.2,13.3-23.5,32.4-25.4l0-6.9c0-4.3,0-5.9-11.8-5.9l-4.1,0l0-3.8
+			c4.5,0.4,16.1,0.4,21.2,0.3c5.1,0,16.6,0,21-0.4l0,3.8l-4.1,0c-11.8,0-11.8,1.7-11.8,5.9l0,6.9C61.6,18.1,75.8,29.2,75.8,42
+			c0,12.4-13.8,23.9-33.1,25.4L42.8,74.3z M32.4,19.4c-18.7,2.5-19.9,16.2-19.9,22.6c0,7.6,2.3,20.2,20,22.5L32.4,19.4z M42.7,64.7
+			c18.8-2.2,20.7-15.4,20.6-22.8c0-9.3-3.5-20.6-20.7-22.6L42.7,64.7z"/>
+		  </g>
+		  <g fill="#444" opacity="0.3" transform="translate(4,4)">
+		  <path d="M42.8,74.3c0,4.3,0,5.9,11.8,5.9l4.1,0l0,3.8c-4.5-0.4-16.1-0.4-21.2-0.3c-5.1,0-16.6,0-21,0.4l0-3.8l4.1,0
+			c11.8,0,11.8-1.7,11.8-5.9l0-6.9C13.9,65.6,0,54.6,0,42c0-12.2,13.3-23.5,32.4-25.4l0-6.9c0-4.3,0-5.9-11.8-5.9l-4.1,0l0-3.8
+			c4.5,0.4,16.1,0.4,21.2,0.3c5.1,0,16.6,0,21-0.4l0,3.8l-4.1,0c-11.8,0-11.8,1.7-11.8,5.9l0,6.9C61.6,18.1,75.8,29.2,75.8,42
+			c0,12.4-13.8,23.9-33.1,25.4L42.8,74.3z M32.4,19.4c-18.7,2.5-19.9,16.2-19.9,22.6c0,7.6,2.3,20.2,20,22.5L32.4,19.4z M42.7,64.7
+			c18.8-2.2,20.7-15.4,20.6-22.8c0-9.3-3.5-20.6-20.7-22.6L42.7,64.7z"/>
+		  </g>
+		  <g fill="#444" opacity="0.5" transform="translate(2,2)">
+		  <path d="M42.8,74.3c0,4.3,0,5.9,11.8,5.9l4.1,0l0,3.8c-4.5-0.4-16.1-0.4-21.2-0.3c-5.1,0-16.6,0-21,0.4l0-3.8l4.1,0
+			c11.8,0,11.8-1.7,11.8-5.9l0-6.9C13.9,65.6,0,54.6,0,42c0-12.2,13.3-23.5,32.4-25.4l0-6.9c0-4.3,0-5.9-11.8-5.9l-4.1,0l0-3.8
+			c4.5,0.4,16.1,0.4,21.2,0.3c5.1,0,16.6,0,21-0.4l0,3.8l-4.1,0c-11.8,0-11.8,1.7-11.8,5.9l0,6.9C61.6,18.1,75.8,29.2,75.8,42
+			c0,12.4-13.8,23.9-33.1,25.4L42.8,74.3z M32.4,19.4c-18.7,2.5-19.9,16.2-19.9,22.6c0,7.6,2.3,20.2,20,22.5L32.4,19.4z M42.7,64.7
+			c18.8-2.2,20.7-15.4,20.6-22.8c0-9.3-3.5-20.6-20.7-22.6L42.7,64.7z"/>
+		  </g>
+		  <g fill="#0000CC">
+		  <path id="xyz321" d="M42.8,74.3c0,4.3,0,5.9,11.8,5.9l4.1,0l0,3.8c-4.5-0.4-16.1-0.4-21.2-0.3c-5.1,0-16.6,0-21,0.4l0-3.8l4.1,0
+			c11.8,0,11.8-1.7,11.8-5.9l0-6.9C13.9,65.6,0,54.6,0,42c0-12.2,13.3-23.5,32.4-25.4l0-6.9c0-4.3,0-5.9-11.8-5.9l-4.1,0l0-3.8
+			c4.5,0.4,16.1,0.4,21.2,0.3c5.1,0,16.6,0,21-0.4l0,3.8l-4.1,0c-11.8,0-11.8,1.7-11.8,5.9l0,6.9C61.6,18.1,75.8,29.2,75.8,42
+			c0,12.4-13.8,23.9-33.1,25.4L42.8,74.3z M32.4,19.4c-18.7,2.5-19.9,16.2-19.9,22.6c0,7.6,2.3,20.2,20,22.5L32.4,19.4z M42.7,64.7
+			c18.8-2.2,20.7-15.4,20.6-22.8c0-9.3-3.5-20.6-20.7-22.6L42.7,64.7z"/>
+		  </g>
+		</svg>
+	</g>
+	
+	<g id="edit_foreign">
+		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="34 38 170 170" overflow="hidden">
+		<g fill="#000088">
+			<path d="M30.1,63.9v-4.3l30.2-14.9V50L36.5,61.7l23.8,11.7v5.3L30.1,63.9z"/>
+			<path d="M106.1,79.7v-1.1c4.2-0.5,4.8-1.1,4.8-5.2V58.2c0-6-1.3-7.9-5.4-7.9c-3.3,0-5.7,1.3-7.8,4.4v18.1
+				c0,4.5,1.1,5.7,5.2,5.8v1.1H86.8v-1.1c4.1-0.3,4.9-1.1,4.9-5.1V57.9c0-5-1.6-7.6-4.8-7.6c-2.5,0-5.6,1.2-7.4,2.9
+				c-0.5,0.5-1.1,1.4-1.1,1.4v20.3c0,2.8,1.1,3.6,4.9,3.7v1.1h-16v-1.1c4-0.1,5-1.2,5-5V55.4c0-3.5-0.6-4.6-2.5-4.6
+				c-0.8,0-1.4,0.1-2.3,0.3v-1.2c4-1.1,6.4-1.9,10.1-3.2l0.5,0.1v5.4c6-4.5,8-5.5,11.2-5.5c3.9,0,6.3,1.9,7.6,6c3.9-4.2,7.6-6,11.7-6
+				c5.5,0,8.4,4.3,8.4,12.8v14.8c0,2.8,0.9,4.1,3.1,4.2l1.9,0.1v1.1H106.1z"/>
+			<path d="M147.3,80.5c-3,0-4.2-1.4-4.6-5.3c-4.4,3.7-7.3,5.3-10.5,5.3c-4.5,0-7.6-3.2-7.6-7.7c0-2.4,1-4.8,2.6-6.3
+				c3.1-2.7,4.3-3.3,15.4-7.8v-4.4c0-3.9-1.9-6-5.5-6c-2.9,0-5.2,1.6-5.2,3.5c0,0.5,0.1,1.1,0.2,1.7c0.1,0.5,0.1,0.9,0.1,1.2
+				c0,1.6-1.5,3-3.2,3s-3.1-1.4-3.1-3.1c0-1.8,1.2-3.9,3-5.4c2-1.7,5.5-2.7,9.1-2.7c4.4,0,7.5,1.4,9,4.2c1,1.7,1.4,3.7,1.4,7.3v14
+				c0,3.2,0.5,4.2,2.2,4.2c1.1,0,1.9-0.4,3.2-1.4v1.9C151.3,79.6,149.8,80.5,147.3,80.5z M142.6,60.5c-8.7,3.2-11.7,5.8-11.7,10v0.3
+				c0,3.1,2,5.5,4.5,5.5c1.5,0,3.5-0.6,5.3-1.6c1.5-0.9,1.9-1.6,1.9-3.8V60.5z"/>
+			<path d="M165.3,80.5c-4.2,0-6.3-3.1-6.3-9.1V49.7h-3.8c-0.2-0.1-0.3-0.3-0.3-0.5c0-0.4,0.4-0.9,1.2-1.4
+				c1.9-1.1,4.3-3.7,7-7.7c0.5-0.6,1-1.3,1.4-2c0.4,0,0.5,0.2,0.5,0.9v8.4h7.3v2.3h-7.3v20.6c0,4.6,1.1,6.5,3.7,6.5
+				c1.6,0,2.7-0.6,4.3-2.5l0.9,0.8C171.8,78.7,169,80.5,165.3,80.5z"/>
+			<path d="M193.8,79.7v-1.1c4.1-0.4,4.9-1.3,4.9-6.2V58.1c0-5-1.8-7.6-5.4-7.6c-2.8,0-5,1.2-8,4.5v17.4
+				c0,5,0.7,5.8,4.9,6.3v1.1h-15.6v-1.1c4.2-0.6,4.6-1.2,4.6-6.3V38.5c0-3.1-0.6-3.7-3.7-3.7c-0.4,0-0.6,0-0.9,0.1v-1.2l1.9-0.6
+				c4-1.2,5.8-1.7,8.3-2.6l0.4,0.2v21.9c3.3-4.3,6.3-6,10.6-6c5.9,0,8.9,3.9,8.9,11.5v14.3c0,5,0.4,5.5,4.3,6.3v1.1h-15.2V79.7z"/>
+			<path d="M59.1,116.1v-4.3l30.2-14.9v5.3l-23.8,11.7l23.8,11.7v5.3L59.1,116.1z"/>
+			<path d="M135.1,131.9v-1.1c4.2-0.5,4.8-1.1,4.8-5.2v-15.1c0-6-1.3-7.9-5.4-7.9c-3.3,0-5.7,1.3-7.8,4.4v18.1
+				c0,4.5,1.1,5.7,5.2,5.8v1.1h-16.1v-1.1c4.1-0.3,4.9-1.1,4.9-5.1v-15.7c0-5-1.6-7.6-4.8-7.6c-2.5,0-5.6,1.2-7.4,2.9
+				c-0.5,0.5-1.1,1.4-1.1,1.4v20.3c0,2.8,1.1,3.6,4.9,3.7v1.1h-16v-1.1c4-0.1,5-1.2,5-5v-18.2c0-3.5-0.6-4.6-2.5-4.6
+				c-0.8,0-1.4,0.1-2.3,0.3v-1.2c4-1.1,6.4-1.9,10.1-3.2l0.5,0.1v5.4c6-4.5,8-5.5,11.2-5.5c3.9,0,6.3,1.9,7.6,6c3.9-4.2,7.6-6,11.7-6
+				c5.5,0,8.4,4.3,8.4,12.8v14.8c0,2.8,0.9,4.1,3.1,4.2l1.9,0.1v1.1H135.1z"/>
+			<path d="M152.1,131.9v-1.1c5-0.3,5.7-1.1,5.7-6.3v-16.6c0-3.2-0.6-4.3-2.4-4.3c-0.6,0-1.6,0.1-2.4,0.2l-0.6,0.1v-1.1
+				l11.2-4L164,99v25.6c0,5.2,0.6,5.9,5.3,6.3v1.1L152.1,131.9L152.1,131.9z M160.8,93.1c-2,0-3.7-1.6-3.7-3.7c0-2,1.7-3.7,3.7-3.7
+				c2.1,0,3.7,1.7,3.7,3.7C164.6,91.6,163,93.1,160.8,93.1z"/>
+			<path d="M175.8,131v-5.3l23.7-11.8l-23.7-11.7v-5.3l30.1,14.9v4.3L175.8,131z"/>
+			<path d="M31.1,169.5v-4.3l30.2-14.9v5.3l-23.8,11.7L61.3,179v5.3L31.1,169.5z"/>
+			<path d="M71.3,186.4h-4.9l16.5-49.7h4.8L71.3,186.4z"/>
+			<path d="M127.1,185.3v-1.1c4.2-0.5,4.8-1.1,4.8-5.2v-15.2c0-6-1.3-7.9-5.4-7.9c-3.3,0-5.7,1.3-7.8,4.4v18.1
+				c0,4.5,1.1,5.7,5.2,5.8v1.1h-16.1v-1.1c4.1-0.3,4.9-1.1,4.9-5.1v-15.6c0-5-1.6-7.6-4.8-7.6c-2.5,0-5.6,1.2-7.4,2.9
+				c-0.5,0.5-1.1,1.4-1.1,1.4v20.3c0,2.8,1.1,3.6,4.9,3.7v1.1h-16v-1.1c4-0.1,5-1.2,5-5V161c0-3.5-0.6-4.6-2.5-4.6
+				c-0.8,0-1.4,0.1-2.3,0.3v-1.2c4-1.1,6.4-1.9,10.1-3.2l0.5,0.1v5.4c6-4.5,8-5.5,11.2-5.5c3.9,0,6.3,1.9,7.6,6c3.9-4.2,7.6-6,11.7-6
+				c5.5,0,8.4,4.3,8.4,12.8v14.8c0,2.8,0.9,4.1,3.1,4.2l1.9,0.1v1.1H127.1L127.1,185.3z"/>
+			<path d="M168.3,186.1c-3,0-4.2-1.4-4.6-5.3c-4.4,3.7-7.3,5.3-10.5,5.3c-4.5,0-7.6-3.2-7.6-7.7c0-2.4,1-4.8,2.6-6.3
+				c3.1-2.7,4.3-3.3,15.4-7.8v-4.4c0-3.9-1.9-6-5.5-6c-2.9,0-5.2,1.6-5.2,3.5c0,0.5,0.1,1.1,0.2,1.7c0.1,0.5,0.1,0.9,0.1,1.2
+				c0,1.6-1.5,3-3.2,3s-3.1-1.4-3.1-3.1c0-1.8,1.2-3.9,3-5.4c2-1.7,5.5-2.7,9.1-2.7c4.4,0,7.5,1.4,9,4.2c1,1.7,1.4,3.7,1.4,7.3v14
+				c0,3.2,0.5,4.2,2.2,4.2c1.1,0,1.9-0.4,3.2-1.4v1.9C172.3,185.2,170.8,186.1,168.3,186.1z M163.8,166.1c-8.7,3.2-11.7,5.8-11.7,10
+				v0.3c0,3.1,2,5.5,4.5,5.5c1.5,0,3.5-0.6,5.3-1.6c1.5-0.9,1.9-1.6,1.9-3.8V166.1z"/>
+			<path d="M186.3,186.1c-4.2,0-6.3-3.1-6.3-9.1v-21.7h-3.8c-0.2-0.1-0.3-0.3-0.3-0.5c0-0.4,0.4-0.9,1.2-1.4
+				c1.9-1.1,4.3-3.7,7-7.7c0.5-0.6,1-1.3,1.4-2c0.4,0,0.5,0.2,0.5,0.9v8.4h7.3v2.3h-7.3v20.6c0,4.6,1.1,6.5,3.7,6.5
+				c1.6,0,2.7-0.6,4.3-2.5l0.9,0.8C192.8,184.3,190,186.1,186.3,186.1z"/>
+			<path d="M209.1,185.3h-13.4v-1.1c4.2-0.6,4.6-1.2,4.6-6.3V144c0-3.1-0.6-3.7-3.7-3.7c-0.4,0-0.6,0-0.9,0.1v-1.2
+				l1.9-0.6c4-1.2,5.8-1.7,8.3-2.6l0.4,0.2v21.9c0.9-1.2,1.9-2.2,2.8-3.1"/>
+			<path d="M209.1,157.9c-0.8,0.7-1.7,1.5-2.7,2.6v17.4c0,4,0.4,5.3,2.7,5.9"/>
+		  </g>
+		  <g>
+			<polyline opacity="0.2" fill="#231F20" points="209.1,76.4 118.7,186.5 139.1,186.4 209.1,121 209.1,76.4 "/>
+			<polyline opacity="0.4" fill="#231F20" points="209.1,76.2 118.5,186.5 129.7,186.4 200.2,120.3 209.1,100.8 209.1,76.4 "/>
+			<path fill="#FFD761" d="M121.6,88.7l0.8,87.5l62.3-56.7c0,0-15.3-25.8-24.8-30C151.1,85.6,121.6,88.7,121.6,88.7z"/>
+			<path fill="#FEA01E" d="M209.1,19.5h-54l-33.5,69.2c0,0,29.7-3.4,38.3,0.8c8.9,4.4,25,30.8,25,30.8l24.2-50V19.5z"/>
+			<path d="M120.4,153.7l-0.6,25l23.8-16.9c0,0-8-7-11.2-8.1C129.4,152.8,120.4,153.7,120.4,153.7z"/>
+			<polyline fill="none" stroke="#231F20" stroke-width="5" points="153.9,19.5 121.6,88.7 120.7,181.2 186.6,120.3 209.1,70.3 "/>
+		  </g>
+		</svg>
+	</g>
+	
+	<g id="svg_eof"/>
+</svg>
--- a/public/svg-edit/editor/svg-editor.css
+++ b/public/svg-edit/editor/svg-editor.css
@ -1,4 +1,4 @@
-body {
+body {
 	background: #D8D8D8;
 }

@ -410,7 +410,6 @@ body {
 #svg_editor #line_panel,
 #svg_editor #image_panel,
 #svg_editor #text_panel,
-#svg_editor #foreignObject_panel,
 #svg_editor #path_node_panel {
 	display: none;
 }
@ -683,12 +682,11 @@ span.zoom_tool {
 	text-align: right;
 }

-#svg_source_editor,  #svg_foreign_editor{
+#svg_source_editor {
 	display: none;
 }

-#svg_source_editor #svg_source_overlay,
-#svg_foreign_editor #svg_foreign_overlay {
+#svg_source_editor #svg_source_overlay {
 	position: absolute;
 	top: 0px;
 	right: 0px;
@ -699,8 +697,7 @@ span.zoom_tool {
 	z-index: 5;
 }

-#svg_source_editor #svg_source_container,
-#svg_foreign_editor #svg_foreign_container {
+#svg_source_editor #svg_source_container {
 	position: absolute;
 	top: 30px;
 	left: 30px;
@ -782,8 +779,7 @@ span.zoom_tool {
 	display: block;
 }

-#svg_source_editor #svg_source_textarea,
-#svg_foreign_editor #svg_foreign_textarea {
+#svg_source_editor #svg_source_textarea {
 	position: relative;
 	width: 95%;
 	top: 5px;
@ -792,8 +788,7 @@ span.zoom_tool {
 	font-size: 12px;
 }

-#svg_source_editor #tool_source_back,
-#svg_foreign_editor #tool_foreign_back {
+#svg_source_editor #tool_source_back {
 	text-align: left;
 	padding-left: 20px;
 }
@ -816,11 +811,6 @@ span.zoom_tool {
 	text-align: left;
 }

-#svg_source_editor button, #svg_foreign_editor button, #svg_docprops button {
-	padding: 5px 5px 7px 28px;
-	margin: 5px 20px 0 0;	
-}
-
 #svg_docprops button {
 	margin-top: 0;
 	margin-bottom: 5px;
@ -849,17 +839,14 @@ span.zoom_tool {
 	z-index: 20000;
 }

-button#tool_source_save,
-button#tool_source_cancel,
-button#tool_foreign_save,
-button#tool_foreign_cancel,
-button#tool_docprops_save,
-button#tool_docprops_cancel {
+.toolbar_button button {
    border:1px solid #dedede;
    line-height:130%;
+    float: left;
 	background: #E8E8E8 none;
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
+	margin: 5px 20px 0 0;	
 }

 .toolbar_button button .svg_icon {
@ -971,4 +958,3 @@ button#tool_docprops_cancel {
 	-webkit-border-radius: 0px;	
 }

-foreignObject { line-height:1.0; }
--- a/public/svg-edit/editor/svg-editor.html
+++ b/public/svg-edit/editor/svg-editor.html
@ -21,6 +21,7 @@
 <script type="text/javascript" src="extensions/ext-closepath.js"></script>
 <script type="text/javascript" src="extensions/ext-arrows.js"></script>
 <script type="text/javascript" src="extensions/ext-connector.js"></script>
+<script type="text/javascript" src="extensions/ext-foreignobject.js"></script>

 <!-- Release version of script tags: >
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
@ -331,22 +332,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 		<input id="text" type="text" title="Change text contents" size="35"/>
 	</div>
 	
-	<div id="foreignObject_panel">
-		<div class="toolset">
-			<label id="tool_foreign_width">w:
-			  <input id="foreign_width" class="attr_changer" title="Change foreignObject's width" size="3" data-attr="width"/>
-			</label>
-			<label id="tool_foreign_height">h:
-			  <input id="foreign_height" class="attr_changer" title="Change foreignObject's height" size="3" data-attr="height"/>
-			</label>
-            <label id="tool_foreign_font_size">
-		      <span id="foreign_font_sizeLabel">font-size:</span>
-              <input id="foreign_font_size" class="attr_changer" title="Change Font Size" size="2" value="16" type="text"  data-attr="font-size"/>
-		    </label>
-			<div class="tool_button" id="tool_edit_foreign" title="Edit ForeignObject Content"><span></span></div>
-		</div>		
-	</div>
-	
 	<div id="path_node_panel">
 		<div class="tool_sep"></div>
 		<div class="tool_button" id="tool_node_link" title="Link Control Points"></div>
@ -381,7 +366,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 	<div class="tool_button" id="tool_text" title="Text Tool [6]"></div>
 	<div class="tool_button" id="tool_image" title="Image Tool [8]"></div>
 	<div class="tool_button" id="tool_zoom" title="Zoom Tool [Ctrl+Up/Down]"></div>
-	<div class="tool_button" id="tool_foreign" title="Foreign Object Tool"></div>
 	
 	<div style="display: none">
 		<div id="tool_rect" title="Rectangle"></div>
@ -469,19 +453,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 	</div>
 </div>

-<div id="svg_foreign_editor">
-	<div id="svg_foreign_overlay"></div>
-	<div id="svg_foreign_container">
-		<div id="tool_foreign_back" class="toolbar_button">
-			<button id="tool_foreign_save">Apply Changes</button>
-			<button id="tool_foreign_cancel">Cancel</button>
-		</div>
-		<form>
-			<textarea id="svg_foreign_textarea" spellcheck="false"></textarea>
-		</form>
-	</div>
-</div>
-
 <div id="svg_docprops">
 	<div id="svg_docprops_overlay"></div>
 	<div id="svg_docprops_container">
--- a/public/svg-edit/editor/svg-editor.js
+++ b/public/svg-edit/editor/svg-editor.js
@ -165,7 +165,6 @@ function svg_edit_setup() {
 	var selectedElement = null;
 	var multiselected = false;
 	var editingsource = false;
-	var editingforeign = false;
 	var docprops = false;
 	
 	var fillPaint = new $.jGraduate.Paint({solidColor: "FF0000"}); // solid red
@ -416,7 +415,74 @@ function svg_edit_setup() {
 				ext.callback();
 			}
 		}
-	
+
+		if(ext.context_tools) {
+			$.each(ext.context_tools, function(i, tool) {
+				// Add select tool
+				var cont_id = tool.container_id?(' id="' + tool.container_id + '"'):"";
+				
+				var panel = $('#' + tool.panel);
+				
+				if(!panel.length) {
+					panel = $('<div>', {id: tool.panel}).appendTo("#tools_top");
+				}
+				
+				// TODO: Allow support for other types, or adding to existing tool
+				switch (tool.type) {
+				case 'tool_button':
+					var html = '<div class="tool_button">' + tool.id + '</div>';
+					var div = $(html).appendTo(panel);
+					if (tool.events) {
+						$.each(tool.events, function(evt, func) {
+							$(div).bind(evt, func);
+						});
+					}
+					break;
+				case 'select':
+					var html = '<label' + cont_id + '>'
+						+ '<select id="' + tool.id + '">';
+					$.each(tool.options, function(val, text) {
+						var sel = (val == tool.defval) ? " selected":"";
+						html += '<option value="'+val+'"' + sel + '>' + text + '</option>';
+					});
+					html += "</select></label>";
+					// Creates the tool, hides & adds it, returns the select element
+					var sel = $(html).appendTo(panel).find('select');
+					
+					$.each(tool.events, function(evt, func) {
+						$(sel).bind(evt, func);
+					});
+					break;
+				
+				case 'input':
+					var html = '<label' + cont_id + '>'
+						+ '<span id="' + tool.id + '_label">' 
+						+ tool.label + ':</span>'
+						+ '<input id="' + tool.id + '" title="' + tool.title
+						+ '" size="' + (tool.size || "4") + '" value="' + (tool.defval || "") + '" type="text"/></label>'
+						
+					// Creates the tool, hides & adds it, returns the select element
+					
+					// Add to given tool.panel
+					var inp = $(html).appendTo(panel).find('input');
+					
+					if(tool.spindata) {
+						inp.SpinButton(tool.spindata);
+					}
+					
+					if(tool.events) {
+						$.each(tool.events, function(evt, func) {
+							inp.bind(evt, func);
+						});
+					}
+					break;
+					
+				default:
+					break;
+				}
+			});
+		}
+		
 		if(ext.buttons) {
 			var fallback_obj = {},
 				placement_obj = {},
@ -451,6 +517,10 @@ function svg_edit_setup() {
 					cls = 'tool_button';
 					parent = "#tools_left";
 					break;
+				case 'context':
+					cls = 'tool_button';
+					parent = "#" + btn.panel;
+					break;
 				}
 				
 				var button = $('<div/>')
@ -516,21 +586,31 @@ function svg_edit_setup() {
 				if(!svgicons) {
 					button.append(icon);
 				}
-				
+
 				// Add given events to button
 				$.each(btn.events, function(name, func) {
 					if(name == "click") {
 						if(btn.type == 'mode') {
-							button.bind(name, func);
+							if(btn.includeWith) {
+								button.bind(name, func);
+							} else {
+								button.bind(name, function() {
+									if(toolButtonClick(button)) {
+										func();
+									}
+								});
+							}
 							if(btn.key) {
 								$(document).bind('keydown', {combi: btn.key, disableInInput: true}, func);
 								if(btn.title) button.attr("title", btn.title + ' ['+btn.key+']');
 							}
+						} else {
+							button.bind(name, func);
 						}
 					} else {
 						button.bind(name, func);
 					}
-					});
+				});
 				
 				setupFlyouts(holders);
 			});
@ -542,7 +622,6 @@ function svg_edit_setup() {
 				fallback: fallback_obj,
 				placement: placement_obj,
 				callback: function(icons) {
-			
 					// Bad hack to make the icon match the current size
 					// TODO: Write better hack!
 					var old = curPrefs.iconsize;
@ -555,72 +634,6 @@ function svg_edit_setup() {
 		
 			});
 		}
-		if(ext.context_tools) {
-			$.each(ext.context_tools, function(i, tool) {
-				// Add select tool
-				var cont_id = tool.container_id?(' id="' + tool.container_id + '"'):"";
-				
-				var panel = $('#' + tool.panel);
-				
-				if(!panel.length) {
-					panel = $('<div>', {id: tool.panel}).appendTo("#tools_top");
-				}
-				
-				// TODO: Allow support for other types, or adding to existing tool
-				switch (tool.type) {
-				case 'tool_button':
-					var html = '<div class="tool_button">' + tool.id + '</div>';
-					var div = $(html).appendTo(panel);
-					if (tool.events) {
-						$.each(tool.events, function(evt, func) {
-							$(div).bind(evt, func);
-						});
-					}
-					break;
-				case 'select':
-					var html = '<label' + cont_id + '>'
-						+ '<select id="' + tool.id + '">';
-					$.each(tool.options, function(val, text) {
-						var sel = (val == tool.defval) ? " selected":"";
-						html += '<option value="'+val+'"' + sel + '>' + text + '</option>';
-					});
-					html += "</select></label>";
-					// Creates the tool, hides & adds it, returns the select element
-					var sel = $(html).appendTo(panel).find('select');
-					
-					$.each(tool.events, function(evt, func) {
-						$(sel).bind(evt, func);
-					});
-					break;
-				
-				case 'input':
-					var html = '<label' + cont_id + '">'
-						+ '<span id="' + tool.id + '_label">' 
-						+ tool.label + ':</span>'
-						+ '<input id="' + tool.id + '" title="' + tool.title
-						+ '" size="' + (tool.size || "4") + '" value="' + (tool.defval || "") + '" type="text"/></label>'
-						
-					// Creates the tool, hides & adds it, returns the select element
-					
-					// Add to given tool.panel
-					var inp = $(html).appendTo(panel).find('input');
-					
-					if(tool.spindata) {
-						inp.SpinButton(tool.spindata);
-					}
-					
-					if(tool.events) {
-						$.each(tool.events, function(evt, func) {
-							$(sel).bind(evt, func);
-						});
-					}
-					break;
-					
-				default:
-					break;
-				}
-			});
-		}
 		
 		runCallback();
 	};
@ -652,8 +665,8 @@ function svg_edit_setup() {
 	// updates the toolbar (colors, opacity, etc) based on the selected element
 	var updateToolbar = function() {
 		if (selectedElement != null && 
-            selectedElement.tagName != "foreignObject" &&
 			selectedElement.tagName != "image" &&
+			selectedElement.tagName != "foreignObject" &&
 			selectedElement.tagName != "g")
 		{
 			// get opacity values
@ -734,7 +747,7 @@ function svg_edit_setup() {
 		var is_node = currentMode == 'pathedit'; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false;
 		
 		$('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,\
-			#ellipse_panel, #line_panel, #text_panel, #image_panel, #foreignObject_panel').hide();
+			#ellipse_panel, #line_panel, #text_panel, #image_panel').hide();
 		if (elem != null) {
 			var elname = elem.nodeName;
 			var angle = svgCanvas.getRotationAngle(elem);
@ -772,7 +785,7 @@ function svg_edit_setup() {
 				}
 				
 				// Elements in this array cannot be converted to a path
-				var no_path = $.inArray(elname, ['image', 'text', 'path', 'g', 'use', 'foreignObject']) == -1;
+				var no_path = $.inArray(elname, ['image', 'text', 'path', 'g', 'use']) == -1;
 				$('#tool_topath').toggle(no_path);
 				$('#tool_reorient').toggle(elname == 'path');
 				$('#tool_reorient').toggleClass('disabled', angle == 0);
@ -800,7 +813,6 @@ function svg_edit_setup() {
 				circle: ['cx','cy','r'],
 				ellipse: ['cx','cy','rx','ry'],
 				line: ['x1','y1','x2','y2'], 
-				foreignObject: [],
 				text: []
 			};
 			
@ -837,12 +849,6 @@ function svg_edit_setup() {
 						$('#text').focus().select();
 					}
 				} // text
-				else if (el_name == 'foreignObject') {
-				    $('#foreignObject_panel').css("display", "inline");
-				    $('#foreign_font_size').val(elem.getAttribute("font-size"));
-				    $('#foreign_width').val(elem.getAttribute("width"));
-				    $('#foreign_height').val(elem.getAttribute("height"));
-				} //foreignObject
 				else if(el_name == 'image') {
 					var xlinkNS="http://www.w3.org/1999/xlink";
 					var href = elem.getAttributeNS(xlinkNS, "href");
@ -1331,11 +1337,6 @@ function svg_edit_setup() {
 		svgCanvas.setMode('text');
 	};
 	
-	var clickForeign = function(){
-		toolButtonClick('#tool_foreign');
-		svgCanvas.setMode('foreign');
-	};
-
 	var clickPath = function(){
 		toolButtonClick('#tool_path');
 		svgCanvas.setMode('path');
@ -1540,21 +1541,10 @@ function svg_edit_setup() {
 		var str = svgCanvas.getSvgString();
 		$('#svg_source_textarea').val(str);
 		$('#svg_source_editor').fadeIn();
-		properlySourceSizeTextArea('source');
+		properlySourceSizeTextArea();
 		$('#svg_source_textarea').focus();
 	};
 	
-	var showForeignEditor = function(elt){
-		if (!elt || editingforeign) return;
-		editingforeign = true;
-		elt.removeAttribute('fill');
-		var str = svgCanvas.getForeignString(elt);
-		$('#svg_foreign_textarea').val(str);
-		$('#svg_foreign_editor').fadeIn();
-		properlySourceSizeTextArea('foreign');
-		$('#svg_foreign_textarea').focus();
-	};
-
 	$('#svg_docprops_container').draggable({cancel:'button,fieldset'});
 	
 	var showDocProperties = function(){
@ -1590,40 +1580,18 @@ function svg_edit_setup() {
 		$('#svg_docprops').fadeIn();
 	};
 	
-	var properlySourceSizeTextArea = function(str){
+	var properlySourceSizeTextArea = function(){
 		// TODO: remove magic numbers here and get values from CSS
-		var height = $('#svg_'+str+'_container').height() - 80;
-		$('#svg_'+str+'_textarea').css('height', height);
+		var height = $('#svg_source_container').height() - 80;
+		$('#svg_source_textarea').css('height', height);
 	};
 	
-    var saveForeignEditor = function(elt){
-		if (!editingforeign) return;
-		
-		var saveChanges = function() {
-			svgCanvas.clearSelection();
-			hideSourceEditor('foreign');
-			zoomImage();
-			populateLayers();
-			setTitle(svgCanvas.getImageTitle());
-		}
-
-        if (!svgCanvas.setForeignString($('#svg_foreign_textarea').val(), elt)) {
-			$.confirm(uiStrings.QerrorsRevertToSource, function(ok) {
-				if(!ok) return false;
-				saveChanges();
-            });
-		} else {
-			saveChanges();
-		}
-		setSelectMode();		
-    }
-
 	var saveSourceEditor = function(){
 		if (!editingsource) return;

 		var saveChanges = function() {
 			svgCanvas.clearSelection();
-			hideSourceEditor('source');
+			hideSourceEditor();
 			zoomImage();
 			populateLayers();
 			setTitle(svgCanvas.getImageTitle());
@ -1850,28 +1818,18 @@ function svg_edit_setup() {
 		setFlyoutPositions();
 	}

-	var cancelOverlays = function(elt) {
+	var cancelOverlays = function() {
 		$('#dialog_box').hide();
-		if (!editingsource && !editingforeign && !docprops) return;
+		if (!editingsource && !docprops) return;

 		if (editingsource) {
 			var oldString = svgCanvas.getSvgString();
 			if (oldString != $('#svg_source_textarea').val()) {
 				$.confirm(uiStrings.QignoreSourceChanges, function(ok) {
-					if(ok) hideSourceEditor('source');
+					if(ok) hideSourceEditor();
 				});
 			} else {
-				hideSourceEditor('source');
-			}
-		}
-		else if (editingforeign) {
-			var oldString = svgCanvas.getForeignString(elt);
-			if (oldString != $('#svg_foreign_textarea').val()) {
-				$.confirm(uiStrings.QignoreSourceChanges, function(ok) {
-					if(ok) hideSourceEditor('foreign');
-				});
-			} else {
-				hideSourceEditor('foreign');
+				hideSourceEditor();
 			}
 		}
 		else if (docprops) {
@ -1880,11 +1838,10 @@ function svg_edit_setup() {

 	};

-	var hideSourceEditor = function(str){
-		$('#svg_'+str+'_editor').hide();
+	var hideSourceEditor = function(){
+		$('#svg_source_editor').hide();
 		editingsource = false;
-		editingforeign = false;
-		$('#svg_'+str+'_textarea').blur();
+		$('#svg_source_textarea').blur();
 	};
 	
 	var hideDocProperties = function(){
@ -1897,11 +1854,8 @@ function svg_edit_setup() {
 	
 	// TODO: add canvas-centering code in here
 	$(window).resize(function(evt) {
-		if (editingsource) {
-		  properlySourceSizeTextArea('source');
-        } else if(editingforeign) {
-          properlySourceSizeTextArea('foreign');
-        }
+		if (!editingsource) return;
+		properlySourceSizeTextArea();
 	});
 	
 	$('#url_notice').click(function() {
@ -2037,7 +1991,7 @@ function svg_edit_setup() {
 		var bNoFill = (svgCanvas.getFillColor() == 'none');
 		var bNoStroke = (svgCanvas.getStrokeColor() == 'none');
 		var buttonsNeedingStroke = [ '#tool_fhpath', '#tool_line' ];
-		var buttonsNeedingFillAndStroke = [ '#tools_rect .tool_button', '#tools_ellipse .tool_button', '#tool_text', '#tool_foreign', '#tool_path', '#tool_edit_foreign'];
+		var buttonsNeedingFillAndStroke = [ '#tools_rect .tool_button', '#tools_ellipse .tool_button', '#tool_text', '#tool_path'];
 		if (bNoStroke) {
 			for (index in buttonsNeedingStroke) {
 				var button = buttonsNeedingStroke[index];
@ -2500,19 +2454,13 @@ function svg_edit_setup() {
 			{sel:'#tool_text', fn: clickText, evt: 'click', key: 7},
 			{sel:'#tool_image', fn: clickImage, evt: 'mouseup', key: 8},
 			{sel:'#tool_zoom', fn: clickZoom, evt: 'mouseup', key: 9},
-			{sel:'#tool_foreign', fn: clickForeign, evt: 'mouseup'},
-			{sel:'#tool_edit_foreign', fn: function(){showForeignEditor(selectedElement)}, evt: 'mouseup'},
 			{sel:'#tool_clear', fn: clickClear, evt: 'mouseup', key: [modKey+'N', true]},
-			{sel:'#tool_save', fn: function() { if(editingsource){saveSourceEditor()}
-			               else if(editingforeign){saveForeignEditor(selectedElement)}
-			               else clickSave()}, evt: 'mouseup', key: [modKey+'S', true]},
+			{sel:'#tool_save', fn: function() { editingsource?saveSourceEditor():clickSave()}, evt: 'mouseup', key: [modKey+'S', true]},
 			{sel:'#tool_open', fn: clickOpen, evt: 'mouseup', key: [modKey+'O', true]},
 			{sel:'#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true]},
 			{sel:'#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true]},
 			{sel:'#tool_source_cancel,#svg_source_overlay,#tool_docprops_cancel', fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true},
-			{sel:'#tool_foreign_cancel,#svg_source_overlay,#tool_docprops_cancel', fn: function(){cancelOverlays(selectedElement)}, evt: 'click', key: ['esc', false, false], hidekey: true},
 			{sel:'#tool_source_save', fn: saveSourceEditor, evt: 'click'},
-			{sel:'#tool_foreign_save', fn: function(){saveForeignEditor(selectedElement)}, evt: 'click'},
 			{sel:'#tool_docprops_save', fn: saveDocProperties, evt: 'click'},
 			{sel:'#tool_docprops', fn: showDocProperties, evt: 'mouseup', key: [modKey+'I', true]},
 			{sel:'#tool_delete,#tool_delete_multi', fn: deleteSelected, evt: 'click', key: ['del/backspace', true]},
@ -2812,7 +2760,7 @@ function svg_edit_setup() {
 		updateCanvas(true);
 	});
 	
-//	var revnums = "svg-editor.js ($Rev: 1386 $) ";
+//	var revnums = "svg-editor.js ($Rev: 1395 $) ";
 //	revnums += svgCanvas.getVersion();
 //	$('#copyright')[0].setAttribute("title", revnums);
 	return svgCanvas;
@ -2850,8 +2798,6 @@ function svg_edit_setup() {
 			'text':'text.png',
 			'image':'image.png',
 			'zoom':'zoom.png',
-			'foreign':'foreign.png',
-			'edit_foreign':'edit_foreign.png',
 			
 			'clone':'clone.png',
 			'delete':'delete.png',
@ -2905,8 +2851,6 @@ function svg_edit_setup() {
 			'#tool_text,#layer_rename':'text',
 			'#tool_image':'image',
 			'#tool_zoom':'zoom',
-			'#tool_foreign':'foreign',
-			'#tool_edit_foreign':'edit_foreign',
 			
 			'#tool_clone,#tool_clone_multi,#tool_node_clone':'clone',
 			'#layer_delete,#tool_delete,#tool_delete_multi,#tool_node_delete':'delete',
@ -2931,8 +2875,8 @@ function svg_edit_setup() {
 			'#layer_down':'go_down',
 			'#layerlist td.layervis':'eye',
 			
-			'#tool_source_save,#tool_foreign_save,#tool_docprops_save':'ok',
-			'#tool_source_cancel,#tool_foreign_cancel,#tool_docprops_cancel':'cancel',
+			'#tool_source_save,#tool_docprops_save':'ok',
+			'#tool_source_cancel,#tool_docprops_cancel':'cancel',
 			
 			'.flyout_arrow_horiz':'arrow_right',
 			'.dropdown button, #main_button .dropdown':'arrow_down',
@ -2977,13 +2921,13 @@ function svg_edit_setup() {
 			
 			// Load source if given
 			var loc = document.location.href;
-			if(loc.indexOf('source=data') != -1) {
-				var pre = 'source=data:image/svg+xml;base64,';
+			if(loc.indexOf('?source=') != -1) {
+				var pre = '?source=data:image/svg+xml;base64,';
 				var src = loc.substring(loc.indexOf(pre) + pre.length);
 				svgCanvas.setSvgString(Utils.decode64(src));
 			}
-			else if(loc.indexOf('url=') != -1) {
-				var pre = 'url=';
+			else if(loc.indexOf('?url=') != -1) {
+				var pre = '?url=';
 				var url = loc.substring(loc.indexOf(pre) + pre.length);
 				$.ajax({
 					'url': url,
--- a/public/svg-edit/editor/svgcanvas.js
+++ b/public/svg-edit/editor/svgcanvas.js
@ -99,7 +99,7 @@ var isOpera = !!window.opera,
 	"ellipse": ["class", "clip-path", "clip-rule", "cx", "cy", "fill", "fill-opacity", "fill-rule", "filter", "id", "mask", "opacity", "requiredFeatures", "rx", "ry", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"],
 	"feGaussianBlur": ["class", "id", "requiredFeatures", "stdDeviation"],
 	"filter": ["class", "filterRes", "filterUnits", "height", "id", "primitiveUnits", "requiredFeatures", "width", "x", "xlink:href", "y"],
-	"foreignObject": ["class", "color", "font-size", "height", "id", "markdown", "opacity", "overflow", "requiredFeatures", "style", "transform", "width", "x", "y"],
+	"foreignObject": ["class", "font-size", "height", "id", "markdown", "opacity", "overflow", "requiredFeatures", "style", "transform", "width", "x", "y"],
 	"g": ["class", "clip-path", "clip-rule", "id", "display", "fill", "fill-opacity", "fill-rule", "filter", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"],
 	"image": ["class", "clip-path", "clip-rule", "filter", "height", "id", "mask", "opacity", "requiredFeatures", "style", "systemLanguage", "transform", "width", "x", "xlink:href", "xlink:title", "y"],
 	"line": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "id", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "x1", "x2", "y1", "y2"],
@ -114,7 +114,7 @@ var isOpera = !!window.opera,
 	"radialGradient": ["class", "cx", "cy", "fx", "fy", "gradientTransform", "gradientUnits", "id", "r", "requiredFeatures", "spreadMethod", "systemLanguage", "xlink:href"],
 	"rect": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "height", "id", "mask", "opacity", "requiredFeatures", "rx", "ry", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "width", "x", "y"],
 	"stop": ["class", "id", "offset", "requiredFeatures", "stop-color", "stop-opacity", "style", "systemLanguage"],
-	"svg": ["class", "clip-path", "clip-rule", "filter", "id", "height", "markdown", "mask", "preserveAspectRatio", "requiredFeatures", "style", "systemLanguage", "transform", "viewBox", "width", "xmlns", "xmlns:xlink"],
+	"svg": ["class", "clip-path", "clip-rule", "filter", "id", "height", "markdown", "mask", "preserveAspectRatio", "requiredFeatures", "style", "systemLanguage", "transform", "viewBox", "width", "xmlns", "xmlns:se", "xmlns:xlink"],
 	"switch": ["class", "id", "requiredFeatures", "systemLanguage"],
 	"symbol": ["class", "fill", "fill-opacity", "fill-rule", "filter", "font-family", "font-size", "font-style", "font-weight", "id", "opacity", "preserveAspectRatio", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "viewBox"],
 	"text": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "font-family", "font-size", "font-style", "font-weight", "id", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "text-anchor", "transform", "x", "xml:space", "y"],
@ -155,6 +155,7 @@ var isOpera = !!window.opera,
 	"semantics": []
 	},

+
 // console.log('Start profiling')
 // setTimeout(function() {
 // 	canvas.addToSelection(canvas.getVisibleElements());
@ -1557,7 +1558,8 @@ function BatchCommand(text) {
 							&& elem.nodeName == 'image' 
 							&& attr.localName == 'href'
 							&& save_options.images
-							&& save_options.images == 'embed') {
+							&& save_options.images == 'embed')
+						{
 							var img = encodableImages[attrVal];
 							if(img) attrVal = img;
 						}
@ -3056,28 +3058,6 @@ function BatchCommand(text) {
 					});
 					newText.textContent = "text";
 					break;
-				case "foreign":
-					started = true;
-					var newText = addSvgElementFromJson({
-						"element": "foreignObject",
-						"attr": {
-							"x": x,
-							"y": y,
-							"id": getNextId(),
-							"font-size": cur_text.font_size,
-							"width": "24",
-							"height": "24",
-							"style": "pointer-events:inherit"
-						}
-					});
-					var m = svgdoc.createElementNS(mathns, 'math');
-					m.setAttributeNS(xmlnsns, 'xmlns', mathns);
-					m.setAttribute('display', 'inline');
-					var mi = svgdoc.createElementNS(mathns, 'mo');
-					mi.textContent = "\u03A6";
-					m.appendChild(mi);
-					newText.appendChild(m);
-					break;
 				case "path":
 					// Fall through
 				case "pathedit":
@ -3296,14 +3276,6 @@ function BatchCommand(text) {
 						'height': Math.abs(y-start_y*current_zoom)
 					},100);			
 					break;
-				case "foreignObject":
-					assignAttributes(shape,{
-				        'width': 24,
-				        'height': 24,
-						'x': x,
-						'y': y
-					},1000);
-					break;
 				case "text":
 					assignAttributes(shape,{
 						'x': x,
@ -3318,6 +3290,8 @@ function BatchCommand(text) {
 					shape.setAttributeNS(null, "y2", y);
 					if (!window.opera) svgroot.unsuspendRedraw(handle);
 					break;
+				case "foreignObject":
+					// fall through
 				case "square":
 					// fall through
 				case "rect":
@ -3525,7 +3499,7 @@ function BatchCommand(text) {
 					var attrs = $(element).attr(["x1", "x2", "y1", "y2"]);
 					keep = (attrs.x1 != attrs.x2 || attrs.y1 != attrs.y2);
 					break;
-				case "foreign":
+				case "foreignObject":
 				case "square":
 				case "rect":
 				case "image":
@ -3667,7 +3641,7 @@ function BatchCommand(text) {
 				cleanupElement(element);
 				if(current_mode == "path") {
 					pathActions.toEditMode(element);
-				} else if (current_mode == "text" || current_mode == "image" || current_mode == "foreign") {
+				} else if (current_mode == "text" || current_mode == "image" || current_mode == "foreignObject") {
 					// keep us in the tool we were in unless it was a text or image element
 					canvas.addToSelection([element], true);
 				}
@ -5375,6 +5349,15 @@ function BatchCommand(text) {
 			"opacity": cur_shape.opacity,
 			"visibility":"hidden"
 		};
+
+		// any attribute on the element not covered by the above
+		// TODO: make this list global so that we can properly maintain it
+		// TODO: what about @transform, @clip-rule, @fill-rule, etc?
+		$.each(['marker-start', 'marker-end', 'marker-mid', 'filter', 'clip-path'], function() {
+		  if (elem.getAttribute(this)) {
+		      attrs[this] = elem.getAttribute(this);
+		  }
+		});
 		
 		var path = addSvgElementFromJson({
 			"element": "path",
@ -5570,19 +5553,6 @@ function BatchCommand(text) {
 		return svgCanvasToString();
 	};

-	// Function: getForeignString(elt)
-	// Returns the contents of element elt as XML text.
-	//
-	// Parameters:
-	// elt - The foreignObject Element.
-	//
-	// Returns:
-	// The contents of elt as raw XML text.
-	this.getForeignString = function(elt) {
-		var s = svgToString(elt, 0);
-        return s;
-	};
-
 	// Function: setSvgString
 	// This function sets the current drawing as the input SVG XML.
 	//
@ -5694,32 +5664,6 @@ function BatchCommand(text) {
 		return true;
 	};

-	// Function: setForeignString(xmlString, elt)
-	// This function sets the content of element elt to the input XML.
-	//
-	// Parameters:
-	// xmlString - The XML text.
-	// elt - the parent element to append to
-	//
-	// Returns:
-	// This function returns false if the set was unsuccessful, true otherwise.
-	this.setForeignString = function(xmlString, elt) {
-		try {
-			// convert string into XML document
-			var newDoc = Utils.text2xml('<svg xmlns="'+svgns+'" xmlns:xlink="'+xlinkns+'">'+xmlString+'</svg>');
-			// run it through our sanitizer to remove anything we do not support
-	        sanitizeSvg(newDoc.documentElement);
-	        
-	        elt.parentNode.replaceChild(svgdoc.importNode(newDoc.documentElement.firstChild, true), elt);
-			call("changed", [elt]);
-		} catch(e) {
-			console.log(e);
-			return false;
-		}
-
-		return true;
-	};
-
 	// Layer API Functions

 	// Group: Layers
@ -7595,8 +7539,9 @@ function BatchCommand(text) {
 		// manually create a copy of the element
 		var new_el = document.createElementNS(el.namespaceURI, el.nodeName);
 		$.each(el.attributes, function(i, attr) {
-			if (attr.localName != '-moz-math-font-style')
-			  new_el.setAttributeNS(attr.namespaceURI, attr.nodeName, attr.nodeValue);
+			if (attr.localName != '-moz-math-font-style') {
+				new_el.setAttributeNS(attr.namespaceURI, attr.nodeName, attr.nodeValue);
+			}
 		});
 		// set the copied element's new id
 		new_el.removeAttribute("id");
@ -7776,7 +7721,7 @@ function BatchCommand(text) {
 	// Function: getVersion
 	// Returns a string which describes the revision number of SvgCanvas.
 	this.getVersion = function() {
-		return "svgcanvas.js ($Rev: 1391 $)";
+		return "svgcanvas.js ($Rev: 1394 $)";
 	};
 	
 	this.setUiStrings = function(strs) {