6

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.

  • Have you tried setting MIME types, and what is running on the server side? http://stackoverflow.com/questions/27338648/svg-wont-display Apache instructions - http://planetsvg.com/tools/mime.php#apache – Mousey Jul 31 '15 at 22:06
  • @Mousey I'll show you how my server handle's MIME types. –  Jul 31 '15 at 22:11
  • @Mousey it's too much code to clutter this question with, since I dont know which part could be problematic in order to `...[snip]...`, so here it is in a Gist: https://gist.github.com/anonymous/a39603f3ee74694e8186 –  Jul 31 '15 at 22:16
  • Related: http://stackoverflow.com/questions/11918977/right-mime-type-for-svg-images-fonts –  Jul 31 '15 at 22:21
  • 2
    @TylerH this is an unusual question in the fact that examples given as not working now work properly once the answer was found. I was serving an applicable but imperfect MIME type. –  Aug 01 '15 at 21:17

2 Answers2

4

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.

Maximillian Laumeister
  • 18,162
  • 7
  • 50
  • 70
  • I actually changed the content type as you said and reloaded the server, reloaded the page with cache disabled - problem wasn't solved -, but to be sure, is it possible to check the content type being served via javascript so I can know for sure the MIME type is served correctly? –  Jul 31 '15 at 22:41
  • @JonathanTodd I checked again and it looks like your content type is now `text/svg-xml` - still incorrect. To check the content type, go to [web-sniffer.net](http://web-sniffer.net/) and plug in your SVG url, leaving everything else default. Then check the "HTTP Response Header" section for a `Content-Type` of `image/svg+xml`. – Maximillian Laumeister Jul 31 '15 at 22:44
  • Ahh I see. Silly mistake. –  Jul 31 '15 at 22:46
2

Here's how I did it, using plain old HTML. I used the answer shown in the SO link here to figure it out.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title>Test page</title>
</head>
<body>
  <object data="http://54.186.131.77/Style/Resources/SVG/logo.svg" type="image/svg+xml">
      <img src="http://54.186.131.77/Style/Resources/SVG/logo.svg" />
  </object>
</body>
</html>
Community
  • 1
  • 1