How to convert image (svg) to rendered svg in javascript?

Using an img tag with a src in essentially makes an HTTP request to the server for you. In this case you have to make the request yourself. You can do that with the Fetch API which is native to JavaScript.

// This should be the path to your SVG file. // Modify if incorrect. const svgFilePath = 'public/images/my_image.svg'; // Select the current image. const image = document.querySelector('.svg'); // Create a new dom parser to turn the SVG string into an element. const parser = new DOMParser(); // Fetch the file from the server. fetch(svgFilePath) .then(response => response.text()) .then(text => { // Turn the raw text into a document with the svg element in it. const parsed = parser.parseFromString(text, 'text/html'); // Select the <svg> element from that document. const svg = parsed.querySelector('svg'); // If both the image and svg are found, replace the image with the svg. if (image !== null && svg !== null) { image.replaceWith(svg); } }); 

And with handling multiple files. In this case I've used an array with objects that hold the id of the image element you want to get and the src of the svg file.

// Array of object containing the id of the image you want to replace // and the src of the SVG that takes it's place. const svgFiles = [ { id: 'image1', src: 'public/images/my_image_1.svg' }, { id: 'image2', src: 'public/images/my_image_2.svg' }, { id: 'image3', src: 'public/images/my_image_3.svg' }, ]; // Create a new dom parser to turn the SVG string into an element. const parser = new DOMParser(); // Loop over each object in the array and use the id and src // with a destructuring assignment. for (const { id, src } of svgFiles) { // Find the image. If it is not there, continue with the // loop to the next iteration. let image = document.getElementById(id); if (image === null) continue; // Fetch the file from the server. fetch(src) .then(response => response.text()) .then(text => { // Turn the raw text into a document with the svg element in it. const parsed = parser.parseFromString(text, 'text/html'); // Select the <svg> element from that document. const svg = parsed.querySelector('svg'); // If the svg is found, replace the image with the svg. // Otherwise, continue the loop. if (svg === null) continue; image.replaceWith(svg); }); }