SVG viewboxes

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"
        display="none">
        
    <symbol id="arrowboxless">
      <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>
    
    <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">No viewbox declared:</div>
<div class="text">Unscaled; `used` element bound by parent `svg` tag dimensions.</div>
<div class="wrap">
  <svg class="arrow">
    <use xlink:href="#arrowboxless" class="used"></use>
  </svg>
</div>

<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 `svg` tag only:</div>
<div class="text">Scaled; `used` element bound by parent `svg` tag dimensions.</div>
<div class="wrap">
  <svg class="arrow" viewBox="0 0 12 24">
    <use xlink:href="#arrowboxless" class="used"></use>
  </svg>
</div>

<br />
<div class="text" style="font-weight: bold">Viewbox declared in both `symbol` and...

CSS

svg {
  background: #aaddaa;
  width:100%;
  height: 100%;
}
.wrap {
  width: 64px; 
  height: 64px;
}

.arrow {
}

.used {
  fill: #598;
}