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

Question

我正在尝试将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是一个大型自动生成的文件,其中的一个例子可以在这里看到.用于生成它的代码是旧的,它可能与顶部的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中提取,点击阅读完整文章.