From 72b214e5b8223bda2fe25eef7a9e3fa7d5936ccd Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Tue, 28 Jul 2015 17:11:20 +0200
Subject: [PATCH] group elements in wheelbarrow svg

---
 app/templates/components/not-active.hbs | 116 +++++++++++-------------
 1 file changed, 52 insertions(+), 64 deletions(-)

diff --git a/app/templates/components/not-active.hbs b/app/templates/components/not-active.hbs
index 49e2de8c..58d44bf2 100644
--- a/app/templates/components/not-active.hbs
+++ b/app/templates/components/not-active.hbs
@@ -2,72 +2,60 @@
   <figure class="page-graphic">
     <svg version="1.1" id="wheelbarrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 229.5 161.9" enable-background="new 0 0 229.5 161.9" xml:space="preserve">
-      <g>
+      <g id="background">
+        <path fill="#FBF2EE" d="M187.2,161.8c11.4-16.6,18.1-36.6,18.1-58.3c0-56.7-46-102.7-102.7-102.7S0,46.8,0,103.5
+          c0,21.6,6.7,41.7,18.1,58.3H187.2z"/>
+        <path fill="#F8E9E1" d="M1,117.4c2.2,16.3,8.2,31.4,17.2,44.4h169c8.9-12.9,15-28,17.2-44.4H1z"/>
+        <path fill="#F5DFD5" d="M161.8,145.5h-17.4c-3.8-2.2-11.9-3.8-21.3-3.8H62.4c-12.9,0-23.5,3-23.5,6.6s10.6,6.6,23.5,6.6h60.7
+          c8.7,0,16.3-1.3,20.3-3.3h18.4c12.9,0,23.5-1.4,23.5-3S174.7,145.5,161.8,145.5z"/>
+      </g>
+      <g id="small-box">
+        <rect x="98.8" y="-3.2" transform="matrix(-4.897701e-02 -0.9988 0.9988 -4.897701e-02 90.8137 124.1608)" fill="#CEBBA3" width="11.5" height="44.2"/>
+        <rect x="83.4" y="24.6" transform="matrix(-0.9988 4.897700e-02 -4.897700e-02 -0.9988 212.7201 71.7633)" fill="#C1AF9A" width="44.2" height="27.8"/>
+        <rect x="83.4" y="24.7" transform="matrix(-0.9988 4.897700e-02 -4.897700e-02 -0.9988 212.7438 72.0846)" fill="#C1AF9A" width="44.2" height="27.8"/>
+        <line fill="none" stroke="#B29C8B" stroke-miterlimit="10" x1="104" y1="13.2" x2="104.6" y2="24.5"/>
+        <rect x="82.8" y="24.3" transform="matrix(-0.9988 4.897700e-02 -4.897700e-02 -0.9988 210.821 45.969)" fill="#B29C8B" width="44.2" height="2.6"/>
+        <polygon opacity="0.5" fill="#FFFFFF" points="101.7,33.4 103.4,31.6 105.2,33.3 106.9,31.4 108.7,33.1 110.3,31.3 109.4,12.8 
+        99.1,13.3 100,31.9        "/>
+      </g>
+
+      <g id="big-box">
         <g>
-          <path fill="#FBF2EE" d="M187.2,161.8c11.4-16.6,18.1-36.6,18.1-58.3c0-56.7-46-102.7-102.7-102.7S0,46.8,0,103.5
-            c0,21.6,6.7,41.7,18.1,58.3H187.2z"/>
-          <path fill="#F8E9E1" d="M1,117.4c2.2,16.3,8.2,31.4,17.2,44.4h169c8.9-12.9,15-28,17.2-44.4H1z"/>
-          <path fill="#F5DFD5" d="M161.8,145.5h-17.4c-3.8-2.2-11.9-3.8-21.3-3.8H62.4c-12.9,0-23.5,3-23.5,6.6s10.6,6.6,23.5,6.6h60.7
-            c8.7,0,16.3-1.3,20.3-3.3h18.4c12.9,0,23.5-1.4,23.5-3S174.7,145.5,161.8,145.5z"/>
-          <g>
-            <g>
-              <g>
-                
-                  <rect x="98.8" y="-3.2" transform="matrix(-4.897701e-02 -0.9988 0.9988 -4.897701e-02 90.8137 124.1608)" fill="#CEBBA3" width="11.5" height="44.2"/>
-                
-                  <rect x="83.4" y="24.6" transform="matrix(-0.9988 4.897700e-02 -4.897700e-02 -0.9988 212.7201 71.7633)" fill="#C1AF9A" width="44.2" height="27.8"/>
-              </g>
-              
-                <rect x="83.4" y="24.7" transform="matrix(-0.9988 4.897700e-02 -4.897700e-02 -0.9988 212.7438 72.0846)" fill="#C1AF9A" width="44.2" height="27.8"/>
-              <line fill="none" stroke="#B29C8B" stroke-miterlimit="10" x1="104" y1="13.2" x2="104.6" y2="24.5"/>
-              
-                <rect x="82.8" y="24.3" transform="matrix(-0.9988 4.897700e-02 -4.897700e-02 -0.9988 210.821 45.969)" fill="#B29C8B" width="44.2" height="2.6"/>
-              <polygon opacity="0.5" fill="#FFFFFF" points="101.7,33.4 103.4,31.6 105.2,33.3 106.9,31.4 108.7,33.1 110.3,31.3 109.4,12.8 
-                99.1,13.3 100,31.9        "/>
-            </g>
-            <g>
-              <g>
-                
-                  <rect x="94.3" y="19.8" transform="matrix(-0.1045 -0.9945 0.9945 -0.1045 53.6543 167.2791)" fill="#CEBBA3" width="15.6" height="79.3"/>
-                
-                  <rect x="65.2" y="67.1" transform="matrix(-0.9945 0.1045 -0.1045 -0.9945 218.2397 160.4247)" fill="#C1AF9A" width="79.3" height="37.6"/>
-              </g>
-              
-                <rect x="65.3" y="67.3" transform="matrix(-0.9945 0.1045 -0.1045 -0.9945 218.3078 160.8546)" fill="#C1AF9A" width="79.3" height="37.6"/>
-              
-                <rect x="63.4" y="66.8" transform="matrix(-0.9945 0.1045 -0.1045 -0.9945 212.7737 125.9179)" fill="#B29C8B" width="79.3" height="3.5"/>
-              <polygon opacity="0.5" fill="#FFFFFF" points="99.5,79.4 101.6,76.8 104.2,78.9 106.3,76.3 108.9,78.4 110.9,75.9 108.3,51 
-                94.4,52.5 97,77.4         "/>
-            </g>
-            <g>
-              <path fill="#B5B8BA" d="M133.8,151.4c0.4,0,0.7,0,1-0.2c1.8-0.7,1.9-3.1,1.9-4.1l1.9-33.8L135,113l-1.9,33.5
-                c-3.4-4.1-15.9-20.3-20.9-26.8l-2.9,2.2c0.8,1.1,19.9,25.9,21.8,27.9C132.1,150.8,133,151.3,133.8,151.4z"/>
-            </g>
-            <g>
-              <path fill="#DD6C44" d="M56.7,136.6c0.3,0,0.7,0,1.1-0.1l169.2-48c1.8-0.5,2.8-2.3,2.4-4.1c-0.5-1.8-2.3-2.8-4.1-2.4L56,130
-                c-1.8,0.5-2.8,2.3-2.4,4.1C54,135.5,55.3,136.5,56.7,136.6z"/>
-            </g>
-            <path fill="#9A9C9F" d="M112.2,119.7l-2.9,2.2c0.2,0.2,1.3,1.6,2.8,3.7l3.8-1.1C114.5,122.6,113.2,120.9,112.2,119.7z"/>
-            <polygon fill="#9A9C9F" points="135,113 134.7,119.3 138.4,118.3 138.7,113.2       "/>
-            <circle fill="#313233" cx="56.1" cy="133.2" r="19.8"/>
-            <circle fill="#B5B8BA" cx="56.3" cy="133" r="10.8"/>
-            <path fill="#9A9C9F" d="M56.8,122.2c-2.8-0.1-5.4,0.8-7.4,2.4c0.7-0.1,1.4-0.1,2.2-0.1c7.1,0.3,12.6,6.4,12.3,13.5
-              c-0.1,1.1-0.2,2.1-0.5,3.1c2.1-1.9,3.5-4.6,3.7-7.6C67.4,127.5,62.8,122.5,56.8,122.2z"/>
-            <g>
-              <path fill="#DD6C44" d="M56.7,136.6c0.3,0,0.7,0,1.1-0.1l169.2-48c1.8-0.5,2.8-2.3,2.4-4.1c-0.5-1.8-2.3-2.8-4.1-2.4L56,130
-                c-1.8,0.5-2.8,2.3-2.4,4.1C54,135.5,55.3,136.5,56.7,136.6z"/>
-            </g>
-            <path fill="#C82F27" d="M156.1,76.4l-5,20.9c0,0-0.7,8.2-10,11.2c-9.3,2.9-53.7,15.2-53.7,15.2s-9.3,2.6-16.6-5.7
-              S48.4,87.2,48.4,87.2L156.1,76.4z"/>
-            <g>
-              <path fill="#D64727" d="M46.1,88.9c0.1,0,0.3,0,0.4,0l112.1-12.1c1.5-0.2,2.6-1.5,2.4-3c-0.2-1.5-1.5-2.6-3-2.4L46,83.4
-                c-1.5,0.2-2.6,1.5-2.4,3C43.7,87.8,44.8,88.8,46.1,88.9z"/>
-            </g>
-            <path fill="#BC2A26" d="M49.3,88.6c0.7,1,1.8,2.6,3,4.4L154.8,82l1.2-4.9L49.3,88.6z"/>
-            <polygon fill="#B29C8B" points="66.6,70.8 63.2,68.5 63.6,72.6       "/>
-            <polygon fill="#B29C8B" points="139.3,63 142.1,60 142.5,64.2      "/>
-          </g>
+          <rect x="94.3" y="19.8" transform="matrix(-0.1045 -0.9945 0.9945 -0.1045 53.6543 167.2791)" fill="#CEBBA3" width="15.6" height="79.3"/>
+          <rect x="65.2" y="67.1" transform="matrix(-0.9945 0.1045 -0.1045 -0.9945 218.2397 160.4247)" fill="#C1AF9A" width="79.3" height="37.6"/>
         </g>
+        <rect x="65.3" y="67.3" transform="matrix(-0.9945 0.1045 -0.1045 -0.9945 218.3078 160.8546)" fill="#C1AF9A" width="79.3" height="37.6"/>
+      
+        <rect x="63.4" y="66.8" transform="matrix(-0.9945 0.1045 -0.1045 -0.9945 212.7737 125.9179)" fill="#B29C8B" width="79.3" height="3.5"/>
+        <polygon opacity="0.5" fill="#FFFFFF" points="99.5,79.4 101.6,76.8 104.2,78.9 106.3,76.3 108.9,78.4 110.9,75.9 108.3,51 
+          94.4,52.5 97,77.4         "/>
+      </g>
+
+      <g id="wheelbarrow">
+        <path fill="#B5B8BA" d="M133.8,151.4c0.4,0,0.7,0,1-0.2c1.8-0.7,1.9-3.1,1.9-4.1l1.9-33.8L135,113l-1.9,33.5
+          c-3.4-4.1-15.9-20.3-20.9-26.8l-2.9,2.2c0.8,1.1,19.9,25.9,21.8,27.9C132.1,150.8,133,151.3,133.8,151.4z"/>
+        <path fill="#DD6C44" d="M56.7,136.6c0.3,0,0.7,0,1.1-0.1l169.2-48c1.8-0.5,2.8-2.3,2.4-4.1c-0.5-1.8-2.3-2.8-4.1-2.4L56,130
+          c-1.8,0.5-2.8,2.3-2.4,4.1C54,135.5,55.3,136.5,56.7,136.6z"/>
+        
+        <path fill="#9A9C9F" d="M112.2,119.7l-2.9,2.2c0.2,0.2,1.3,1.6,2.8,3.7l3.8-1.1C114.5,122.6,113.2,120.9,112.2,119.7z"/>
+        <polygon fill="#9A9C9F" points="135,113 134.7,119.3 138.4,118.3 138.7,113.2"/>
+        <circle fill="#313233" cx="56.1" cy="133.2" r="19.8"/>
+        <circle fill="#B5B8BA" cx="56.3" cy="133" r="10.8"/>
+        <path fill="#9A9C9F" d="M56.8,122.2c-2.8-0.1-5.4,0.8-7.4,2.4c0.7-0.1,1.4-0.1,2.2-0.1c7.1,0.3,12.6,6.4,12.3,13.5
+          c-0.1,1.1-0.2,2.1-0.5,3.1c2.1-1.9,3.5-4.6,3.7-7.6C67.4,127.5,62.8,122.5,56.8,122.2z"/>
+        <g>
+          <path fill="#DD6C44" d="M56.7,136.6c0.3,0,0.7,0,1.1-0.1l169.2-48c1.8-0.5,2.8-2.3,2.4-4.1c-0.5-1.8-2.3-2.8-4.1-2.4L56,130
+            c-1.8,0.5-2.8,2.3-2.4,4.1C54,135.5,55.3,136.5,56.7,136.6z"/>
+        </g>
+        <path fill="#C82F27" d="M156.1,76.4l-5,20.9c0,0-0.7,8.2-10,11.2c-9.3,2.9-53.7,15.2-53.7,15.2s-9.3,2.6-16.6-5.7
+          S48.4,87.2,48.4,87.2L156.1,76.4z"/>
+        <g>
+          <path fill="#D64727" d="M46.1,88.9c0.1,0,0.3,0,0.4,0l112.1-12.1c1.5-0.2,2.6-1.5,2.4-3c-0.2-1.5-1.5-2.6-3-2.4L46,83.4
+            c-1.5,0.2-2.6,1.5-2.4,3C43.7,87.8,44.8,88.8,46.1,88.9z"/>
+        </g>
+        <path fill="#BC2A26" d="M49.3,88.6c0.7,1,1.8,2.6,3,4.4L154.8,82l1.2-4.9L49.3,88.6z"/>
+        <polygon fill="#B29C8B" points="66.6,70.8 63.2,68.5 63.6,72.6"/>
+        <polygon fill="#B29C8B" points="139.3,63 142.1,60 142.5,64.2"/>
       </g>
     </svg>
   </figure>