Chrome无法将SVG文件加载为image/svg+xml图片。

Question

我有一个引用了 SharePoint 页面的 img 标签，其中引用了一个存储在 SharePoint 列表的 RootFolder 中的 SVG 文件：

<img src='http://localhost/Lists/MyList/1/1.svg' type='image/svg+xml' />

该图像在桌面的IE9以及iOS设备（Safari）上正确渲染。但是，在Windows上的Chrome中（我目前使用的是v14），它无法显示。相反，它会呈现为损坏的图像图标。

Chrome的网络选项卡显示文件1.svg被下载为application/octet-stream（因此渲染不正确）。我需要更改什么以便Chrome能够正确识别MIME类型（如标签中指定的那样）？这可能是Chrome的一个错误（正如这个SO答案中所建议的那样）吗？如果是这样，是否有一种方法来绕过加载SVG文件的问题（例如，可能是使用嵌入标记）？

请注意，IE的调试器（F12）将其类型正确地标识为image/svg+xml，因此按预期呈现图像。

编辑：由于它似乎是服务器端的问题（感谢@robertc），我已经添加了该文件是由SharePoint提供的这一事实，怀疑SharePoint可能无法识别MIME类型。

- Philipp Schmid

---

你使用的是哪个Web服务器？ - robertc

目前在Windows 7上使用IIS 7（尽管最终将部署到WS 2008 R2）。我已经向IIS添加了MIMI类型，这解决了IE 9和iOS中的流识别问题。 - Philipp Schmid

Answer 1

img元素上没有type属性，您需要在服务器上正确设置MIME类型。我认为它只能在IE中工作，因为它正在进行内容嗅探。

在IIS7及以上版本中，您可以在web.config文件的system.webServer部分指定MIME类型映射：

<staticContent>
  <mimeMap fileExtension=".svg" mimeType="image/svg+xml"/>
</staticContent>

这之后它应该在所有浏览器中正常工作，但您可能需要强制刷新（Ctrl + F5）以再次请求文件。

- robertc

---

当我将这行代码添加到web.config时，出现了错误（HTTP错误500.19），因为该类型已在IIS的MIME类型设置中定义。但在iPad上（非IE浏览器）它可以正常工作。 - Philipp Schmid

@PhilippSchmid 我建议你在服务器层面上移除它，这样你就不必记得在部署时一直这样做了。 - robertc

@PhilippSchmid 这里有一个示例页面，如果图片在该页面上正确加载，则可以确定问题出在您的服务器配置上，而不是浏览器。 - robertc

谢谢。是的，图片加载了，Chrome 网络监视器正确地将其识别为 image/svg+xml。因此这是一个服务器配置问题。 - Philipp Schmid