small svg and js optimizations

client-data/tools/hand/delete.svg

 <?xml version="1.0" encoding="UTF-8"?>
-<svg role="img" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
- <title>Instagram icon</title>
- <g transform="matrix(2.3668 2.3668 -2.3668 2.3668 13.98 -131.11)" fill="#ff002d">
-  <g transform="translate(-.5821 .16648)" fill="#f00">
-   <rect transform="scale(1,-1)" x="30.056" y="-33.755" width=".6819" height="6.5387" ry=".34186"/>
-   <rect transform="matrix(0,1,1,0,0,0)" x="30.145" y="27.128" width=".6819" height="6.5387" ry=".34186"/>
-  </g>
- </g>
- <metadata>
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:title>Delete icon</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
+<svg role="img" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" id="root">
+    <title>Delete</title>
+    <path stroke="red" stroke-width="2" d="M 2 2 L 22 22 M 2 22 L 22 2"></path>
 </svg>

client-data/tools/hand/duplicate.svg

 <?xml version="1.0" encoding="UTF-8"?>
-<svg role="img" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
- <title>Instagram icon</title>
- <path d="m7.1549 7.1542v-3.5315c0-0.65725 0.52912-1.1864 1.1864-1.1864h11.991c0.65725 0 1.1864 0.52912 1.1864 1.1864v12.036c0 0.65725-0.52912 1.1864-1.1864 1.1864h-3.4867" fill="none" stroke="#000" stroke-linejoin="round" stroke-width=".3"/>
- <rect x="2.481" y="7.155" width="14.364" height="14.409" ry="1.1864" fill="none" stroke="#000" stroke-linejoin="round" stroke-width=".3"/>
- <g transform="translate(-20.734 -16.126)">
-  <rect transform="scale(1,-1)" x="30.056" y="-33.755" width=".6819" height="6.5387" ry=".34186"/>
-  <rect transform="matrix(0,1,1,0,0,0)" x="30.145" y="27.128" width=".6819" height="6.5387" ry=".34186"/>
- </g>
- <metadata>
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:title>Duplicate icon</dc:title>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
+<svg role="img" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" id="root">
+    <title>Duplicate</title>
+    <path d="m7.1549 7.1542v-3.5315c0-0.65725 0.52912-1.1864 1.1864-1.1864h11.991c0.65725 0 1.1864 0.52912 1.1864 1.1864v12.036c0 0.65725-0.52912 1.1864-1.1864 1.1864h-3.4867" fill="none" stroke="#000" stroke-linejoin="round" stroke-width=".3" />
+    <rect x="2.481" y="7.155" width="14.364" height="14.409" ry="1.1864" fill="none" stroke="#000" stroke-linejoin="round" stroke-width=".3" />
+    <rect transform="translate(-20.734 -16.126) scale(1,-1)" x="30.056" y="-33.755" width=".6819" height="6.5387" ry=".34186" />
+    <rect transform="translate(-20.734 -16.126) matrix(0,1,1,0,0,0)" x="30.145" y="27.128" width=".6819" height="6.5387" ry=".34186" />
 </svg>

client-data/tools/hand/hand.js

 	var selectorState = selectorStates.pointing;
 	var last_sent = 0;
 	var blockedSelectionButtons = Tools.server_config.BLOCKED_SELECTION_BUTTONS;
-	var selectionButtons = {};
-
-	selectionButtons["delete"] = createButton("delete", "delete", 22, 22,
-		function (me, bbox, s) {
-			me.width.baseVal.value = me.origWidth / s;
-			me.height.baseVal.value = me.origHeight / s;
-			me.x.baseVal.value = bbox.r[0];
-			me.y.baseVal.value = bbox.r[1] - (me.origHeight + 3) / s;
-			me.style.display = "";
-		},
-		deleteSelection);
-
-	selectionButtons["duplicate"] = createButton("duplicate", "duplicate", 22, 22,
-		function (me, bbox, s) {
-			me.width.baseVal.value = me.origWidth / s;
-			me.height.baseVal.value = me.origHeight / s;
-			me.x.baseVal.value = bbox.r[0] + (me.origWidth + 2) / s;
-			me.y.baseVal.value = bbox.r[1] - (me.origHeight + 3) / s;
-			me.style.display = "";
-		},
-		duplicateSelection);
-	selectionButtons["scale"] = createButton("scaleHandle", "handle", 14, 14,
-		function (me, bbox, s) {
-			me.width.baseVal.value = me.origWidth / s;
-			me.height.baseVal.value = me.origHeight / s;
-			me.x.baseVal.value = bbox.r[0] + bbox.a[0] - me.origWidth / (2 * s);
-			me.y.baseVal.value = bbox.r[1] + bbox.b[1] - me.origHeight / (2 * s);
-			me.style.display = "";
-		},
-		startScalingTransform);
+	var selectionButtons = [
+		createButton("delete", "delete", 24, 24,
+			function (me, bbox, s) {
+				me.width.baseVal.value = me.origWidth / s;
+				me.height.baseVal.value = me.origHeight / s;
+				me.x.baseVal.value = bbox.r[0];
+				me.y.baseVal.value = bbox.r[1] - (me.origHeight + 3) / s;
+				me.style.display = "";
+			},
+			deleteSelection),
+
+		createButton("duplicate", "duplicate", 24, 24,
+			function (me, bbox, s) {
+				me.width.baseVal.value = me.origWidth / s;
+				me.height.baseVal.value = me.origHeight / s;
+				me.x.baseVal.value = bbox.r[0] + (me.origWidth + 2) / s;
+				me.y.baseVal.value = bbox.r[1] - (me.origHeight + 3) / s;
+				me.style.display = "";
+			},
+			duplicateSelection),
+
+		createButton("scaleHandle", "handle", 14, 14,
+			function (me, bbox, s) {
+				me.width.baseVal.value = me.origWidth / s;
+				me.height.baseVal.value = me.origHeight / s;
+				me.x.baseVal.value = bbox.r[0] + bbox.a[0] - me.origWidth / (2 * s);
+				me.y.baseVal.value = bbox.r[1] + bbox.b[1] - me.origHeight / (2 * s);
+				me.style.display = "";
+			},
+			startScalingTransform)
+	];
 
 	for (i in blockedSelectionButtons) {
 		delete selectionButtons[blockedSelectionButtons[i]];
 	}
-	selectionButtons = Object.keys(selectionButtons).map(function (k) {
-		return selectionButtons[k];
-	});
 
 	var getScale = Tools.getScale;
 
 	}
 
 	function createButton(name, icon, width, height, drawCallback, clickCallback) {
-		var shape = Tools.createSVGElement("image", {
-			id: name + "Icon",
-			href: "tools/hand/" + icon + ".svg",
-			width: width,
-			height: height,
-		});
+		var shape = Tools.createSVGElement("use", {href: "tools/hand/" + icon + ".svg#root"});
 		shape.style.display = "none";
 		shape.origWidth = width;
 		shape.origHeight = height;
 
 	function clickSelector(x, y, evt) {
 		selectionRect = selectionRect || createSelectorRect();
-		var button = null;
 		for (var i = 0; i < selectionButtons.length; i++) {
 			if (selectionButtons[i].contains(evt.target)) {
-				button = selectionButtons[i];
+				var button = selectionButtons[i];
 			}
 		}
 		if (button) {