为什么这个 SVG 可以在浏览器中以原始方式查看，但不能在网页中查看？

Question

This SVG可以在我的浏览器中正确查看window.

然而，当我尝试将它用作网页中的图像时（在我的实时网站和 JSFiddle 中尝试过），它没有显示：

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

每次，我的服务器都声称文件已成功提供，但它没有呈现。

这是什么问题？

如果您认为我的问题可能涉及我的服务方法/MIME 类型，I've created a Gist with my Node.js custom server implementation. 根据我开发此服务器时使用的任何图表，我将 .svg 视为 text/xml以前。

Answer 1

这是我的做法，使用的是普通的 HTML。我使用 SO link here 中显示的答案来弄清楚。

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

Answer 2

当我从您的服务器加载该 svg 时，Content-type 响应 header 目前是 Content-Type:text/xml，这是 SVG 的错误 MIME 类型。尝试将 Content-type header 更改为 image/svg+xml.

根据您在评论中发布的要点，您似乎可以通过将第 15 行从以下内容更改为：

'.svg'  : 'text/xml',

到

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

我建议不要只更改标记，因为这只是 short-term 对不正确的 HTTP headers 的修复。

为什么这个 SVG 可以在浏览器中以原始方式查看，但不能在网页中查看？

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

html

svg

content-type

http

http-headers