title: SVG Resize Image out of aspect ratio
body: <p>I'm trying to figure out how to take a complex SVG file and easily resize it to anything id like. Say I want a 100x100 SVG image to be 5x30 I'd like it to resize to that with out any cropping.</p>
  
  <p>I want to do this using only the SVG document or by embedding it into another SVG file. I'm having a lot of trouble achieving this.</p>
  
  <p>For Example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no" ?&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" version="1.0"&gt;
    &lt;image x="0" y="0" width="516.3034" xlink:href="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" xlink:type="simple" xlink:actuate="onLoad" height="777.2853" preserveAspectRatio="xMidYMid meet" xlink:show="embed" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is only cropping the image when what I wish to accomplish is the embedded image gets shrunk to fit inside the viewbox.</p>