title: How do I scale an SVG that has some complex path definitions?
body: <p>I have an SVG whose code is like what follows:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg width="150px" height="150px" preserveAspectRatio="xMinYMin meet" viewBox="0 0 150 155" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;g id="g11" transform="matrix(1.25,0,0,-1.25,-100.0791,954.14501)"&gt;
          &lt;g id="g3186" transform="translate(6.3490095,-13.703287)"&gt;
              &lt;path d="..."&gt;&lt;/path&gt;
              &lt;path d="..."&gt;&lt;/path&gt;
              &lt;path d="..."&gt;&lt;/path&gt;
              &lt;path d="..."&gt;&lt;/path&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>The "original" dimensions of the SVG generate an image is that is 300px by 310px. I want to scale the image as a whole, let's say by 50%. I've tried a variety of ways to scale the image, but the best I've accomplished is to simply clip or "crop" the original image to a region that is 50% of the original dimensions.</p>
  
  <p>Using preserveAspectRatio, setting the viewbox, trying to use transform="scale(0.5"), etc. have not worked. All I want to do is scale the original dimensions by 50%.</p>