检测到IE浏览器时能否用给定代码将SVG图片替换为PNG？

云原生阿岚

2026-5-25

解决方案

当然可以实现这个需求！你现有的IE检测函数完全能用，只需要扩展一下逻辑来修改<img>标签的src属性就行。这里有几种实用的实现方式，你可以根据自己的场景选择：

方式1：批量替换所有SVG图片

如果页面上所有.svg后缀的图片都需要在IE中切换成.png，可以用这段代码：

function isIE() { 
  var ua = window.navigator.userAgent; 
  return (ua.indexOf("MSIE ") > 0 || !! ua.match(/Trident.*rv\:11\./)); 
}

// 等页面DOM加载完成后再执行操作
window.addEventListener('load', function() {
  if (isIE()) {
    // 获取页面上所有img标签
    const svgImgs = document.querySelectorAll('img[src$=".svg"]');
    svgImgs.forEach(img => {
      // 把src里的.svg替换成.png
      img.src = img.src.replace(/\.svg$/, '.png');
    });
  }
});

方式2：只替换指定类的SVG图片

如果只想针对带有特定类名（比如ie-switchable-svg）的图片做替换，这样更精准，不会影响其他SVG：

function isIE() { 
  var ua = window.navigator.userAgent; 
  return (ua.indexOf("MSIE ") > 0 || !! ua.match(/Trident.*rv\:11\./)); 
}

window.addEventListener('load', function() {
  if (isIE()) {
    const targetImgs = document.querySelectorAll('img.ie-switchable-svg');
    targetImgs.forEach(img => {
      img.src = img.src.replace('.svg', '.png');
    });
  }
});