firefoxhtmlsvg
I am trying to load my svg file using an img tag but it is not working on firefox. Chrome shows the svg. I am trying to do it like this http://www.schepers.cc/svg/blendups/embedding.html.
Here is my code…
<img src="http://ubuntu.digitalfront.ca/ghcorp/wp-content/uploads/2014/09/hillsdale.svg" alt="" class="img-responsive" />The svg doesn't show up at all in Firefox. How can I fix this?
IMG if you intend to have
people print your page and you want the image to be included by default.
—JayTeeIMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.IMG plus alt attribute if the image
is part of the content such as a logo or diagram or person (real person, not stock photo people).
—sanchothefatIMG if you rely on browser scaling to render an image in proportion to text size.IMG
for multiple overlay images in IE6.IMG with a z-index in order
to stretch a background image to fill its entire window.img instead of background-image can dramatically improve performance of animations over a background.background-image if you intend to have
people print your page and you do not want the image to be included by default.
—JayTeebackground-image if you need to improve download times, as
with CSS sprites.background-image if you need for only a portion of the image to be visible, as with CSS sprites.background-image with background-size:cover in order to stretch a background image to fill its entire window.I can recommend the SVG Primer (published by the W3C), which covers this topic: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML
If you use <object> then you get raster fallback for free*:
<object data="your.svg" type="image/svg+xml">
<img src="yourfallback.jpg" />
</object>
*) Well, not quite for free, because some browsers download both resources, see Larry's suggestion below for how to get around that.
2014 update:
If you want a non-interactive svg, use <img> with script fallbacks
to png version (for older IE and android < 3). One clean and simple
way to do that:
<img src="your.svg" onerror="this.src='your.png'">.
This will behave much like a GIF image, and if your browser supports declarative animations (SMIL) then those will play.
If you want an interactive svg, use either <iframe> or <object>.
If you need to provide older browsers the ability to use an svg plugin, then use <embed>.
For svg in css background-image and similar properties, modernizr is one choice for switching to fallback images, another is depending on multiple backgrounds to do it automatically:
div {
background-image: url(fallback.png);
background-image: url(your.svg), none;
}
Note: the multiple backgrounds strategy doesn't work on Android 2.3 because it supports multiple backgrounds but not svg.
An additional good read is this blogpost on svg fallbacks.
Best Answer
We have just encountered an issue where an SVG will not display in Firefox. Preliminary testing suggests that the issue occurs if the ancestor of the img doesn't have a defined width... The img tag doesn't have an inline width or height definition either - so that may not be helping.
<div><a><img src="image.svg"/></a></div>In this example - giving the div a width made the svg display.PS Both the anchor tag and the img tag had css defined widths