Question

This SVG可以在浏览器窗口中正确查看。

然而，当我尝试将其用作网页中的图像时（在我的实时网站和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

从服务器加载svg时Content-type响应标头当前是Content-Type:text/xml，这是SVG的MIME类型不正确。尝试将Content-type标题更改为image/svg+xml。

根据您在评论中发布的要点，您可以通过更改第15行来完成此操作：

'.svg'  : 'text/xml',

到

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

我建议不要只更改标记，因为这只是对不正确的HTTP标头的短期修复。

Answer 2

以下是我使用普通旧HTML的方法。我使用了SO链接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>

为什么这个SVG工作在浏览器中是原始的，而不是在网页中？

2 个答案: