<img src="https://image.flaticon.com/icons/svg/2328/2328513.svg">
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
svg, img {
max-width: 100%;
}
const convertImages = (query, callback) => {
const images = document.querySelectorAll(query);
images.forEach(image => {
fetch(image.src)
.then(res => res.text())
.then(data => {
const parser = new DOMParser();
const svg = parser.parseFromString(data, 'image/svg+xml').querySelector('svg');
if (image.id) svg.id = image.id;
if (image.className) svg.classList = image.classList;
image.parentNode.replaceChild(svg, image);
})
.then(callback)
.catch(error => console.error(error))
});
}
convertImages('img');
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.