Chrome 未将 SVG 文件加载为 image/svg+xml答案

【问题标题】：Chrome is not loading SVG File as image/svg+xmlChrome 未将 SVG 文件加载为 image/svg+xml
【发布时间】：2011-12-07 22:34:28
【问题描述】：

我有一个 SharePoint 网页，该网页在 img 标记内引用了一个 SVG 文件，该文件存储在 SharePoint 列表的 RootFolder 中：

<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 中的错误（如 this SO answer 中所建议的那样）？如果是这样，是否有以其他方式加载 SVG 文件的解决方法（例如，可能是嵌入标签）？

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

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

【问题讨论】：

你使用的是什么网络服务器？
目前 Windows 7 上的 IIS 7（尽管最终将部署到 WS 2008 R2）。我已将 MIMI 类型添加到 IIS，它修复了 IE 9 和 iOS 中的流识别。

标签： html google-chrome svg mime-types

【解决方案1】：

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

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

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

之后它应该可以在所有浏览器中使用，但您可能需要强制刷新 (Ctrl + F5) 才能让它们再次请求文件。

【讨论】：

当我将此行添加到 web.config 时出现错误（HTTP 错误 500.19），因为该类型已在 IIS 的 MIME 类型设置中定义。它也可以在 iPad（非 IE 浏览器）上正常运行。
@PhilippSchmid 我会在服务器级别删除它，这样您就不必记住在部署时继续这样做。
@PhilippSchmid Here's an example page，如果图像在其上正确加载，那么您可以确定问题出在您的服务器配置而不是浏览器。
谢谢。是的，图像已加载，Chrome 网络监视器将其正确识别为 image/svg+xml。所以这是一个服务器配置问题。