title: SVG tag is taking extra space
body: <p>So I am getting a weird size issue with the SVG element in HTML5. It is taking considerable more space than I suspected. Each small rectangle in the image is a rect element with width and height of "20".</p>
  
  <p>The SVG element should have height and width of 20*10 = 200 but instead has dimensions of 680x508.</p>
  
  <p>You can view the inspected svg element here -> <a href="http://i.stack.imgur.com/xrofn.png" rel="noreferrer">http://i.stack.imgur.com/xrofn.png</a></p>
  
  <p>The HTML looks something like this:</p>
  
  <pre><code>    &lt;svg&gt;
      &lt;rect x='0' y='0' height='20' width='20' stroke='black' stroke-width=''/&gt;
      &lt;rect x='0' y='20' height='20' width='20' stroke='black' stroke-width=''/&gt;
      &lt;rect x='0' y='40' height='20' width='20' stroke='black' stroke-width=''/&gt;
      ...
      &lt;/svg&gt;
  </code></pre>
  
  <p>It should be noted that I am running node.js and mustache.js.</p>
  
  <p>Edit:
  Apparently SVG does something when it isn't sure about the width/height. Setting it manually solves the problem.</p>
  
  <pre><code>    &lt;svg height="200" width="200"&gt;
  </code></pre>