SVG注入的后备,没有Javascript / SVG支持

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SVG注入的后备,没有Javascript / SVG支持相关的知识,希望对你有一定的参考价值。

我们正在研究使用Iconfu SVGInject将SVG文件注入我们的html文件中。由于某种原因,我们的一个项目仍然需要IE8的支持(不要问),所以我被迫用真正的旧浏览器来测试它。

在SVGInject文档中有一个没有SVG支持的fallback example,它看起来像这样(我自己添加的图像尺寸):

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" width="128" height="128" onload="SVGInject(this)" onerror="SVGInject.err(this, 'image.png')" />
</body>
</html>

虽然回退适用于IE8的标准配置,但我发现如果浏览器不支持SVG和javascript(例如禁用Javascript的IE8),则不会出现回退。

以下是不同场景中显示的内容:

现代浏览器(Chrome,Firefox,Webkit)

SVG作为内联SVG注入,完全可定制

现代浏览器,Javascript禁用

SVG显示为<img>,不具有风格

Internet Explorer 8

显示后备PNG

Internet Explorer 8,禁用Javascript

显示损坏的图像 在最后一个场景中没有显示图像的原因是永远不会触发onerror,因此无法设置fallback source属性。

我想知道是否有一种方法(或黑客)使得后备图像显示,即使在SVG和Javascript支持都不可用的情况下也是如此。

注意:这是一个理论问题。虽然该项目需要IE8支持,但我认为这是一些遗留的要求,因为这些要求是在2010年编写的。

答案

实际上有一种方法可以做到这一点,但它并不完美,因为它对Internet Explorer 9,10和11有性能影响。

以下是没有Javascript且没有SVG支持的完全回退的实现:

<html>
<head>
  <script src="svg-inject.min.js"></script>
  <script>
    // Wrapper for SVGInject that does a little preprocessing
    SVGInject2 = function(img, options) {
      if (typeof SVGRect != 'undefined') { // check if SVG is supported
        // replace src with srcset if srcset is provided
        var srcset = img.srcset;
        if (srcset) {          
          img.src = srcset;
        }
        SVGInject(img, options);
      }
    }
  </script>
</head>
<body>
  <img src="image.png" srcset="image.svg" width="128" height="128" onload="SVGInject2(this)" />
</body>
</html>

它是如何工作的?

您可能知道HTML srcset元素有一个<img>属性,如果提供的话,它优先于src属性。 srcset由常青浏览器(Chrome,Firefox等)支持,但不受Internet Explorer(所有版本)支持。

如果禁用Javascript,则src属性中指定的PNG将显示在Internet Explorer上。在现代浏览器中,将使用带有SVG URL的srcset属性。

如果启用了Javascript,则在加载图像后调用函数SVGInject2()。这将检查浏览器是否支持SVG。如果未检测到SVG支持,则不执行任何操作。这应该只发生在IE8和更旧版本上,这将显示PNG,就像Javascript被禁用一样。如果检测到SVG支持,则src属性的值将替换为srcset属性中的值,并调用SVGInject()函数。这将通过XHR加载SVG(使用src属性中的URL),并用加载的SVG替换<img>元素。在大多数情况下,浏览器已将SVG放在缓存中(从初始加载),因此SVG仅通过网络传输一次。

但是,对Internet Explorer 9,10和11的性能会有负面影响。在这些浏览器上,无论如何都会加载PNG,因为不支持srcset。如果注入SVG,则不使用PNG,这意味着PNG传输是不必要的。在其他浏览器上,使用此回退方法时不应对性能产生任何影响。

免责声明:我是SVGInject的作者之一。

以上是关于SVG注入的后备,没有Javascript / SVG支持的主要内容,如果未能解决你的问题,请参考以下文章

html 具有PNG后备的SVG图像

SVG 用于浏览器中带有 PNG 后备的图像

scss 混合svg背景与png后备

javascript 将svg安全加载为xml并将其注入html

html 使用IE8的PNG后备处理内联SVG

html 内联SVG后备 - 特别是对于IE9的问题