From: Hidde Wieringa <hidde@hiddewieringa.nl>
Date: Tue, 14 May 2024 17:52:04 +0000 (+0200)
Subject: Convert routing sprite to SVG
X-Git-Tag: live~547^2
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/8c64595415e15fda7b2a70e01c8fb53e3e6ac1cc

Convert routing sprite to SVG
---

diff --git a/app/assets/images/routing-sprite.png b/app/assets/images/routing-sprite.png
deleted file mode 100644
index 079f4dd7f..000000000
Binary files a/app/assets/images/routing-sprite.png and /dev/null differ
diff --git a/app/assets/images/routing-sprite.svg b/app/assets/images/routing-sprite.svg
index 15aa57b2d..54014724b 100644
--- a/app/assets/images/routing-sprite.svg
+++ b/app/assets/images/routing-sprite.svg
@@ -1,573 +1,53 @@
-<?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:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="520"
-   height="20"
-   viewBox="0 0 520.00001 20"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="routing-sprite.svg"
-   inkscape:export-filename="/home/patrick/Code/openstreetmap-website/app/assets/images/routing-sprite.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90">
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="5.6568542"
-     inkscape:cx="131.24519"
-     inkscape:cy="13.736603"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="true"
-     inkscape:showpageshadow="false"
-     inkscape:window-width="1920"
-     inkscape:window-height="1080"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="0"
-     showguides="false"
-     inkscape:guide-bbox="true"
-     units="px">
-    <inkscape:grid
-       type="xygrid"
-       id="grid4224" />
-    <sodipodi:guide
-       position="20.000001,31"
-       orientation="1,0"
-       id="guide4226" />
-    <sodipodi:guide
-       position="40.000001,19"
-       orientation="1,0"
-       id="guide4245" />
-    <sodipodi:guide
-       position="60.000002,29"
-       orientation="1,0"
-       id="guide4299" />
-    <sodipodi:guide
-       position="80.000002,35"
-       orientation="1,0"
-       id="guide4388" />
-    <sodipodi:guide
-       position="71.000002,10"
-       orientation="-0.7193398,-0.69465837"
-       id="guide4432"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="100,15"
-       orientation="1,0"
-       id="guide4499" />
-    <sodipodi:guide
-       position="120,15"
-       orientation="1,0"
-       id="guide4578" />
-    <sodipodi:guide
-       position="140,16"
-       orientation="1,0"
-       id="guide4580" />
-    <sodipodi:guide
-       position="160,21"
-       orientation="1,0"
-       id="guide4582" />
-    <sodipodi:guide
-       position="180,15"
-       orientation="1,0"
-       id="guide4729" />
-    <sodipodi:guide
-       position="200.00001,15"
-       orientation="1,0"
-       id="guide4731" />
-    <sodipodi:guide
-       position="220.00001,11"
-       orientation="1,0"
-       id="guide4747" />
-    <sodipodi:guide
-       position="78.000002,12"
-       orientation="-0.70710678,0.70710678"
-       id="guide4212"
-       inkscape:label=""
-       inkscape:color="rgb(0,0,255)" />
-    <sodipodi:guide
-       position="240.00001,19"
-       orientation="1,0"
-       id="guide4264" />
-    <sodipodi:guide
-       position="260.00001,19"
-       orientation="1,0"
-       id="guide4266" />
-    <sodipodi:guide
-       position="280.00001,5"
-       orientation="1,0"
-       id="guide4280" />
-    <sodipodi:guide
-       position="300.00001,10"
-       orientation="1,0"
-       id="guide4297" />
-    <sodipodi:guide
-       position="320.00001,24"
-       orientation="1,0"
-       id="guide4305" />
-    <sodipodi:guide
-       position="340.00001,28"
-       orientation="1,0"
-       id="guide4335" />
-    <sodipodi:guide
-       position="360.00001,30"
-       orientation="1,0"
-       id="guide4337" />
-    <sodipodi:guide
-       position="380.00001,19"
-       orientation="1,0"
-       id="guide4376" />
-    <sodipodi:guide
-       position="400.00001,19"
-       orientation="1,0"
-       id="guide4382" />
-    <sodipodi:guide
-       position="420.00001,36"
-       orientation="1,0"
-       id="guide4394" />
-    <sodipodi:guide
-       position="440.00001,20"
-       orientation="1,0"
-       id="guide4449" />
-    <sodipodi:guide
-       position="460.00001,22"
-       orientation="1,0"
-       id="guide4451" />
-    <sodipodi:guide
-       position="480.00001,20"
-       orientation="1,0"
-       id="guide4485" />
-    <sodipodi:guide
-       position="500.00001,40"
-       orientation="1,0"
-       id="guide4487" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata7">
-    <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 />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(0,-1032.3622)">
-    <image
-       y="1002.3622"
-       x="1.7763568e-15"
-       id="image4217"
-       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAAUCAMAAACXrFfpAAABOFBMVEUAAAB/f39/f39/f39/f396 enoAAAB7e3t7e3t4eHh5eXl5eXl6enp3d3d4eHgAAAB3d3d1dXVzc3MAAABwcHBvb29ubm4AAABt bW1sbGxsbGxsbGxra2tra2toaGhoaGhqamoAAABmZmZoaGgAAABnZ2dkZGQAAABiYmJXV1dXV1cA AAAAAABMTEwAAAAAAABDQ0MAAAA1NTU1NTUxMTEAAAAxMTEAAAAAAAAmJiYlJSUkJCQjIyMiIiIA AAAcHBwAAAAAAAAAAAAAAAAUFBQAAAAAAAAQEBAPDw8AAAAPDw8AAAAAAAANDQ0MDAwAAAAAAAAM DAwKCgoAAAAAAAAICAgICAgAAAAHBwcAAAAHBwcGBgYAAAAAAAAAAAAAAAADAwMAAAAAAAAAAAAA AAAAAAAAAAAAAABULW3yAAAAZ3RSTlMAAQIGCw4QEBIUFhcZGh0gICItMDQ5PEBAQUJERUZHSEhK SkxMTU9QUFZXWGBgZGZpcHl6f4CAiJCRk5SXmaCmrLC1uLzAxMXIyMrM0NDT09TU29zg4OLk5ebm 6fDx8/T09vf4+/z9ttm2NwAABH9JREFUeF7tV+9zFTUUzQOMFZUAiwZbkB9bXYEU3UI0FVhcNQVx rQpbsBopFuX8//+BMy/vvd3k7mRnio8PHc/HOyc35545yWbZkYOQtKYSvDeOgg/Xs4JR8OI/kDnc Q6jX02wqqtZlKR7tN47MWtNfOMRZOZ/n+fmVuNwMD6hRhDmQSlcNXCCpJAKVtbYiRnIViAVspQsp w9Wo0+OmNXMHQWeoUjzabxwSsP1mNDMn1/KHAB7ma+9EK9uhfi1CPdxgijJMggtjnzWeZViSVnmW jqaF0yyBtGYNVNRTiEEe7Xc4oxXtxS78Co+fVoO6BSTpZgEgKt78GyCCHGxvFN5iBh12a6kD+OsK C2EBtCqR6pRm8SdI0QCwMQ8AsvF+FGLA6HkcpV64cOwz5B7Iw3B492gsXVgtp0XVXRFTPANQyX5S jSya/iyyBvDMs1WfCFeQrNGqrOFqyRjRTL0CGh7SDnAANcQb7Uf3FS01ugRQe+kL6uRT5Jfu/nb3 UmR04++DENmTOAu8jszXmKMbUMxa8WZxPHmDHnSQK8AQo1+uswDKExUb0VyUN4B1VQSBLixspnnI W/c82m9k3woqMtofTMjI6E9waxfA7i3kE5IiQcYLjc5aAO0VmCGj3fzclPOsyO48CO0GjGa1KxyA RgRG/wPU8UH3EGxM8w3gJovQ4BdvM+Wl+9F9BdDGRvvwtbxv9MnVTcyxufruwkBX/Qh8VTfkCq2t DZ4JQM1ZkwXfFCnlE7guMvUiFw5YULl2aKSUVd9oVTHRRPeTdp8DCEMJdNlPajYziXE6XMEor2Is 3Y/ua19iX4dGq9YAKJuqb/SFB+jwYG2RmNmHQPDoUeA4r8NLrAzf/3pqm0AtyDeFfF2EhfArupKc jdM3WjILOHKjzo5XUrMGtrcBE8Zl77s9H0rKS/aj+4pCY12FRgvGpgOIvtFn76HDvbPpL64F1HQ9 edPERpeK0ValySywrqquQ1lGRnuERnN/ZAeNrkdeCQ5qKrNnVjk91DUqwisATvsl9/VeclNIwApT BAPw5gd8Y33L41efYo6nV48nRJNSyujhdRYHwD6K0RUA0pUSM5RpgZk/CE2/rOGPuiUPZs8j/ZL7 +tAW2Aeew0ZyZe+ZdeY25rh9hi3XaOH8RXhYo+nDvB1JIPcZbUOjDWNMBcqF/7N1yGi/9L7eaP/9 cyKWa7tpJznmyCdLNdp7CscPazR90zfZiEDWoBa8ggtFl0y68DC0nteO9aP7ash5hjSRK3tfgouP XuHF9y/w6tFFtmyjufNqDmd0iELrgrFRYzBFwKww8BPT8Ui/9L7KZrMpHKdyy0WgT63lG1vX8+tb G/naqcmSjWYajr+e0RRpzdm3wM9RUe/hueGUt50cOA3uoFNyz23uPL6zcf+P+xt3Hu9snluC0ZEc zZZvdKxRUp5lKR7tNw7jeEpujp3Z1YHd35Ev22hmxFE1Wpik3MubH324sXXtg2tff7H68ZeX2dFD Zm1G0mdNgrcUrLw/YW+dPsFOnH6bHXtvhb0p/I9/AQmEF7Y+Eo3CAAAAAElFTkSuQmCC "
-       preserveAspectRatio="none"
-       height="20.000017"
-       width="360" />
-    <path
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 9,1039.3309 3.6e-5,10.0313 1.999964,0 -3.5e-5,-10.0313 z"
-       id="path4446"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="ccccc" />
-    <path
-       sodipodi:nodetypes="cccc"
-       inkscape:connector-curvature="0"
-       id="path4448"
-       d="m 15,1039.3466 -5,-4.9844 -5,5 z"
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-    <path
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="M 87.125,4.984375 87.125,5 86,5 86,12.005859 82,12 l 5,5 5,-4.984375 -4,-0.0059 0,-5.025391 7,0 L 95,17 l 2,0 0,-12 -0.46875,0 0,-0.015625 -9.40625,0 z"
-       transform="translate(0,1032.3622)"
-       id="path4509"
-       inkscape:connector-curvature="0" />
-    <path
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 28,3.9882812 2.814453,2.8203126 -4.777344,4.7460942 0,0.04297 -0.03711,0 L 26,17 28,17 28,12.423828 32.228516,8.2226562 35,11 35,4 28,3.9882812 Z"
-       transform="translate(0,1032.3622)"
-       id="path4450"
-       inkscape:connector-curvature="0" />
-    <path
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 53,4 0.0059,3.984375 -6.005859,0 0,2 L 47,17 l 2,0 0,-7.015625 4.009766,0 L 53.015625,14 58,9 53,4 Z"
-       transform="translate(0,1032.3622)"
-       id="path4208"
-       inkscape:connector-curvature="0" />
-    <path
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="M 67.025391,4.4101562 67.003906,17 l 2,0 0,-7.5527344 3.685547,3.8710934 -2.683114,2.694508 6.989812,0.05505 0.01101,-7.0846724 -2.854816,2.9210504 z"
-       transform="translate(0,1032.3622)"
-       id="path4424"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cccccccccc" />
-    <path
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 170,1035.3622 -4,5 3,0 0,5 2,0 0,-5 3,0 z"
-       id="path4735"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cccccccc" />
-    <g
-       id="g4237">
-      <path
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m 189,1039.3309 4e-5,10.0313 1.99996,0 -3e-5,-10.0313 z"
-         id="path4233"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="ccccc" />
-      <path
-         sodipodi:nodetypes="cccc"
-         inkscape:connector-curvature="0"
-         id="path4235"
-         d="m 195,1039.3466 -5,-4.9844 -5,5 z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-    </g>
-    <path
-       id="path4221"
-       d="m 112.00001,1036.3505 -2.81445,2.8203 4.77734,4.7461 0,0.043 0.0371,0 0,5.4023 -2,0 0,-4.5762 -4.22852,-4.2011 -2.77148,2.7773 0,-7 7,-0.012 z"
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       inkscape:connector-curvature="0" />
-    <path
-       id="path4223"
-       d="m 128.00028,1036.3622 -0.006,3.9844 6.00586,0 0,2 0,7.0156 -2,0 0,-7.0156 -4.00977,0 -0.006,4.0156 -4.98437,-5 5,-5 z"
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       inkscape:connector-curvature="0" />
-    <path
-       sodipodi:nodetypes="cccccccccc"
-       inkscape:connector-curvature="0"
-       id="path4225"
-       d="m 153.98575,1036.7724 0.0215,12.5898 -2,0 0,-7.5527 -3.68555,3.8711 2.68312,2.6945 -6.98982,0.055 -0.011,-7.0847 2.85482,2.9211 z"
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-    <g
-       id="g4254"
-       transform="translate(-2.0000461,0)">
-      <circle
-         r="3"
-         transform="scale(1,-1)"
-         cy="-1044.3622"
-         cx="210.04105"
-         id="path4231"
-         style="opacity:1;fill:none;fill-opacity:0.43824702;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
-      <path
-         id="path4247"
-         transform="translate(0,1032.3622)"
-         d="m 211,3.9882812 2.81445,2.8203126 -1.76562,1.7539062 c 0.58436,0.3442274 1.07073,0.8277607 1.41797,1.4101562 l 1.76172,-1.75 L 218,11 218,4 211,3.9882812 Z M 209,15.84375 209,17 l 2,0 0,-1.130859 C 210.69097,15.946541 210.3729,16 210.04102,16 209.67912,16 209.3342,15.935262 209,15.84375 Z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         inkscape:connector-curvature="0" />
-    </g>
-    <g
-       transform="translate(17.999954,0)"
-       id="g4258">
-      <circle
-         style="opacity:1;fill:none;fill-opacity:0.43824702;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
-         id="circle4260"
-         cx="210.04105"
-         cy="-1044.3622"
-         transform="scale(1,-1)"
-         r="3" />
-      <path
-         inkscape:connector-curvature="0"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m 211,3.9882812 2.81445,2.8203126 -1.76562,1.7539062 c 0.58436,0.3442274 1.07073,0.8277607 1.41797,1.4101562 l 1.76172,-1.75 L 218,11 218,4 211,3.9882812 Z M 209,15.84375 209,17 l 2,0 0,-1.130859 C 210.69097,15.946541 210.3729,16 210.04102,16 209.67912,16 209.3342,15.935262 209,15.84375 Z"
-         transform="translate(0,1032.3622)"
-         id="path4262" />
-    </g>
-    <g
-       id="g4268"
-       transform="translate(37.999954,0)">
-      <circle
-         r="3"
-         transform="scale(1,-1)"
-         cy="-1044.3622"
-         cx="210.04105"
-         id="circle4270"
-         style="opacity:1;fill:none;fill-opacity:0.43824702;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
-      <path
-         id="path4272"
-         transform="translate(0,1032.3622)"
-         d="m 211,3.9882812 2.81445,2.8203126 -1.76562,1.7539062 c 0.58436,0.3442274 1.07073,0.8277607 1.41797,1.4101562 l 1.76172,-1.75 L 218,11 218,4 211,3.9882812 Z M 209,15.84375 209,17 l 2,0 0,-1.130859 C 210.69097,15.946541 210.3729,16 210.04102,16 209.67912,16 209.3342,15.935262 209,15.84375 Z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         inkscape:connector-curvature="0" />
-    </g>
-    <g
-       id="g4274"
-       transform="translate(80,0)">
-      <path
-         sodipodi:nodetypes="ccccc"
-         inkscape:connector-curvature="0"
-         id="path4276"
-         d="m 189,1039.3309 4e-5,10.0313 1.99996,0 -3e-5,-10.0313 z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-      <path
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m 195,1039.3466 -5,-4.9844 -5,5 z"
-         id="path4278"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="cccc" />
-    </g>
-    <path
-       id="path4295"
-       d="m 290,1035.3622 a 2,2 0 0 0 -2,2 2,2 0 0 0 2,2 2,2 0 0 0 2,-2 2,2 0 0 0 -2,-2 z m 0,4 -4,5 3,0 0,5 2,0 0,-5 3,0 -4,-5 z"
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       inkscape:connector-curvature="0" />
-    <g
-       id="g4313">
-      <g
-         id="g4299"
-         transform="translate(115.01146,2)">
-        <path
-           sodipodi:nodetypes="ccccc"
-           inkscape:connector-curvature="0"
-           id="path4301"
-           d="m 189,1037.3422 4e-5,7.9763 1.99996,0 -3e-5,-7.9763 z"
-           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-        <path
-           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-           d="M 192.99451,1037.3474 190,1034.3622 l -3.01146,3.0115 z"
-           id="path4303"
-           inkscape:connector-curvature="0"
-           sodipodi:nodetypes="cccc" />
-      </g>
-      <g
-         transform="matrix(1,0,0,-1,123.01146,2083.7244)"
-         id="g4307">
-        <path
-           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-           d="m 189,1039.3309 4e-5,10.0313 1.99996,0 -3e-5,-10.0313 z"
-           id="path4309"
-           inkscape:connector-curvature="0"
-           sodipodi:nodetypes="ccccc" />
-        <path
-           sodipodi:nodetypes="cccc"
-           inkscape:connector-curvature="0"
-           id="path4311"
-           d="m 195,1039.3466 -5,-4.9844 -5,5 z"
-           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-      </g>
-    </g>
-    <g
-       id="g4321"
-       transform="matrix(-1,0,0,-1,640.01146,2083.7244)">
-      <g
-         transform="translate(115.01146,2)"
-         id="g4323">
-        <path
-           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-           d="m 189,1037.3422 4e-5,7.9763 1.99996,0 -3e-5,-7.9763 z"
-           id="path4325"
-           inkscape:connector-curvature="0"
-           sodipodi:nodetypes="ccccc" />
-        <path
-           sodipodi:nodetypes="cccc"
-           inkscape:connector-curvature="0"
-           id="path4327"
-           d="M 192.99451,1037.3474 190,1034.3622 l -3.01146,3.0115 z"
-           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-      </g>
-      <g
-         id="g4329"
-         transform="matrix(1,0,0,-1,123.01146,2083.7244)">
-        <path
-           sodipodi:nodetypes="ccccc"
-           inkscape:connector-curvature="0"
-           id="path4331"
-           d="m 189,1039.3309 4e-5,10.0313 1.99996,0 -3e-5,-10.0313 z"
-           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-        <path
-           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-           d="m 195,1039.3466 -5,-4.9844 -5,5 z"
-           id="path4333"
-           inkscape:connector-curvature="0"
-           sodipodi:nodetypes="cccc" />
-      </g>
-    </g>
-    <path
-       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 349,3 0,1 -3,0 0,5.2265625 L 343.95508,10 347,13 l 0,0.904297 1.61133,1.425781 1.88867,-1.671875 1.89062,1.671875 L 354,13.90625 354,13 357.04492,10.044922 355,9.2617188 355,4 l -3,0 0,-1 -3,0 z m -2,2 7,0 0,3.8769531 L 350.48633,7.53125 347,8.8496094 347,5 Z m -0.2793,9.992188 -2.2207,1.966796 0.66211,0.748047 1.55859,-1.378906 L 348.61133,18 350.5,16.328125 352.39062,18 l 1.88868,-1.671875 1.55859,1.378906 0.66211,-0.748047 -2.2207,-1.966796 -1.88868,1.673828 -1.89062,-1.673828 -1.88867,1.673828 -1.89063,-1.673828 z"
-       transform="translate(0,1032.3622)"
-       id="path4341"
-       inkscape:connector-curvature="0" />
-    <g
-       id="g4384">
-      <path
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m 370,1036.3505 2.81445,2.8203 -4.77734,4.7461 0,0.043 -0.0371,0 0,5.4023 2,0 0,-4.5762 4.22852,-4.2011 2.77148,2.7773 0,-7 -7,-0.012 z"
-         id="path4374"
-         inkscape:connector-curvature="0" />
-      <path
-         sodipodi:nodetypes="ccccccccc"
-         inkscape:connector-curvature="0"
-         id="path4378"
-         d="m 365.18556,1039.1708 4.77734,4.7461 0,0.043 0.0371,0 0,5.4023 -2,0 0,-4.5762 -4.22852,-4.2011 z"
-         style="fill:#000000;fill-opacity:0.5098038;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-    </g>
-    <g
-       id="g4388"
-       transform="matrix(-1,0,0,1,760.00001,0)">
-      <path
-         inkscape:connector-curvature="0"
-         id="path4390"
-         d="m 370,1036.3505 2.81445,2.8203 -4.77734,4.7461 0,0.043 -0.0371,0 0,5.4023 2,0 0,-4.5762 4.22852,-4.2011 2.77148,2.7773 0,-7 -7,-0.012 z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-      <path
-         style="fill:#000000;fill-opacity:0.5098038;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m 365.18556,1039.1708 4.77734,4.7461 0,0.043 0.0371,0 0,5.4023 -2,0 0,-4.5762 -4.22852,-4.2011 z"
-         id="path4392"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="ccccccccc" />
-    </g>
-    <g
-       id="g4438">
-      <path
-         id="path4421"
-         transform="translate(0,1032.3622)"
-         d="m 407.0293,3.9882812 0,5.4023438 0.0371,0 0,0.042969 1.95117,1.9375 0,5.638672 2.8164,-2.820313 2.72657,2.796875 1.44531,-1.382812 -2.76758,-2.837891 0.0195,-0.02148 2.75977,-2.7460939 -5.5293,0.00977 -1.45898,-1.4433584 0,-4.5761719 -2,0 z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         inkscape:connector-curvature="0" />
-      <path
-         sodipodi:nodetypes="ccccccccc"
-         inkscape:connector-curvature="0"
-         id="path4423"
-         d="m 404.21408,1046.5416 4.77734,-4.7461 0,-0.043 0.0371,0 0,-5.4023 -2,0 0,4.5762 -4.22852,4.2011 z"
-         style="fill:#000000;fill-opacity:0.5098038;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-    </g>
-    <g
-       id="g4442"
-       transform="matrix(-1,0,0,1,840.01754,0)">
-      <path
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m 407.0293,3.9882812 0,5.4023438 0.0371,0 0,0.042969 1.95117,1.9375 0,5.638672 2.8164,-2.820313 2.72657,2.796875 1.44531,-1.382812 -2.76758,-2.837891 0.0195,-0.02148 2.75977,-2.7460939 -5.5293,0.00977 -1.45898,-1.4433557 0,-4.5761719 -2,0 z"
-         transform="translate(0,1032.3622)"
-         id="path4444"
-         inkscape:connector-curvature="0" />
-      <path
-         style="fill:#000000;fill-opacity:0.5098038;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m 404.21408,1046.5416 4.77734,-4.7461 0,-0.043 0.0371,0 0,-5.4023 -2,0 0,4.5762 -4.22852,4.2011 z"
-         id="path4447"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="ccccccccc" />
-    </g>
-    <g
-       id="g4465"
-       transform="translate(-0.99975,0)">
-      <path
-         sodipodi:nodetypes="ccccc"
-         inkscape:connector-curvature="0"
-         id="path4455"
-         d="m 449,1041.3622 4e-5,8 1.99996,0 -3e-5,-8 z"
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-      <path
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m 454.0156,1045.3622 4.9844,-5 -5,-5 z"
-         id="path4457"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="cccc" />
-      <path
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m 455,1039.3466 -6,0 0,2 6,-10e-5 z"
-         id="path4461"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="ccccc" />
-      <path
-         sodipodi:nodetypes="ccccc"
-         inkscape:connector-curvature="0"
-         id="path4463"
-         d="m 451.01565,1039.3466 -7.9629,0 0,2 7.9629,-10e-5 z"
-         style="fill:#000000;fill-opacity:0.5098038;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-    </g>
-    <path
-       sodipodi:nodetypes="ccccc"
-       inkscape:connector-curvature="0"
-       id="path4473"
-       d="m 472.053,1041.3622 -4e-5,8 -1.99996,0 3e-5,-8 z"
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-    <path
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 467.0374,1045.3622 -4.9844,-5 5,-5 z"
-       id="path4475"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cccc" />
-    <path
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 466.053,1039.3466 6,0 0,2 -6,-10e-5 z"
-       id="path4477"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="ccccc" />
-    <path
-       sodipodi:nodetypes="ccccc"
-       inkscape:connector-curvature="0"
-       id="path4479"
-       d="m 470.03735,1039.3466 7.9629,0 0,2 -7.9629,-10e-5 z"
-       style="fill:#000000;fill-opacity:0.5098038;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-    <path
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 490,1036.3505 2.81445,2.8203 -4.77734,4.7461 0,0.043 -0.0371,0 0,5.4023 2,0 0,-4.5762 4.22852,-4.2011 2.77148,2.7773 0,-7 -7,-0.012 z"
-       id="path4491"
-       inkscape:connector-curvature="0" />
-    <path
-       style="fill:#000000;fill-opacity:0.50980392;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 490,1038.3622 -4e-5,11 -1.99996,0 3e-5,-11 z"
-       id="path4505"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="ccccc" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path4510"
-       d="m 490,1036.3505 2.81445,2.8203 -4.77734,4.7461 0,0.043 -0.0371,0 0,5.4023 2,0 0,-4.5762 4.22852,-4.2011 2.77148,2.7773 0,-7 -7,-0.012 z"
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path4514"
-       d="m 510.00001,1036.3505 -2.81445,2.8203 4.77734,4.7461 0,0.043 0.0371,0 0,5.4023 -2,0 0,-4.5762 -4.22852,-4.2011 -2.77148,2.7773 0,-7 7,-0.012 z"
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-    <path
-       sodipodi:nodetypes="ccccc"
-       inkscape:connector-curvature="0"
-       id="path4516"
-       d="m 510.00001,1038.3622 4e-5,11 1.99996,0 -3e-5,-11 z"
-       style="fill:#000000;fill-opacity:0.5098038;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-    <path
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 510.00001,1036.3505 -2.81445,2.8203 4.77734,4.7461 0,0.043 0.0371,0 0,5.4023 -2,0 0,-4.5762 -4.22852,-4.2011 -2.77148,2.7773 0,-7 7,-0.012 z"
-       id="path4518"
-       inkscape:connector-curvature="0" />
-    <text
-       xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12px;line-height:125%;font-family:'Times New Roman';-inkscape-font-specification:'Times New Roman';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       x="7.5"
-       y="1065.3622"
-       id="text4238"
-       sodipodi:linespacing="125%"><tspan
-         sodipodi:role="line"
-         id="tspan4240"
-         x="7.5"
-         y="1065.3622">0    1     2     3    4     5     6     7    8     9   10  11   12    13   14  15   16  17   18  19   20   21   22  23   24  25</tspan></text>
-    <path
-       inkscape:connector-curvature="0"
-       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 170,1045.3622 c -1.10457,0 -2,0.8954 -2,2 0,1.1046 0.89543,2 2,2 1.10457,0 2,-0.8954 2,-2 0,-1.1046 -0.89543,-2 -2,-2 z"
-       id="path3440"
-       sodipodi:nodetypes="sssss" />
+<svg xmlns="http://www.w3.org/2000/svg" width="520" height="20">
+  <style><![CDATA[.B{fill-rule:evenodd}.C{fill-opacity:.51}.D{stroke-width:2}.E{stroke-linejoin:round}]]></style>
+  <g class="B">
+    <path d="M9 6.969V17h2V6.969z"/>
+    <path d="M15 6.985L10 2 5 7zm72.125-2.001V5H86v7.006L82 12l5 5 5-4.984-4-.006V6.984h7V17h2V5h-.469v-.016h-9.406zM28 3.988l2.814 2.82-4.777 4.746v.043H26V17h2v-4.576l4.229-4.201L35 11V4l-7-.012zM53 4l.006 3.984H47v2V17h2V9.984h4.01L53.016 14 58 9l-5-5zm14.025.41L67.004 17h2V9.447l3.686 3.871-2.683 2.695 6.99.055.011-7.085-2.855 2.921zM170 3l-4 5h3v5h2V8h3zm19 3.969V17h2V6.969z"/>
+    <path d="M195 6.985L190 2l-5 5zm-83-2.997l-2.814 2.82 4.777 4.746v.043H114V17h-2v-4.576l-4.229-4.201L105 11V4l7-.012zM128 4l-.006 3.984H134v2V17h-2V9.985h-4.01L127.984 14 123 9l5-5zm25.986.41l.022 12.59h-2V9.447l-3.686 3.871 2.683 2.695-6.99.055-.011-7.085 2.855 2.921z"/>
+  </g>
+  <circle r="3" transform="matrix(1 0 0 -1 -2 -1032.362)" cy="-1044.362" cx="210.041" fill="none" stroke="#000" class="D E"/>
+  <path d="M209 3.988l2.814 2.82-1.766 1.754a4.03 4.03 0 0 1 1.418 1.41l1.762-1.75L216 11V4l-7-.012zm-2 11.855V17h2v-1.131c-.309.077-.627.131-.959.131-.362 0-.707-.065-1.041-.156z" class="B"/>
+  <circle cx="210.041" cy="-1044.362" transform="matrix(1 0 0 -1 18 -1032.362)" r="3" fill="none" stroke="#000" class="D E"/>
+  <path d="M229 3.988l2.814 2.82-1.766 1.754a4.03 4.03 0 0 1 1.418 1.41l1.762-1.75L236 11V4l-7-.012zm-2 11.855V17h2v-1.131c-.309.077-.627.131-.959.131-.362 0-.707-.065-1.041-.156z" class="B"/>
+  <circle r="3" transform="matrix(1 0 0 -1 38 -1032.362)" cy="-1044.362" cx="210.041" fill="none" stroke="#000" class="D E"/>
+  <g class="B">
+    <path d="M249 3.988l2.814 2.82-1.766 1.754a4.03 4.03 0 0 1 1.418 1.41l1.762-1.75L256 11V4l-7-.012zm-2 11.855V17h2v-1.131c-.309.077-.627.131-.959.131a3.94 3.94 0 0 1-1.041-.156zm22-8.874V17h2V6.969z"/>
+    <path d="M275 6.985L270 2l-5 5zM290 3a2 2 0 1 0 0 4 2 2 0 1 0 0-4zm0 4l-4 5h3v5h2v-5h3l-4-5zm14.011-.02v7.976h2V6.98z"/>
+    <path d="M308.006 6.985L305.011 4 302 7.012zm4.005 5.047V2h2v10.031z"/>
+    <path d="M318.011 12.016l-5 4.984-5-5z"/>
+  </g>
+  <g transform="matrix(-1 0 0 -1 640.01146 1051.3624)" class="B">
+    <path d="M304.011 1039.342v7.976h2v-7.976z"/>
+    <path d="M308.006 1039.347l-2.995-2.985-3.011 3.012zm4.005 5.047v-10.031h2v10.031z"/>
+    <path d="M318.011 1044.378l-5 4.984-5-5z"/>
+  </g>
+  <g class="B">
+    <path d="M349 3v1h-3v5.227l-2.045.773L347 13v.904l1.611 1.426 1.889-1.672 1.891 1.672L354 13.906V13l3.045-2.955L355 9.262V4h-3V3h-3zm-2 2h7v3.877l-3.514-1.346L347 8.85V5zm-.279 9.992l-2.221 1.967.662.748 1.559-1.379 1.89 1.672 1.889-1.672L352.391 18l1.889-1.672 1.559 1.379.662-.748-2.221-1.967-1.889 1.674-1.891-1.674-1.889 1.674-1.891-1.674zM370 3.988l2.814 2.82-4.777 4.746v.043H368V17h2v-4.576l4.229-4.201L377 11V4l-7-.012z"/>
+    <path d="M365.186 6.809l4.777 4.746v.043H370V17h-2v-4.576l-4.229-4.201z" class="C"/>
+  </g>
+  <g transform="matrix(-1 0 0 1 760.00001 -1032.362)" class="B">
+    <path d="M370 1036.351l2.814 2.82-4.777 4.746v.043H368v5.402h2v-4.576l4.229-4.201 2.771 2.777v-7l-7-.012z"/>
+    <path d="M365.186 1039.171l4.777 4.746v.043H370v5.402h-2v-4.576l-4.229-4.201z" class="C"/>
+  </g>
+  <g class="B">
+    <path d="M407.029 3.988v5.402h.037v.043l1.951 1.938v5.639l2.816-2.82 2.727 2.797 1.445-1.383-2.768-2.838.019-.021 2.76-2.746-5.529.01-1.459-1.443V3.988h-2z"/>
+    <path d="M404.214 14.18l4.777-4.746V9.39h.037V3.988h-2v4.576l-4.229 4.201z" class="C"/>
+  </g>
+  <g transform="matrix(-1 0 0 1 840.01754 -1032.362)" class="B">
+    <path d="M407.029 1036.35v5.402h.037v.043l1.951 1.938v5.639l2.816-2.82 2.727 2.797 1.445-1.383-2.768-2.838.019-.021 2.76-2.746-5.529.01-1.459-1.443v-4.576h-2z"/>
+    <path d="M404.214 1046.542l4.777-4.746v-.043h.037v-5.402h-2v4.576l-4.229 4.201z" class="C"/>
+  </g>
+  <g class="B">
+    <path d="M448 9v8h2V9zm5.016 4L458 8l-5-5z"/>
+    <path d="M454 6.985h-6v2h6z"/>
+    <path d="M450.016 6.985h-7.963v2h7.963z" class="C"/>
+    <path d="M472.053 9v8h-2V9zm-5.016 4l-4.984-5 5-5z"/>
+    <path d="M466.053 6.985h6v2h-6z"/>
+    <path d="M470.037 6.985H478v2h-7.963z" class="C"/>
+    <path d="M490 3.988l2.814 2.82-4.777 4.746v.043H488V17h2v-4.576l4.229-4.201L497 11V4l-7-.012z"/>
+    <path d="M490 6v11h-2V6z" class="C"/>
+    <path d="M490 3.988l2.814 2.82-4.777 4.746v.043H488V17h2v-4.576l4.229-4.201L497 11V4l-7-.012zm20 0l-2.814 2.82 4.777 4.746v.043H512V17h-2v-4.576l-4.229-4.201L503 11V4l7-.012z"/>
+    <path d="M510 6v11h2V6z" class="C"/>
+    <path d="M510 3.988l-2.814 2.82 4.777 4.746v.043H512V17h-2v-4.576l-4.229-4.201L503 11V4l7-.012z"/>
   </g>
 </svg>
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 12d115073..2cdb617be 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -566,7 +566,7 @@ header .search_forms,
 /* Rules for routing */
 
 div.direction {
-  background-image: image-url('routing-sprite.png');
+  background-image: image-url('routing-sprite.svg');
   width: 20px;
   height: 20px;
   background-repeat: no-repeat;