SVG does not display in img tag in Safari

Question

Simply put, I have an SVG graphic embedded in HTML that refuses to display in Safari (although it works fine in Chrome, Firefox, and other browsers).

I'm using the following markup to accomplish this:

<img alt="grapefruit logo" src="/assets/better-gf-logo_red.svg" />

Here is a live link to the the page where the SVG is not displaying. The fruit logo in the top left corner does not display in Safari: https://grapefruit.cs.rpi.edu/.

I have verified the following line is also present in my nginx mime.types:

 image/svg+xml                         svg svgz;

However, I know that the issue is probably not related to mime types, since the SVG doesn't appear in Safari on my development machine either (I tested several web servers). I have also tried displaying the SVG file itself in Safari, and it looks fine. The image element has the right size and box model, but it is not displaying any content.

Answer 1

Turns out that <img src="image.svg"> will not work in Safari, I tried using <object> and it worked. Give this a try: jsBin demo

<object
   type="image/svg+xml"
   height="70"
   width="150"
   data="/assets/better-gf-logo_red.svg">
</object> 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object