在旧版浏览器中显示 PNG 代替 SVG 的条件代码？

Question

我正在寻找一种方法，让旧版浏览器在检测到时显示 PNG 图像来代替 SVG 作为后备。我网站的徽标当前采用 SVG 格式，但较旧的浏览器（特别是 IE 8 及更低版本）不会呈现它。我已经有了 PNG 格式的徽标。执行此操作的最佳方法是什么？

谢谢

Answer 1

使用 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]-->

http://msdn.microsoft.com/en -us/library/ms537512%28v=vs.85%29.aspx

如果您也在寻找一种方法来处理 IE 以外的浏览器，您应该使用 javascript 或 php 检查用户代理。

Answer 2

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

Answer 3

我使用“透明渐变”技术，因为它仅适用于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 显示图像。付出的代价是，一些也能够渲染 SVG 但不支持渐变的旧浏览器版本（例如 IE9 或 Firefox 3.5）将显示后备版本。

Answer 4

我建议您在检测到时重写 SVG 图像的 src 属性（通过 Modernizr 或类似）浏览器本身不支持 SVG。像这样的东西：

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";
        }
    }
}

Answer 5

这个怎么样？

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

另请查看 SVGeezy。

Answer 6

跟进 Adiabatic 的评论：
您还可以将后备 img 路径设置为数据属性。这可以让您的后备路径更加灵活。

示例（HTML+JS）：

<object type="image/svg+xml" data="image.svg" data-fallback="image.png"></object>

<script>
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)) {
           var fallback = imgs[i].getAttribute('data-fallback');
           if(typeof fallback !== "undefined" && fallback !== "")
           {
               imgs[i].src = fallback;
           }
        }
    }
}
</script>

Answer 7

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

HTML：

<a class="site-logo" href="/">
    <!--[if gte IE 9]><!--><img alt="Acme Supplies" src="logo.svg" data-fallback="logo.png" onerror="this.src=this.getAttribute('data-fallback');this.onerror=null;" /><!--<![endif]-->
    <!--[if lt IE 9]><img alt="Acme Supplies" src="logo.png" /><![endif]-->
</a>

http://davidgoss.co.uk/2013/01/30/use-svg-for-your-logo-and-still-support-old-ie-and-android/

对于装饰图像，我使用“透明渐变 SVG 回退技术”，如 Pau Giner 所描述的。

CSS：

.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%;
}

http://pauginer.com/post/36614680636/invisible-gradient-technique

Answer 8

这个方法对我有用：

<?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 的浏览器功能是从此网站获得的：

https://caniuse.com/#search=svg< /a>