Add zooming feature.

By carloslfu.

media/sprites.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64px" height="92px">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="96px" height="124px">
   <style type="text/css">
 #background {
   fill: none;
@@ -8,7 +8,7 @@
   fill: #000;
   stroke: none;
 }
-.selected .arrows {
+.selected>.arrows {
   fill: #fff;
 }
 .checkmark {
@@ -19,9 +19,19 @@
 }
 .trash {
   fill: #888;
+}
+.zoom {
+  fill: none;
+  stroke: #888;
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+.zoom>.center {
+  fill: #888;
+  stroke-width: 0;
 }
   </style>
-  <rect id="background" width="64" height="92" x="0" y="0" />
+  <rect id="background" width="96" height="124" x="0" y="0" />
 
   <g>
     <path class="arrows" d="M 13,1.5 13,14.5 1.74,8 z" />
@@ -41,4 +51,24 @@
     <rect width="36" height="20" x="5" y="50" />
     <rect width="36" height="42" x="5" y="50" rx="4" ry="4" />
   </g>
+
+  <g class="zoom">
+    <circle r="11.5" cx="16" cy="108" />
+    <circle r="4.3" cx="16" cy="108" class="center" />
+    <path d="m 28,108 h3" />
+    <path d="m 1,108 h3" />
+    <path d="m 16,120 v3" />
+    <path d="m 16,93 v3" />
+  </g>
+
+  <g class="zoom">
+    <circle r="15" cx="48" cy="108" />
+    <path d="m 48,101.6 v12.8" />
+    <path d="m 41.6,108 h12.8" />
+  </g>
+
+  <g class="zoom">
+    <circle r="15" cx="80" cy="108" />
+    <path d="m 73.6,108 h12.8" />
+  </g>
 </svg>