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

Question

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

谢谢

Answer 1

使用 HTML 条件 cmets。

<!--[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

当您检测到（通过Modernizr 或类似方法）浏览器本身不支持 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";
        }
    }
}

Answer 4

我使用the "transparent gradient" technique，因为它是纯 CSS 的，不需要特定于浏览器的 hack。

该技术基于能够使用 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 但不支持渐变将显示回退版本。

Answer 5

要跟进 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 6

这个怎么样？

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

也可以看看SVGeezy。

Answer 7

如果图像没有装饰，我更喜欢内容图像的“条件 cmets 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/

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

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