title: Remove bottom spacing on 100% width SVG graphic
body: <p>I have an svg box with a preset viewport. I want to display it so that it goes 100% across. But what is happening is that it is adding space below. How can I get rid of this?  I would rather not have to modify the viewport and inner component sizes (they are generated from some other tool which requires these) but I can add/modify attributes of the svg tag (such as the aspect ratio).   I have made a fiddle - <a href="http://jsfiddle.net/cyberwombat/2MLwx/1/" rel="nofollow">http://jsfiddle.net/cyberwombat/2MLwx/1/</a> - I would like the red border to be 2px all around the black box. I've tried a few variations of preserveAspectRatio but so far no luck.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .frame {
      margin:100px 100px 0 100px;
      background-color:yellow;
    }
    .wrapper {
       border:1px solid red;
      padding:2px;
    }
    svg {
  
    }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="frame"&gt;
      &lt;div class="wrapper"&gt;
        &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 800 150" width="100%" version="1.1"&gt;
          &lt;rect transform="matrix(1,0,0,1,0,0)" x="0" y="0" width="100%" height="100%" r="0" rx="0" ry="0" fill="#000" stroke="#000"&gt;&lt;/rect&gt;
        &lt;/svg&gt;
      &lt;/div&gt;
        Hello
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>