title: SVG IMG has zero dimensions when floated in Firefox
body: <p>I have a bit of a puzzler concerning an SVG used in an IMG tag in Firefox. </p>
  
  <p>Codepens first:</p>
  
  <ol>
  <li><a href="http://codepen.io/doughamlin/pen/Fgosn" rel="noreferrer">http://codepen.io/doughamlin/pen/Fgosn</a></li>
  <li><a href="http://codepen.io/doughamlin/pen/zmBda" rel="noreferrer">http://codepen.io/doughamlin/pen/zmBda</a></li>
  </ol>
  
  <p>Codepen 1 uses SVG and does not work in Firefox (version 26). Codepen 2 uses a JPG and works correctly in Firefox. There are not other differences between the two. They both work correctly in Chrome, Safari and IE 10.</p>
  
  <p>The inspector in Firefox shows 0 height and width for the SVG. The SVG displays normally if I remove the float:left from the H1 containing the IMG tag, but I have found no other way to make the SVG display not have I been able to figure out why the image would have 0 dimensions in the first place. </p>
  
  <p>Is this just some obscure Firefox bug, or am I actually doing something wrong?</p>