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

8 回答

• 0

  使用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检查用户代理 .

  回复于 2024-05-02T17:05:14+08:00
• 17

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

  回复于 2024-05-02T17:05:14+08:00
• 5

  我使用the "transparent gradient" technique因为只有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但不支持渐变版本将显示后备版本 .

  回复于 2024-05-02T17:05:14+08:00
• 2

  当您检测到（通过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";
          }
      }
  }
  

  回复于 2024-05-02T17:05:14+08:00
• 0

  这个怎么样？

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

  另外看看SVGeezy .

  回复于 2024-05-02T17:05:14+08:00
• 2

  跟进Adiabatic的评论：您还可以将fallback img路径设置为data-attribute . 这样可以在回退路径中提供更大的灵活性 .

  示例（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>
  

  回复于 2024-05-02T17:05:14+08:00
• 3

  我更喜欢内容图像的“条件评论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

  回复于 2024-05-02T17:05:14+08:00
• -1

  这个方法对我有用：

  <?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”，具体取决于浏览器版本 .

  Important information:

  **为了使这个脚本工作，你需要设置文件browscap.ini，这样你就可以使用PHP函数“get_browser” .

  **有关SVG的浏览器功能来自本网站：

  https://caniuse.com/#search=svg

  回复于 2024-05-02T17:05:14+08:00