SVG viewboxes

by Creak

HTML

<svg
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        version="1.1"
        width="12"
        height="24"
        display="none">
     <symbol id="arrow" viewBox="0 0 12 24">
      <path
                d="M 0.012524,18.962014 C 3.2399372,15.622018 7.0710069,12.023346 7.0710069,11.999733
                7.0710069,11.976103 3.2800584,8.156534 0,4.868412 0,0.036481 0,4.868412 0.00839866,0
                L 6.0041993,6.010546 12,12.021087 6.0256844,18.010546 0.0125092,24 Z"/>
    </symbol>  
</svg>


<div class="text" style="font-weight: bold">Viewbox declared in `symbol` tag only:</div>
<div class="text">Scaled; `used` element overflows parent `svg` tag dimensions by a seemingly variable scale factor depending on CSS dimensions.</div>
<div class="wrap">
  <div class="text"></div>
  <svg class="arrow boxed first">
    <use xlink:href="#arrow" class="used"></use>
  </svg>
</div>

<br />
<div class="text" style="font-weight: bold">Viewbox declared in both `symbol` and `svg` tags:</div>
<div class="text">Scaled; `used` element bound by parent `svg` tag dimensions; no apparent difference to declaring in `svg` tag only (presumably allows for separate scaling though?)</div>
<div class="wrap">
  <svg class="arrow boxed second" viewBox="0 0 12 24">
    <use xlink:href="#arrow" class="used"></use>
  </svg>
</div>

CSS

.wrap {
  width: 48px; 
  height: 75px;
}

.text {
  width: 100%;
}

.arrow {
  width:100%;
  height: 100%;
}

.used {
  fill: #598;
}