title: SVG - percentage height and width does not work in HTML5
body: <p>I have a SVG with width and height set to 100% and the property "preserveAspectRatio" is set to "xMidYMid meet".</p>
  
  <p>With google chrome, after adding  tag (Making it HTML5) the behavior changes. The SVG element does not occupy all the space on page, and height of SVG is set in proportion to width automatically.</p>
  
  <p>HTML without DOCTYPE - Working as expected</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;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        body{
          padding:0;
          margin:0;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;svg xmlns="http://www.w3.org/2000/svg" 
             version="1.1"
             style="width:100%;height:100%;background-color:#0f0"
             preserveAspectRatio="xMidYMid meet"
             viewBox="0 0 100 150"&gt;
          &lt;rect 
              x="11" 
              y="11" 
              width="80" 
              height="130"
              style="stroke: #000000; fill:none;"/&gt;
        &lt;/svg&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>HTML with DOCTYPE - Not working</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;!DOCTYPE HTML&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        body{
          padding:0;
          margin:0;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;svg xmlns="http://www.w3.org/2000/svg" 
             version="1.1"
             style="width:100%;height:100%;background-color:#f00"
             preserveAspectRatio="xMidYMid meet"
             viewBox="0 0 100 150"&gt;
          &lt;rect 
              x="11" 
              y="11" 
              width="80" 
              height="130"
              style="stroke: #000000; fill:none;"/&gt;
        &lt;/svg&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>Note :: The inline results snippets may be incorrect refer Plunker</em></p>
  
  <p><a href="http://plnkr.co/edit/tFdRrG32J38sLSx44lJg?p=preview" rel="noreferrer">Plunker Without DocType</a><br>
  <a href="http://plnkr.co/edit/LaUsrYv0U1DLvoDpKhGA?p=preview" rel="noreferrer">Plunker With DocType</a>   </p>