Fetch a remote SVG as an <img> and convert it to an inline SVG

example-input.html

<img
  alt="accessible text"
  class="fill-color-red"
  height="16"
  src="some.svg"
  width="16"
  onload="fetchSvgInline(this)"
/>

example-output.html

<svg
  aria-label="accessible text"
  class="fill-color-red"
  focusable="false"
  height="16"
  role="img"
  width="16"
>…</svg>

fetchSvgInline.js

function fetchSvgInline(image) {
  var xhr = new XMLHttpRequest;
  var url = image.currentSrc || image.src;

  if ('withCredentials' in xhr) {
    xhr.withCredentials;
    xhr.open('GET', url, true);
  }
  else {
    if (typeof XDomainRequest == 'undefined') {
      return;
    }

    xhr = new XDomainRequest;
    xhr.open('GET', url);
  }

  xhr.onload = function() {
    var svgStr = xhr.responseText;
    
    if (svgStr.indexOf('<svg') === -1) {
      return;
    }
    
    var span = document.createElement('span');

    span.innerHTML = svgStr;

    var inlineSvg = span.getElementsByTagName('svg')[0];

    inlineSvg.setAttribute('aria-label', image.alt || '');
    inlineSvg.setAttribute('class', image.className); // IE doesn't support classList on SVGs
    inlineSvg.setAttribute('focusable', false);
    inlineSvg.setAttribute('role', 'img');

    if (image.height) {
      inlineSvg.setAttribute('height', image.height);
    }

    if (image.width) {
      inlineSvg.setAttribute('width', image.width);
    }

    image.parentNode.replaceChild(inlineSvg, image);
  };

  xhr.onerror = function() {
    image.classList.add('not-inline');
  };

  setTimeout(xhr.send(), 0);
}

fetchSvgInline.min.js

function fetchSvgInline(e){var t=new XMLHttpRequest,i=e.currentSrc||e.src;if("withCredentials"in t)t.withCredentials,t.open("GET",i,!0);else{if("undefined"==typeof XDomainRequest)return;(t=new XDomainRequest).open("GET",i)}t.onload=function(){var i=t.responseText;if(-1!==i.indexOf("<svg")){var n=document.createElement("span");n.innerHTML=i;var s=n.getElementsByTagName("svg")[0];s.setAttribute("aria-label",e.alt||""),s.setAttribute("class",e.className),s.setAttribute("focusable",!1),s.setAttribute("role","img"),e.height&&s.setAttribute("height",e.height),e.width&&s.setAttribute("width",e.width),e.parentNode.replaceChild(s,e)}},t.onerror=function(){e.classList.add("not-inline")},setTimeout(t.send(),0)}

fetchSvgInline.modern.js

const fetchSvgInline = (image) => {   
  fetch(image.currentSrc || image.src)
    .then((response) => response.text())
    .then((response) => {
      const svgStr = response;

      if (svgStr.indexOf('<svg') === -1) {
        return;
      }

      const span = document.createElement('span');
      
      span.innerHTML = svgStr;

      const inlineSvg = span.getElementsByTagName('svg')[0];
      
      inlineSvg.setAttribute('aria-label', image.alt || '');
      inlineSvg.setAttribute('class', image.className); // IE doesn't support classList on SVGs
      inlineSvg.setAttribute('focusable', false);
      inlineSvg.setAttribute('role', 'img');
      
      if (image.height) {
        inlineSvg.setAttribute('height', image.height);
      }
      
      if (image.width) {
        inlineSvg.setAttribute('width', image.width);
      }

      image.parentNode.replaceChild(inlineSvg, image);
    })
    .catch(() => {
      image.classList.add('not-inline');
    });
};