Skip to content

Instantly share code, notes, and snippets.

@stowball
Last active January 16, 2023 23:17
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save stowball/e51dde035346eba783f3d8b54dbbf2a4 to your computer and use it in GitHub Desktop.
Save stowball/e51dde035346eba783f3d8b54dbbf2a4 to your computer and use it in GitHub Desktop.
Fetch a remote SVG as an <img> and convert it to an inline SVG
<img
alt="accessible text"
class="fill-color-red"
height="16"
src="some.svg"
width="16"
onload="fetchSvgInline(this)"
/>
<svg
aria-label="accessible text"
class="fill-color-red"
focusable="false"
height="16"
role="img"
width="16"
></svg>
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);
}
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)}
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');
});
};
@stowball
Copy link
Author

I think you need a space after width="${width}"

🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment