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.
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.