How can I get my SVG path to scale to fit?

Question

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 without preserving aspect ratio. For example, with a suitable definition of DOG I get:

 <g>
   <svg height="141.23" width="400.0" x="0.0" y="0.0">
     <rect height="100%" width="100%"
      stroke='black' fill='purple'/>
     <use xlink:href="#DOG"/>
   </svg>

   <svg height="73.34" width="210.81" x="189.18" y="273.94">
     <rect height="100%" width="100%"
       stroke='black' fill='purple'/>
     <use xlink:href="#DOG"/>
   </svg>
 </g>

I cannot figure out, using preserveAspectRatio='none' or any other tricks to get my DOG in the (lower) window to fit exactly. The result is always clipped. I can try to guess at a viewBox but this is brittle, shouldn't I be able to do this at the upper level of the DOM here?

The complete code for the SVG is listed below:

<svg version="1.2" width="400.0pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g>
   <svg height="141.23" width="400.0" x="0.0" y="0.0">
     <rect height="100%" width="100%"
      stroke='black' fill='purple'/>
     <use xlink:href="#DOG"/>
   </svg>

   <svg height="73.34" width="210.81" x="189.18" y="273.94">
     <rect height="100%" width="100%"
       stroke='black' fill='purple'/>
     <use xlink:href="#DOG"/>
   </svg>
 </g>

 <defs>

  <symbol id="DOG">
   <defs>
    <g>
     <symbol id="letter_D" overflow="visible">
      <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;">
      </path>
     </symbol>
     <symbol id="letter_O" overflow="visible">
      <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;">
      </path>
     </symbol>
     <symbol id="letter_G" overflow="visible">
      <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;">
      </path>
     </symbol>
    </g>
   </defs>
   <g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
     <use x="-10.359" xlink:href="#letter_D" y="139.247"/>
     <use x="130.512871" xlink:href="#letter_O" y="139.247"/>
     <use x="273.975031" xlink:href="#letter_G" y="139.247"/>
   </g>
  </symbol>
 </defs>

</svg>

Answer 1

You could also use ViewBox together with preserveAspectRatio="none" for a result that, in my opinion, almost always gives me the desired result. That way you don't have to do calculations to specify a transformation, but instead decide how big a canvas you draw on and then automaticly scaling it to the desired size...

Example:

<svg style="width: 500px; height: 800px;" viewBox="0 0 610 1340" preserveAspectRatio="none">

You know your drawing will be drawn within the viewBox sizes but the result has to be fit into a 500x800 size window with or without preserved aspect ratio.

EDIT: I know you said "without preserving aspect ratio", but you still need to decide what you want to do instead. You can scale/stretch or clip. Those options are outlined under the preserveAspectRatio specifications.