Javascript 默认情况下加载PNG，如果可以升级到SVG

我想在默认情况下加载png图标，以支持无法可靠处理JS的旧设备。但是，如果在现代浏览器或设备上查看，则应该看到图标的svg版本。我正在头脑中运行以下代码

window.onload = function() {
  var i, elements = document.getElementsByTagName('img');

  for (var i = 0; i < elements.length; i++) {
    var filetype = elements[i].getAttribute('src').split("."),
        extention = filetype.pop();

    if(extention.toLowerCase() == 'png'){
      var hasSVGAttribute = elements[i].getAttribute('data-svg-enhance');

        if (hasSVGAttribute !== null) {
          elements[i].src = hasSVGAttribute;
          elements[i].removeAttribute('data-svg-enhance');
        } else {
          elements[i].src = filetype.join('.')+'.svg';
        }
     }

  };
}

window.onload=function（）{
变量i，elements=document.getElementsByTagName（'img'）；
对于（var i=0；i

这就是我修改过的图像标签的外观：

<img src="img/png/home.png" data-svg-enhance="img/svg/home.svg" alt="Home">

所有这些都适用于低端设备。它将加载png，根本不需要svg。问题出在像iPhone这样的高端设备上，它确实支持所有的技术。脚本可以工作，但默认情况下它会加载png，所以我现在同时加载png和svg，效率非常低

---

我不知道如何选择一个或另一个。

看起来这是最好的解决方案，尽管它不是100%有效的标记

      <svg width="36" height="36">
        <image xlink:href="img/svg/home.home.svg" src="img/png/home.home.png" width="36" height="36" alt="Shoprite Specials" />                
      </svg>

在旧设备上，这会回到png，并立即在有能力的设备上加载svg。但是IE9-11有问题

---

更多信息：

在设置

src

之前，您需要检测对SVG图像的支持。根据当前浏览器是否支持它，您可以适当地设置

src

。是的，但如果没有JS，您将如何检测到这一点。默认情况下必须有一个src设置，这样不支持JS的旧设备仍然会显示相应的png图像。谁说你需要在没有JS的情况下检测它？在JS中，可以使用特定的

src

动态添加图像，也可以查找元素（如通过

id

或

class

）并设置其

src

（可能会显示，默认情况下是隐藏的）