title: Html inline svg content misplaced
body: <p>If you look at the following html <a href="http://jsfiddle.net/aLcxj/" rel="nofollow noreferrer">http://jsfiddle.net/aLcxj/</a> the + and T icons are placed one spot lower than they should be (they are placed outside of their parents).<br />
  <strong>html:</strong></p>
  
  <pre><code>&lt;ul class="Grid"&gt;
      &lt;li&gt;
          &lt;span&gt;Test1&lt;/span&gt;
          &lt;ul class="Manage"&gt;
              &lt;li&gt;
                  &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.334 52.334" version="1.1"  &gt;&lt;path d="m 19.833 0 l 12.667 0 l 0 19.834 l 19.834 0 l 0 12.667 l -19.834 0 l 0 19.832 l -12.667 0 l 0 -19.832 l -19.833 0 l 0 -12.667 l 19.833 0 Z" /&gt;&lt;/svg&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.812 32.617" version="1.1"&gt;&lt;path d="m 29.7119 0 l 1.05591 0.01221 l 0.43335 0.427245 l 0.494385 3.50342 l 0.115966 4.01611 L 31.7017 8.55713 L 31.2012 8.78906 L 30.4504 8.71582 L 30.0049 8.10547 L 28.8574 5.40162 L 27.5146 3.78418 L 26.326 3.13263 L 24.762 2.66724 L 22.8226 2.388 l -2.31476 -0.09308 l -1.5686 0.109864 l -0.653076 0.32959 l -0.07324 0.415039 l 0 24.3408 l 0.183105 1.32752 l 0.549316 0.857543 l 1.09253 0.595093 l 1.81274 0.540161 l 0.726318 0.164795 l 0.323487 0.10376 l 0.24414 0.927734 l -0.537109 0.610352 l -0.274658 -0.0061 l -0.726319 -0.06714 l -5.88379 -0.292969 l -4.76074 0.244141 l -1.29395 0 l -0.317383 -0.585938 l 0.115967 -0.653076 l 0.738525 -0.396728 l 1.75781 -0.592041 l 1.07422 -0.701905 l 0.622559 -1.11694 l 0.20752 -1.64185 l 0 -23.6572 L 13.6475 2.5879 L 12.9883 2.31934 L 12.5793 2.30103 L 11.5479 2.29493 L 7.51953 2.69776 L 4.71192 3.90626 L 3.14331 5.60304 L 1.75781 8.30079 L 1.26343 8.96607 L 0.610354 8.95997 L 0.0427246 8.63647 L 0 8.05664 L 0.640869 4.87671 L 0.854492 0.610351 L 1.22681 0.213624 L 2.34375 0.146484 L 7.89795 0.402832 L 14.0137 0.488282 L 19.5358 0.457762 L 23.9929 0.366212 L 27.3849 0.213625 L 29.7119 2e-006 Z" /&gt;&lt;/svg&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.334 52.334" version="1.1"&gt;&lt;path d="m 19.833 0 l 12.667 0 l 0 19.834 l 19.834 0 l 0 12.667 l -19.834 0 l 0 19.832 l -12.667 0 l 0 -19.832 l -19.833 0 l 0 -12.667 l 19.833 0 Z" /&gt;&lt;/svg&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>css:</strong></p>
  
  <pre><code>body {
      fill: white;
      color: white;
      background-color: black;
      font-size: 2em;
      font-family: "Segoe UI", "Segoe UI Light", "Verdana", "Arial", "Helvetica";
      letter-spacing: 1px;
  }
  
  .Grid &gt; li {
      background-color: rgb(229, 20, 0);
      width: 5em;
      height: 5em;
      list-style-type: none;
      float: left;
      padding: 0.25em;
      margin: 0.25em;
      position: relative;
  }
  
  .Grid &gt; li &gt; span {
      left: 0.25em;
      bottom: 0.25em;
      position: absolute;
  }
  
  .Grid &gt; li &gt; .Manage {
      top: 0.25em;
      right: 0.25em;
      bottom: 0.25em;
      position: absolute;
  }
  .Grid &gt; li &gt; .Manage &gt; li {
      width: 0.5em;
      height: 0.5em;
      display: block;
      list-style-type: none;
  } 
  </code></pre>
  
  <p>This seems to have some thing to do with the width and height of the parent li element, if i change the width and height to 1em instead of 0.5em then they get correctly placed.</p>
  
  <p>It behaves the same way in IE9, Opera, Chrome..</p>
  
  <p>What am i doing wrong?</p>
  
  <p><img src="https://i.stack.imgur.com/D5d4g.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/f54iY.png" alt="enter image description here"></p>