SVG IMG has zero dimensions when floated in Firefox [closed]

Question

I have a bit of a puzzler concerning an SVG used in an IMG tag in Firefox.

Codepens first:

1. http://codepen.io/doughamlin/pen/Fgosn
2. http://codepen.io/doughamlin/pen/zmBda

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.

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.

Is this just some obscure Firefox bug, or am I actually doing something wrong?

Answer 1

This article will help you with why it does not work

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag

There are some important things to take note of (referenced from the W3 specs):

If you do not set the x or y attributes, they will be set to 0.

If you do not set the height or width attributes, they will be set to 0. Having a height or width attribute of 0 will disable rendering of the image.