关于html:Chrome无法将SVG文件加载为image / svg + xml

Chrome is not loading SVG File as image/svg+xml

我有一个SharePoint网页,该页面引用img标签内SharePoint列表的RootFolder中存储的SVG文件:

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

可以在台式机以及iOS设备(Safari)上的IE9中正确渲染图像。但是,在Windows上的Chrome(目前正在使用v14)中,它无法显示。而是渲染残破的图像图标。

Chrome中的"网络"标签显示文件1.svg已作为应用程序/八位位组流下载(因此渲染不正确)。我需要更改什么,以便Chrome能够正确识别MIME类型(如标记中所指定)?难道这是Chrome中的错误(如该SO答案中所建议)?如果是这样,是否有解决方法以另一种方式加载SVG文件(例如,可以嵌入标签)?

请注意,IE的调试器(F12)将类型正确标识为image / svg + xml,因此可以按预期方式呈现图像。

编辑:由于这似乎是服务器端问题(感谢@robertc),我添加了以下事实:该文件由SharePoint提供,怀疑SharePoint可能无法识别MIME类型。


img元素上没有属性type,您需要在服务器上正确设置MIME类型。 我认为它仅在IE中有效,因为它正在执行内容嗅探。

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

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

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