Search code examples
htmlsvgsafarihtml-object

Safari opens download dialog box for SVG instead displaying the image

I've been trying to solve that problem since yesterday with no success. I could be missing something simple however I can't see it.

The problem I have is that Safari on Windows instead of rendering a svg image it opens a download dialog box. The website is hosted on IIS 7. I have set the MIME in the web.config as below.

<mimeMap fileExtension=".svg" mimeType="image/svg+xml svg"/>

And embedded the image as following: 

<div style="width:128px; height:128px;background:grey;">
    <object height="100%" width="100%" 
        data="/images/l-tree01.svg"  type="image/svg+xml">
    </object>               
</div>

The path to the image is correct, the image renders well on the Firefox, Chrome and IE.

Solution

  • Eventually have solve the problem by examining response HEADERS of properly embedded image on another site. The issue was that the MIME I've declared was Content-Type: image/svg+xml svg instead of Content-Type: image/svg+xml.