title: Inline SVG alignment in HTML
body: <p>I currently have problems aligning inline SVG correctly inside a bounding DIV, like in this example.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
      &lt;div style="border: 1px solid black; height: 50px; width: 100px; vertical-align:top;"&gt;
          &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100""&gt;
              &lt;rect x="0" y="0" width="100" height="100" style="fill: red;" /&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The SVG gets resized to match the the dimensions of the div, but I am not able to set any alignment for the SVG. Neither text-align nor vertical-align seem to work in Firefox 9, Chrome 18, IE 9 or Opera 11.61 . I just want to position the inline SVG at the upper left corner of the DIV.</p>
  
  <p>Note that in my case the surrounding DIV has dynamic dimmension (%-values), so using absolute positioning does not work.</p>
  
  <p>Anybody have any clue how to align the SVG in this case?</p>