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

Question

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

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

HTML：

<img>

样式表：

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

出现x的可能原因是什么？

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

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

Answer 1

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

Answer 2

我发现在img上使用“宽度”样式（缩小它）可以在Edge和Chrome中使用，但是它会在IE11中消失。而设置“max-width”和“max-height”似乎适用于所有这三种浏览器。

Answer 3

这也可以通过将svg作为普通/文本而不是image/svg+xml发送来引起。在Apache中，您可以通过添加到.htaccess文件 -

来解决此问题

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Answer 4

您可能会发现关闭此模式可使您的网站正常运行，但仍有一些浏览器不支持.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");
}

如果您在标记中使用JavaScript，那么David Bushell有一个非常简单的选择：

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

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

中提取的

Answer 5

为什么不覆盖兼容模式：