为旧浏览器显示PNG代替SVG的条件代码？

我正在寻找一种方法，让较旧的浏览器在检测到SVG时显示PNG图像代替SVG作为回退。我的站点的徽标目前在SVG中，但较旧的浏览器，特别是IE 8和更低版本的浏览器不会呈现它。我已经在巴布亚新几内亚的标志。执行此操作的最佳方式是什么

---

感谢使用HTML条件注释

<!--[if lte IE 8]><img src="logo.png" /><![endif]-->
<!--[if gt IE 8]><img src="logo.svg" /><![endif]-->
<!--[if !IE]> --><img src="logo.svg" /><!-- <![endif]-->

如果您还想在IE以外的浏览器中处理此问题，则应使用javascript或php检查用户代理。

<object type="image/svg+xml" data="image.svg">
    <img src="image.png" alt="image"/>
</object>

我建议在检测到（通过或类似方式）浏览器本机不支持SVG时，重写SVG图像的

src

属性。比如：

if (!Modernizr.svg) {
    var imgs = document.getElementsByTagName('img');
    var endsWithDotSvg = /.*\.svg$/
    var i=0;
    var l = imgs.length;
    for (; i != l; ++i) {
        if (imgs[i].src.match(endsWithDotSvg)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + "png";
        }
    }
}

我之所以使用它，是因为它只是CSS，不需要特定于浏览器的黑客攻击

该技术基于这样一个事实：能够使用CSS渐变的浏览器已经足够现代化，可以支持SVG渲染。因此，如果我们使用由两层组成的背景图像，一层是SVG，另一层是渐变，只有那些能够理解渐变语法的浏览器才会尝试显示SVG

以下代码显示了基本的CSS规则：

background: transparent url(fallback-image.png) center center no-repeat;
background-image: -webkit-linear-gradient(transparent, transparent), url(vector-image.svg);
background-image: -moz-linear-gradient(transparent, transparent), url(vector-image.svg);
background-image: linear-gradient(transparent, transparent), url(vector-image.svg);

---

使用此技术，所有用户都将看到图像，并使用最新浏览器版本的SVG显示图像。要付出的代价是，一些旧的浏览器版本（如IE9或Firefox 3.5）也能够呈现SVG，但不支持渐变，将显示回退版本

跟进绝热公司的评论： 您还可以将回退img路径设置为数据属性。这使得您的回退路径具有更大的灵活性

示例（HTML+JS）：

if（！modernizer.svg）{
var imgs=document.getElementsByTagName（'img'）；
var endswithdotssvg=/.\.svg$/
var i=0；
var l=imgs.长度；
对于（；i！=l；++i）{
if（imgs[i].src.match（endswithdotssvg））{
var fallback=imgs[i].getAttribute（'data-fallback'）；
如果（后备类型！==“未定义”&&fallback！==”）
{
imgs[i].src=fallback；
}
}
}
}

这个怎么样

<img src="your.svg" onerror="this.src=your.png">  

另请看。

如果图像没有装饰，我更喜欢David Goss所描述的内容图像的“条件注释SVG回退技术”

HTML:

---

这种方法对我很有效：

<?php
$browser = get_browser(null, true);
$extension = "png";

if ($browser['browser'] == "Chrome" && $browser['version'] >= 49){
    $extension = "svg";
}else if($browser['browser'] == "Firefox" && $browser['version'] >= 57){
    $extension = "svg";
}else if($browser['browser'] == "Opera" && $browser['version'] >= 49){
    $extension = "svg";
}else if($browser['browser'] == "IE" && $browser['version'] >= 11){
    $extension = "svg";
}else if($browser['browser'] == "Safari" && $browser['version'] >= 11){
    $extension = "svg";

}
?>

通过缺陷，您告诉变量“$extension”为PNG，但是如果浏览器版本能够呈现SVG，那么该变量将更改为SVG

然后，在HTML中，您只需完成文件扩展名，以响应变量

<img src="image.<?php echo $extension ?>">

“>

现在，您的网页将根据浏览器版本加载“image.png”或“image.svg”

重要信息：

**为了使该脚本正常工作，您需要设置文件browscap.ini，以便可以使用PHP函数“get_browser”

**有关SVG的浏览器功能可从以下网站获得：

---

谢谢，效果非常好。现在只剩下一个问题，我想用正确的代码可以很容易地解决。在IE 8及以下版本中，PNG显示很好，但IE的灰色轮廓和红色X图标仍然存在，不知道如何处理SVG。有没有办法让IE忽略我的SVG IMG标记？谢谢。这就是为什么您必须所有三个条件注释都在那里。IE将看不到.svg，如果它在a中，我只是尝试使用那里列出的所有三个条件注释，但只有IE浏览器呈现徽标。它在Firefox、Chrome或我测试过的任何其他非IE浏览器中都没有显示。抱歉，显然if！IE有不同的语法。我编辑了我的post，它现在应该可以工作了（已测试）。

也可以用于IE 9+和非IE浏览器，而无需重复标记。一个轻微的缺点是浏览器在这种情况下通常下载这两种资源。另一个缺点是“object”元素可能有一些奇怪的事件行为，例如，jQuery UI工具提示附加到“object”上在许多浏览器中，鼠标离开时将打开，但不会关闭。此时的新解决方案将在所有情况下加载svg。如果OneError映像导致错误，它还可能引入无止境的循环。@Nemo64如果无法加载svg，它将替换svg。大多数浏览器只检查一次错误（如Chrome&FF 15+）。有关Firefox的更多信息，请参阅以获得向后兼容性，您只需添加

this.onerror=null

before settings

src

@Nemo64尽管现在我推荐SVGeezy而不是这种方法，但许多流行的网站仍然使用这种方法。所有现代浏览器都支持SVG已有多年了。单击caniuse页面上的show all（全部显示）按钮，查看支持的进度。这个答案在5年前可能是有用的，但今天它完全没有意义，而且也不正确，因为Firefox ESR支持SVG的功能非常好，但是您可以通过测试排除它。好吧。。。根据您所在的位置，不使用现代浏览器的人数可能会有很大差异。在我的环境中，至少这个脚本不是毫无意义的，它确实帮助我完成我的项目。。。。另一方面，我没有包括Firefox ESR这一事实并不意味着答案不正确，您只需要将特定的浏览器版本添加到脚本中。

.icon-file {
    background: transparent url(../images/file.png) center center no-repeat;
    background-image: -webkit-linear-gradient(transparent,transparent), url(../images-svg/file.svg);
    background-image:      -o-linear-gradient(transparent,transparent), url(../images-svg/file.svg);
    background-image:    -moz-linear-gradient(transparent,transparent), url(../images-svg/file.svg);
    background-image:     -ms-linear-gradient(transparent,transparent), url(../images-svg/file.svg);
    background-image:         linear-gradient(transparent,transparent), url(../images-svg/file.svg);
    background-size: 100%;
}

<?php
$browser = get_browser(null, true);
$extension = "png";

if ($browser['browser'] == "Chrome" && $browser['version'] >= 49){
    $extension = "svg";
}else if($browser['browser'] == "Firefox" && $browser['version'] >= 57){
    $extension = "svg";
}else if($browser['browser'] == "Opera" && $browser['version'] >= 49){
    $extension = "svg";
}else if($browser['browser'] == "IE" && $browser['version'] >= 11){
    $extension = "svg";
}else if($browser['browser'] == "Safari" && $browser['version'] >= 11){
    $extension = "svg";

}
?>

<img src="image.<?php echo $extension ?>">