SVG 作为 <img> 标记中的源不在 Internet Explorer 11 中显示答案

【问题标题】：SVG as source in <img> tag not displaying in Internet Explorer 11SVG 作为 <img> 标记中的源不在 Internet Explorer 11 中显示
【发布时间】：2014-01-05 10:17:20
【问题描述】：

我正在尝试将 SVG 文件显示为 <img> 标记的 src（根据 caniuse.com/svg-img 我应该能够在所有最近的浏览器中执行此操作）。该文件在 Chrome 和 Firefox 中显示，但 Internet Explorer 仅显示一个带有 x 的黑框，如下所示：

直接在 IE 中打开文件，图像显示完美，所以实际的 SVG 文件应该没有什么问题。 IE 控制台中没有错误或警告，我使用的是最新版本的浏览器。

HTML：

<div id="plot">
  <img id="svg" src="plot1.svg" height="100%" width="100%"/>
</div>

样式表：

#plot {
    float: right;
    width: 650px;
    height: 550px;
    background: #ffffff;
}

#plot svg {
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

x出现的可能原因有哪些？

编辑：SVG 是一个自动生成的大型文件，可以查看here 的一个示例。用于生成它的代码很旧，可能与顶部的 DOCTYPE 有关吗？我尝试更改它，但仍然无法显示任何内容。

编辑2：我已经让它工作了……有点。当我按 F12 并转到“仿真”选项卡时，由于某种原因，它显示 IE 正在以文档模式 7 显示页面，即。使用不支持 SVG 的 IE7 兼容模式。我可以手动单击任何更高版本，它显示正常。我的下一个问题是：为什么？为什么它以模式 7 运行显示页面，我该如何停止这种行为？

【问题讨论】：

这很奇怪。我的 Jenkins 构建项目页面中有几个 SVG 图像，它们在 IE11 中显示得很好。
实际上，这敲响了警钟——我想我以前在这里看到过类似的东西。尝试将 height="100%" width="100%" 更改为 CSS 样式，看看是否有帮助。我有一种预感，这就是这里的关键。
我应该提到我已经尝试过了。对IE没有影响，其他浏览器只显示四分之一的图片：P
如果没有看到图像（或任何其他具有相同效果的图像），将很难给出任何进一步的建议。正如我所说，我无法用我拥有的图像在这里复制它。您提到您已经检查了控制台...您还检查了网络选项卡吗？我假设它下载正确？ http 标头中的 mime 类型是否正确？我现在想不出其他任何东西，除非图像本身有什么奇怪的地方。
我已编辑帖子以包含指向该文件示例的链接。我目前正在弄乱 DOCTYPE 和其他东西，试图让它显示。

标签： html image internet-explorer svg

【解决方案1】：

我发现了问题。我正在通过 Intranet 查看该页面，我不知道为什么，但 IE 的默认设置是“在 Compatibilty View 中显示 Intranet 站点”。只需在兼容性视图设置中取消选中该框。 SVG 在 IE7 中根本不起作用，所以这就是我没有得到图像的原因。

【讨论】：

您可以在文档头部使用<meta http-equiv="X-UA-Compatible" content="IE=edge">，以便将来自动执行此操作。

【解决方案2】：

您可能会发现关闭此模式可以使您的网站正常运行，但仍有一些浏览器不支持.svg 图像。这些浏览器将显示您在未选中此框时看到的结果。

使用 SVG 作为 <img> 如果我将 SVG 保存到文件中，我可以直接在 <img> 标记中使用它。

<img src="kiwi.svg" alt="Kiwi standing on oval">

在 Illustrator 中，我们的画板是 612px ✕ 502px。

这正是图片在页面上的大小，由它自己决定。您可以通过选择 img 并更改其宽度或高度来更改它的大小，就像您可以使用 PNG 或 JPG 一样。

浏览器支持

以这种方式使用它有一套特定的浏览器支持。本质上：它适用于除 IE 8 及以下版本和 Android 2.3 及以下版本之外的任何地方。

如果您想使用 SVG，但又需要支持这些不支持以这种方式使用 SVG 的浏览器，您可以选择。

一种方法是测试 Modernizr 的支持并换出图像的 src：

if (!Modernizr.svg) {
  $(".logo img").attr("src", "images/logo.png");
}

David Bushell 有一个非常简单的替代方案，如果您对标记中的 JavaScript 没问题：

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

这是从 CSS Tricks, click to read the full article. 提取的

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
感谢您的建议@bongs，新来的。会更新。

【解决方案3】：

这也可能是由于将 svg 作为纯文本而不是 image/svg+xml 发送所致。在 Apache 中，您可以通过添加到您的 .htaccess 文件来解决此问题 -

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

【讨论】：

我正在拔头发试图弄清楚这一点，你的答案是正确的。我们的服务器将其作为 application/octet-stream :(

【解决方案4】：

我发现 img 上的“宽度”样式（缩小）在 Edge 和 Chrome 中有效，但在 IE11 中消失了。而是设置“最大宽度”和“最大高度”似乎在所有这三种浏览器中都有效。

【讨论】：

很奇怪。在ie11上将宽度更改为最大宽度后它对我有用，你能分享一下这方面的细节吗？谢谢
如果需要，您也可以使用min-height 代替max-height。
虽然这是关于 MSIE 而不是 Edge，但我发现 Edge 要求 SVG 有一个 viewBox 定义，如果它丢失，其他浏览器似乎会推断它。

【解决方案5】：

为什么不覆盖兼容模式：

【讨论】：