I have a bit of a puzzler concerning an SVG used in an IMG tag in Firefox.
Codepens first:
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?
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
ory
attributes, they will be set to0
.If you do not set the
height
orwidth
attributes, they will be set to0
. Having aheight
orwidth
attribute of0
will disable rendering of the image.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With