SVG in img tag not loading as image in firefox

Question

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?

Answer 1

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

Answer 2

I have a similar issue please refer to below screenshot. In firefox SVG was not loading. If I right click on image and open in new tab/window it was opening fine.

I have supplied height="300" and width="150" attribute to img tag and removed the width in %age/auto from CSS. This has fixed the issue for me.

I have also tried hard-coding the width in px instead of % in CSS only that worked as well.

So according to my understanding SVG requires a defined height/width in firefox to render properly either on image tag with height/width attributes or in CSS.

I hope it will help.

Answer 3

Beware! Showing an SVG on a webpage in an img element doesn't always work.

It works in many cases but NOT in some, such when the SVG file contains an embedded image (image element.)

According to this source: "For security reasons, browsers will disable SVG scripts, linking and other types of interactivity when they’re added to your page with an img tag. In addition, IE9, Chrome and Safari won’t apply stylesheet rules to the SVG if they’re defined in a separate CSS file."