From c1d9dbed0d3c8b67352c27264ce26bfe4167a310 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Thu, 25 Sep 2014 17:15:47 +0200
Subject: [PATCH] Optimized SVGS to be path instead of object dependant

---
 app/svg/logo-optimized.svg |  20 ++---
 app/svg/logo.svg           | 164 +++++--------------------------------
 app/svg/spinner.svg        | 150 ++++++++++++++++-----------------
 3 files changed, 101 insertions(+), 233 deletions(-)

diff --git a/app/svg/logo-optimized.svg b/app/svg/logo-optimized.svg
index 43497265..b1438bde 100644
--- a/app/svg/logo-optimized.svg
+++ b/app/svg/logo-optimized.svg
@@ -1,4 +1,4 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg4647" version="1.1" viewBox=".." preserveAspectRatio="xMidYMid meet">
+<svg xmlns:svg="http://www.w3.org/2000/svg"  id="svg4647" version="1.1" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet">
   <defs id="defs4649"/>
   <metadata id="metadata4652"/>
   <style>
@@ -13,19 +13,19 @@
       <g transform="matrix(1.1783562,0,0,1.1783562,2450.4425,-1298.9778)" id="g6368" display="inline">
         <g id="g6358" transform="translate(-905.09668,1190.7678)">
           <g class="bottom">
-              <rect transform="matrix(-0.1406648,0.99005728,-0.99005728,0.14066481,0,0)" y="453.99191" x="19.390564" height="263.03665" width="263.03665" id="rect6306" style="fill-opacity:1;fill:#fff;opacity:0.7"/>
-              <rect transform="matrix(0.1406648,-0.99005728,0.99005728,-0.14066481,0,0)" y="-980.32068" x="-545.35144" height="263.03665" width="263.03665" id="rect6298" style="fill-opacity:1;fill:#fff;opacity:0.5"/>
-              <rect transform="matrix(0.99005728,0.1406648,0.14066481,0.99005728,0,0)" y="239.36371" x="-1091.8109" height="263.03665" width="263.03665" id="rect6290" style="fill-opacity:1;fill:#fff;opacity:0.7"/>
-              <rect transform="matrix(-0.99005728,-0.1406648,-0.14066481,-0.99005728,0,0)" y="-765.04388" x="565.75031" height="263.03665" width="263.03665" id="rect6302" style="fill-opacity:1;fill:#fff;opacity:0.5"/>
+              <rect transform="matrix(-0.1406648,0.99005728,-0.99005728,0.14066481,0,0)" y="453.99191" x="19.390564" id="rect6306" style="fill-opacity:1;fill:#fff;opacity:0.7"/>
+              <rect transform="matrix(0.1406648,-0.99005728,0.99005728,-0.14066481,0,0)" y="-980.32068" x="-545.35144" id="rect6298" style="fill-opacity:1;fill:#fff;opacity:0.5"/>
+              <rect transform="matrix(0.99005728,0.1406648,0.14066481,0.99005728,0,0)" y="239.36371" x="-1091.8109" id="rect6290" style="fill-opacity:1;fill:#fff;opacity:0.7"/>
+              <rect transform="matrix(-0.99005728,-0.1406648,-0.14066481,-0.99005728,0,0)" y="-765.04388" x="565.75031" id="rect6302" style="fill-opacity:1;fill:#fff;opacity:0.5"/>
           </g>
           <g class="top">
-              <rect id="rect6300" width="263.03665" height="263.03665" x="123.24944" y="-1124.9786" transform="matrix(-0.60061118,-0.79954125,0.60061117,-0.79954125,0,0)" />
-              <rect id="rect6304" width="263.03665" height="263.03665" x="522.39832" y="-110.13736" transform="matrix(-0.79954125,0.60061118,-0.79954125,-0.60061117,0,0)" />
-              <rect id="rect6288" width="263.03665" height="263.03665" x="-649.58295" y="599.28192" transform="matrix(0.60061118,0.79954125,-0.60061118,0.79954125,0,0)" />
-              <rect id="rect6296" width="263.03665" height="263.03665" x="-1048.9221" y="-415.20911" transform="matrix(0.79954125,-0.60061118,0.79954125,0.60061117,0,0)" />
+              <rect id="rect6300" x="123.24944" y="-1124.9786" transform="matrix(-0.60061118,-0.79954125,0.60061117,-0.79954125,0,0)" />
+              <rect id="rect6304" x="522.39832" y="-110.13736" transform="matrix(-0.79954125,0.60061118,-0.79954125,-0.60061117,0,0)" />
+              <rect id="rect6288" x="-649.58295" y="599.28192" transform="matrix(0.60061118,0.79954125,-0.60061118,0.79954125,0,0)" />
+              <rect id="rect6296" x="-1048.9221" y="-415.20911" transform="matrix(0.79954125,-0.60061118,0.79954125,0.60061117,0,0)" />
           </g>
         </g>
-        <rect id="rect6286" width="141.42136" height="141.42136" x="-130.17999" y="2210.6592" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" style="fill-opacity:1;fill:#fff"/>
+        <rect id="rect6286" x="-130.17999" y="2210.6592" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" style="fill-opacity:1;fill:#fff"/>
       </g>
     </g>
   </g>
diff --git a/app/svg/logo.svg b/app/svg/logo.svg
index cc0be845..346d8115 100644
--- a/app/svg/logo.svg
+++ b/app/svg/logo.svg
@@ -1,147 +1,23 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-     xmlns:dc="http://purl.org/dc/elements/1.1/"
-     xmlns:cc="http://creativecommons.org/ns#"
-     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-     xmlns:svg="http://www.w3.org/2000/svg"
-     xmlns="http://www.w3.org/2000/svg"
-     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-     width="134.24667"
-     height="134.26709"
-     id="svg4647"
-     version="1.1"
-     inkscape:version="0.48.5 r10040"
-     sodipodi:docname="New document 13">
-    <defs
-         id="defs4649" />
-    <sodipodi:namedview
-         id="base"
-         pagecolor="#ffffff"
-         bordercolor="#666666"
-         borderopacity="1.0"
-         inkscape:pageopacity="0.0"
-         inkscape:pageshadow="2"
-         inkscape:zoom="0.35"
-         inkscape:cx="67.123334"
-         inkscape:cy="67.133542"
-         inkscape:document-units="px"
-         inkscape:current-layer="layer1"
-         showgrid="false"
-         fit-margin-top="0"
-         fit-margin-left="0"
-         fit-margin-right="0"
-         fit-margin-bottom="0"
-         inkscape:window-width="501"
-         inkscape:window-height="456"
-         inkscape:window-x="1920"
-         inkscape:window-y="590"
-         inkscape:window-maximized="0" />
-    <metadata
-         id="metadata4652">
-        <rdf:RDF>
-            <cc:Work
-                 rdf:about="">
-                <dc:format>image/svg+xml</dc:format>
-                <dc:type
-                     rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-                <dc:title></dc:title>
-            </cc:Work>
-        </rdf:RDF>
-    </metadata>
-    <g
-         inkscape:label="Layer 1"
-         inkscape:groupmode="layer"
-         id="layer1"
-         transform="translate(-307.87667,-465.22863)">
-        <g
-             style="display:inline"
-             transform="matrix(0.135464,0,0,0.135464,307.268,457.53699)"
-             id="layer1-1"
-             inkscape:label="Capa 1">
-            <g
-                 transform="matrix(1.1783562,0,0,1.1783562,2450.4425,-1298.9778)"
-                 id="g6368"
-                 style="display:inline">
-                <g
-                     id="g6358"
-                     transform="translate(-905.09668,1190.7678)">
-                    <rect
-                         transform="matrix(-0.1406648,0.99005728,-0.99005728,0.14066481,0,0)"
-                         y="453.99191"
-                         x="19.390564"
-                         height="263.03665"
-                         width="263.03665"
-                         id="rect6306"
-                         style="opacity:0.7;fill:#ffffff;fill-opacity:1;stroke:none" />
-                    <rect
-                         transform="matrix(0.1406648,-0.99005728,0.99005728,-0.14066481,0,0)"
-                         y="-980.32068"
-                         x="-545.35144"
-                         height="263.03665"
-                         width="263.03665"
-                         id="rect6298"
-                         style="opacity:0.5;fill:#ffffff;fill-opacity:1;stroke:none" />
-                    <rect
-                         transform="matrix(0.99005728,0.1406648,0.14066481,0.99005728,0,0)"
-                         y="239.36371"
-                         x="-1091.8109"
-                         height="263.03665"
-                         width="263.03665"
-                         id="rect6290"
-                         style="opacity:0.7;fill:#ffffff;fill-opacity:1;stroke:none" />
-                    <rect
-                         transform="matrix(-0.99005728,-0.1406648,-0.14066481,-0.99005728,0,0)"
-                         y="-765.04388"
-                         x="565.75031"
-                         height="263.03665"
-                         width="263.03665"
-                         id="rect6302"
-                         style="opacity:0.5;fill:#ffffff;fill-opacity:1;stroke:none" />
-                    <rect
-                         style="opacity:0.4;fill:#ffffff;fill-opacity:1;stroke:none"
-                         id="rect6300"
-                         width="263.03665"
-                         height="263.03665"
-                         x="123.24944"
-                         y="-1124.9786"
-                         transform="matrix(-0.60061118,-0.79954125,0.60061117,-0.79954125,0,0)" />
-                    <rect
-                         style="opacity:0.6;fill:#ffffff;fill-opacity:1;stroke:none"
-                         id="rect6304"
-                         width="263.03665"
-                         height="263.03665"
-                         x="522.39832"
-                         y="-110.13736"
-                         transform="matrix(-0.79954125,0.60061118,-0.79954125,-0.60061117,0,0)" />
-                    <rect
-                         style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none"
-                         id="rect6288"
-                         width="263.03665"
-                         height="263.03665"
-                         x="-649.58295"
-                         y="599.28192"
-                         transform="matrix(0.60061118,0.79954125,-0.60061118,0.79954125,0,0)" />
-                    <rect
-                         style="opacity:0.6;fill:#ffffff;fill-opacity:1;stroke:none"
-                         id="rect6296"
-                         width="263.03665"
-                         height="263.03665"
-                         x="-1048.9221"
-                         y="-415.20911"
-                         transform="matrix(0.79954125,-0.60061118,0.79954125,0.60061117,0,0)" />
-                </g>
-                <rect
-                     style="fill:#ffffff;fill-opacity:1;stroke:none"
-                     id="rect6286"
-                     width="141.42136"
-                     height="141.42136"
-                     x="-130.17999"
-                     y="2210.6592"
-                     transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" />
-            </g>
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134.2 134.3" version="1.1" preserveAspectRatio="xMidYMid meet">
+    <style>
+        path {
+            fill:#f5f5f5;
+            opacity:0.7;
+        }
+    </style>
+    <g transform="translate(-307.87667,-465.22863)">
+        <g class="bottom">
+            <path transform="matrix(-0.14066483,0.99005727,-0.99005727,0.14066483,0,0)" d="m561.8-506.6 42 0 0 42-42 0z" />
+            <path transform="matrix(0.14066483,-0.99005727,0.99005727,-0.14066483,0,0)" d="m-645.7 422.6 42 0 0 42-42 0z" />
+            <path transform="matrix(0.99005727,0.14066483,0.14066483,0.99005727,0,0)" d="m266.6 451.9 42 0 0 42-42 0z" />
+            <path transform="matrix(-0.99005727,-0.14066483,-0.14066483,-0.99005727,0,0)" d="m-350.6-535.9 42 0 0 42-42 0z" />
+        </g>
+        <g class="top">
+            <path transform="matrix(-0.60061118,-0.79954125,0.60061118,-0.79954125,0,0)" d="m-687.1-62.7 42 0 0 42-42 0z" />
+            <path transform="matrix(-0.79954125,0.60061118,-0.79954125,-0.60061118,0,0)" d="m166.6-719.6 42 0 0 42-42 0z" />
+            <path transform="matrix(0.60061118,0.79954125,-0.60061118,0.79954125,0,0)" d="m603.1-21.3 42 0 0 42-42 0z" />
+            <path transform="matrix(0.79954125,-0.60061118,0.79954125,0.60061118,0,0)" d="m-250.7 635.8 42 0 0 42-42 0z" />
+            <path transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" d="m630.3 100 22.6 0 0 22.6-22.6 0z" />
         </g>
     </g>
 </svg>
diff --git a/app/svg/spinner.svg b/app/svg/spinner.svg
index dd74f589..56e73072 100644
--- a/app/svg/spinner.svg
+++ b/app/svg/spinner.svg
@@ -1,82 +1,74 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg4647" version="1.1" viewBox=".." preserveAspectRatio="xMidYMid meet">
-  <defs id="defs4649"/>
-  <metadata id="metadata4652"/>
-  <style>
-      .top {
-          transform-origin: 193px 164px;
-          -webkit-animation: rotate 4s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
-          -webkit-transform-origin: 50% 50%;
-          animation: rotate 6s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
-      }
-      .bottom rect {
-          fill-opacity: 1;
-          fill: #9dce0a;
-          opacity: .2;
-      }
-      .top rect {
-          fill-opacity: 1;
-          fill: #9dce0a;
-          opacity: .6;
-          animation: colorize 10s linear infinite alternate;
-          -webkit-animation: colorize 10s linear infinite alternate;
-      }
-      .braktearo {
-          fill-opacity: 1;
-          fill: #9dce0a;
-          opacity: .9;
-      }
-      @-webkit-keyframes rotate {
-          50% {
-              -webkit-transform: rotate(360deg);
-          }
-      }
-      @keyframes rotate {
-          50% {
-              transform: rotate(360deg);
-          }
-      }
-      @-webkit-keyframes colorize {
-          0% {
-              opacity: .6;
-          }
-          60% {
-              opacity: .0;
-          }
-          80% {
-              opacity: .6;
-          }
-      }
-      @keyframes colorize {
-          0% {
-              opacity: .6;
-          }
-          60% {
-              opacity: .0;
-          }
-          80% {
-              opacity: .6;
-          }
-      }
-  </style>
-  <g id="layer1" transform="translate(-307.87667,-465.22863)">
-    <g transform="matrix(0.135464,0,0,0.135464,307.268,457.53699)" id="layer1-1" display="inline">
-      <g transform="matrix(1.1783562,0,0,1.1783562,2450.4425,-1298.9778)" id="g6368" display="inline">
-        <g id="g6358" transform="translate(-905.09668,1190.7678)">
-          <g class="bottom">
-              <rect transform="matrix(-0.1406648,0.99005728,-0.99005728,0.14066481,0,0)" y="453.99191" x="19.390564" height="263.03665" width="263.03665" id="rect6306" />
-              <rect transform="matrix(0.1406648,-0.99005728,0.99005728,-0.14066481,0,0)" y="-980.32068" x="-545.35144" height="263.03665" width="263.03665" id="rect6298" />
-              <rect transform="matrix(0.99005728,0.1406648,0.14066481,0.99005728,0,0)" y="239.36371" x="-1091.8109" height="263.03665" width="263.03665" id="rect6290" />
-              <rect transform="matrix(-0.99005728,-0.1406648,-0.14066481,-0.99005728,0,0)" y="-765.04388" x="565.75031" height="263.03665" width="263.03665" id="rect6302" />
-          </g>
-          <g class="top">
-              <rect id="rect6300" width="263.03665" height="263.03665" x="123.24944" y="-1124.9786" transform="matrix(-0.60061118,-0.79954125,0.60061117,-0.79954125,0,0)" />
-              <rect id="rect6304" width="263.03665" height="263.03665" x="522.39832" y="-110.13736" transform="matrix(-0.79954125,0.60061118,-0.79954125,-0.60061117,0,0)" />
-              <rect id="rect6288" width="263.03665" height="263.03665" x="-649.58295" y="599.28192" transform="matrix(0.60061118,0.79954125,-0.60061118,0.79954125,0,0)" />
-              <rect id="rect6296" width="263.03665" height="263.03665" x="-1048.9221" y="-415.20911" transform="matrix(0.79954125,-0.60061118,0.79954125,0.60061117,0,0)" />
-          </g>
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 134.2 134.3" preserveAspectRatio="xMidYMid meet">
+    <style>
+        .top {
+            transform-origin: 193px 164px;
+            -webkit-animation: rotate 4s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
+            -webkit-transform-origin: 50% 50%;
+            animation: rotate 6s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
+        }
+        .bottom path {
+            fill-opacity: 1;
+            fill: #9dce0a;
+            opacity: .2;
+        }
+        .top path {
+            fill-opacity: 1;
+            fill: #9dce0a;
+            opacity: .6;
+            animation: colorize 10s linear infinite alternate;
+            -webkit-animation: colorize 10s linear infinite alternate;
+        }
+        .braktearo {
+            fill-opacity: 1;
+            fill: #9dce0a;
+            opacity: .9;
+        }
+        @-webkit-keyframes rotate {
+            50% {
+                -webkit-transform: rotate(360deg);
+            }
+        }
+        @keyframes rotate {
+            50% {
+                transform: rotate(360deg);
+            }
+        }
+        @-webkit-keyframes colorize {
+            0% {
+                opacity: .6;
+            }
+            60% {
+                opacity: .0;
+            }
+            80% {
+                opacity: .6;
+            }
+        }
+        @keyframes colorize {
+            0% {
+                opacity: .6;
+            }
+            60% {
+                opacity: .0;
+            }
+            80% {
+                opacity: .6;
+            }
+        }
+    </style>
+    <g transform="translate(-307.87667,-465.22863)">
+        <g class="bottom">
+            <path transform="matrix(-0.14066483,0.99005727,-0.99005727,0.14066483,0,0)" d="m561.8-506.6 42 0 0 42-42 0z" />
+            <path transform="matrix(0.14066483,-0.99005727,0.99005727,-0.14066483,0,0)" d="m-645.7 422.6 42 0 0 42-42 0z" />
+            <path transform="matrix(0.99005727,0.14066483,0.14066483,0.99005727,0,0)" d="m266.6 451.9 42 0 0 42-42 0z" />
+            <path transform="matrix(-0.99005727,-0.14066483,-0.14066483,-0.99005727,0,0)" d="m-350.6-535.9 42 0 0 42-42 0z" />
+        </g>
+        <g class="top">
+            <path transform="matrix(-0.60061118,-0.79954125,0.60061118,-0.79954125,0,0)" d="m-687.1-62.7 42 0 0 42-42 0z" />
+            <path transform="matrix(-0.79954125,0.60061118,-0.79954125,-0.60061118,0,0)" d="m166.6-719.6 42 0 0 42-42 0z" />
+            <path transform="matrix(0.60061118,0.79954125,-0.60061118,0.79954125,0,0)" d="m603.1-21.3 42 0 0 42-42 0z" />
+            <path transform="matrix(0.79954125,-0.60061118,0.79954125,0.60061118,0,0)" d="m-250.7 635.8 42 0 0 42-42 0z" />
+            <path transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" d="m630.3 100 22.6 0 0 22.6-22.6 0z" />
         </g>
-        <rect class="braktearo" id="rect6286" width="141.42136" height="141.42136" x="-130.17999" y="2210.6592" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" />
-      </g>
     </g>
-  </g>
 </svg>