Search code examples
htmlhttpsvghttp-headerscontent-type

Why does this SVG work being viewed raw in the browser but not in a webpage?


This SVG can be viewed correctly in my browser window.

However when I try to use it as an image in a web page (tried this on my live site and in JSFiddle), it does not show up:

<img src="http://54.186.131.77/Style/Resources/SVG/logo.svg"/>

Each time, my server claims that the file was successfully served, yet it doesn't render.

What is the issue?


In case you think my issue could involve my serving method / MIME types, I've created a Gist with my Node.js custom server implementation. I treat .svg as text/xml according to whatever chart I used when developing this server some time ago.


Solution

  • The Content-type response header when I load that svg from your server is currently Content-Type:text/xml, which is an incorrect MIME type for SVG. Try changing your Content-type header to image/svg+xml.

    From the gist you posted in your comment, it looks like you will be able to do this by changing line 15 from:

    '.svg'  : 'text/xml',
    

    to

    '.svg'  : 'image/svg+xml',
    

    I would recommend against just changing the markup, because that is just a short-term fix for the incorrect HTTP headers.