title: How can I get my SVG path to scale to fit?
body: <p>I've done my best to bring this down to a minimal working example, but please excuse the wall of code at the bottom. I've got a set of paths, in this particular case they spell the word "DOG". I'd like to scale them to fit in a box <em>without preserving aspect ratio</em>.
  For example, with a suitable definition of <code>DOG</code> I get:</p>
  
  <pre><code> &lt;g&gt;
     &lt;svg height="141.23" width="400.0" x="0.0" y="0.0"&gt;
       &lt;rect height="100%" width="100%"
        stroke='black' fill='purple'/&gt;
       &lt;use xlink:href="#DOG"/&gt;
     &lt;/svg&gt;
  
     &lt;svg height="73.34" width="210.81" x="189.18" y="273.94"&gt;
       &lt;rect height="100%" width="100%"
         stroke='black' fill='purple'/&gt;
       &lt;use xlink:href="#DOG"/&gt;
     &lt;/svg&gt;
   &lt;/g&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/V7GyV.png" alt="enter image description here"></p>
  
  <p>I cannot figure out, using <code>preserveAspectRatio='none'</code> or any other tricks to get my <code>DOG</code> in the (lower) window to fit exactly. The result is always clipped. I can try to guess at a <code>viewBox</code> but this is brittle, shouldn't I be able to do this at the upper level of the DOM here?</p>
  
  <p>The complete code for the SVG is listed below:</p>
  
  <pre><code>&lt;svg version="1.2" width="400.0pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
   &lt;g&gt;
     &lt;svg height="141.23" width="400.0" x="0.0" y="0.0"&gt;
       &lt;rect height="100%" width="100%"
        stroke='black' fill='purple'/&gt;
       &lt;use xlink:href="#DOG"/&gt;
     &lt;/svg&gt;
  
     &lt;svg height="73.34" width="210.81" x="189.18" y="273.94"&gt;
       &lt;rect height="100%" width="100%"
         stroke='black' fill='purple'/&gt;
       &lt;use xlink:href="#DOG"/&gt;
     &lt;/svg&gt;
   &lt;/g&gt;
  
   &lt;defs&gt;
  
    &lt;symbol id="DOG"&gt;
     &lt;defs&gt;
      &lt;g&gt;
       &lt;symbol id="letter_D" overflow="visible"&gt;
        &lt;path d="M 131.5 -66.953125 C 131.5 -104.609375 106.203125 -136.09375 73.71875 -136.09375 L 10.359375 -136.09375 L 10.359375 -130.90625 C 24.109375 -130.90625 26.296875 -130.90625 26.296875 -121.9375 L 26.296875 -14.140625 C 26.296875 -5.1875 24.109375 -5.1875 10.359375 -5.1875 L 10.359375 0 L 73.71875 0 C 105.796875 0 131.5 -29.484375 131.5 -66.953125 Z M 116.765625 -66.953125 C 116.765625 -38.859375 108.59375 -27.5 104.8125 -22.109375 C 100.03125 -15.9375 88.671875 -5.1875 69.734375 -5.1875 L 47.421875 -5.1875 C 39.453125 -5.1875 39.046875 -6.171875 39.046875 -12.953125 L 39.046875 -123.140625 C 39.046875 -129.90625 39.453125 -130.90625 47.421875 -130.90625 L 69.734375 -130.90625 C 86.28125 -130.90625 116.765625 -121.140625 116.765625 -66.953125 Z " style="stroke:none;"&gt;
        &lt;/path&gt;
       &lt;/symbol&gt;
       &lt;symbol id="letter_O" overflow="visible"&gt;
        &lt;path d="M 134.09375 -67.75 C 134.09375 -108.59375 104.8125 -139.28125 71.734375 -139.28125 C 37.859375 -139.28125 9.171875 -108.1875 9.171875 -67.75 C 9.171875 -27.296875 38.25 3.1875 71.53125 3.1875 C 105.609375 3.1875 134.09375 -27.890625 134.09375 -67.75 Z M 118.953125 -70.328125 C 118.953125 -22.3125 93.640625 -0.40625 71.734375 -0.40625 C 49.015625 -0.40625 24.3125 -23.109375 24.3125 -70.328125 C 24.3125 -117.359375 51.40625 -135.6875 71.53125 -135.6875 C 92.65625 -135.6875 118.953125 -116.765625 118.953125 -70.328125 Z " style="stroke:none;"&gt;
        &lt;/path&gt;
       &lt;/symbol&gt;
       &lt;symbol id="letter_G" overflow="visible"&gt;
        &lt;path d="M 136.6875 -48.21875 L 136.6875 -53.40625 C 131.90625 -53 121.140625 -53 115.765625 -53 L 87.078125 -53.40625 L 87.078125 -48.21875 L 93.046875 -48.21875 C 110.1875 -48.21875 110.578125 -46.03125 110.578125 -38.859375 L 110.578125 -25.703125 C 110.578125 -3.78125 84.6875 -2 78.5 -2 C 57.984375 -2 24.3125 -16.140625 24.3125 -68.140625 C 24.3125 -120.140625 57.390625 -134.09375 76.71875 -134.09375 C 99.21875 -134.09375 115.5625 -114.5625 119.34375 -86.875 C 119.75 -84.484375 119.75 -84.078125 121.546875 -84.078125 C 123.734375 -84.078125 123.734375 -84.484375 123.734375 -88.0625 L 123.734375 -135.296875 C 123.734375 -138.875 123.53125 -139.078125 122.34375 -139.078125 C 121.546875 -139.078125 121.34375 -138.875 119.953125 -136.484375 L 111.1875 -119.75 C 101.421875 -132.109375 89.46875 -139.28125 74.125 -139.28125 C 40.046875 -139.28125 9.171875 -109.1875 9.171875 -68.140625 C 9.171875 -27.296875 39.453125 3.1875 74.515625 3.1875 C 90.65625 3.1875 106.40625 -2.59375 112.578125 -13.953125 C 115.96875 -5.78125 121.546875 -0.203125 122.53125 -0.203125 C 123.53125 -0.203125 123.734375 -0.40625 123.734375 -3.984375 L 123.734375 -39.65625 C 123.734375 -47.21875 124.328125 -48.21875 136.6875 -48.21875 Z " style="stroke:none;"&gt;
        &lt;/path&gt;
       &lt;/symbol&gt;
      &lt;/g&gt;
     &lt;/defs&gt;
     &lt;g style="fill:rgb(0%,0%,0%);fill-opacity:1;"&gt;
       &lt;use x="-10.359" xlink:href="#letter_D" y="139.247"/&gt;
       &lt;use x="130.512871" xlink:href="#letter_O" y="139.247"/&gt;
       &lt;use x="273.975031" xlink:href="#letter_G" y="139.247"/&gt;
     &lt;/g&gt;
    &lt;/symbol&gt;
   &lt;/defs&gt;
  
  &lt;/svg&gt;
  </code></pre>