SVG in img tag does not load as image in firefox

Question

I am trying to download an svg file using the img tag, but it does not work on firefox. Chrome shows svg. I am trying to do this as follows 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" /> 

svg does not appear at all in Firefox. How can i fix this?

Answer 1

We just ran into a problem when SVG would not display in Firefox. Preliminary testing suggests that the problem occurs if the ancestor of img does not have a specific width ... The img tag also does not have a built-in definition of width or height - so this may not help. <div><a><img src="image.svg"/></a></div> In this example, providing a div of width made the svg display.

PS Both the anchor tag and the img tag had css defined widths

Answer 2

I have a similar problem, please see the screenshot below. In firefox, SVG did not load. If I right-click on the image and open in a new tab / window, that was normal.

I provided the height="300" and width="150" attributes with the img tag and removed the %age/auto width from the CSS . This fixed the problem for me.

I also tried hard-coded width in px instead of % only in CSS.

Thus, in my understanding, SVG requires that a certain height/width in firefox be displayed correctly either on the image tag with the height / width attributes, or in CSS.

Hope this helps.

Answer 3

Caution! Displaying SVG on a web page in an img element does not always work.

It works in many cases, but NOT in some, for example, 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 are added to your page with the img tag. In addition, IE9, Chrome, and Safari do not apply style rules to SVG, if defined in a separate CSS file.