Replace all images with .svg extension with SVG code and retain image’s classes

Here is a jQuery code snippet that will replace all your images with the SVG codes and retain all classes that images have, getting added to the SVG class attribute.

// Replace image tag with svg
const replaceWithSVG = () => {
  let imgSelector = '.replaceWithSVG';

  $(imgSelector).each(function(index, element) {
    const totalElements = $(imgSelector).length;
    let classes = $(element).attr('class');
    if( $(element).attr('src') || $(element).attr('data-src') ){
      let imgsrc = '';
      if( $(element).attr('src') ){
        imgsrc = $(element).attr('src');
      }
      if( $(element).attr('data-src') ){
        imgsrc = $(element).attr('data-src');
      }

      fetch( imgsrc )
      .then((response) => response.text())
      .then((svgCode) => {
        let tempElement = $(svgCode);
        tempElement.addClass( classes );
        $(element).after(tempElement);
        $(element).remove();
        if (index === totalElements - 1) {
          setTimeout(function(){
            executeAfterSVGsLoaded("replaceWithSVG", function () {
              setTimeout(function(){
                console.log( $(imgSelector).length + ' image/s replaced with SVG' );
                runAfterSvgLoad();
              }, 1000);
            });
          }, 1000);
        }
      })
      .catch((error) => {
        console.error("Error fetching SVG image:", error);
      });
    }else{
      console.log( $(imgSelector).length + ' image/s already replaced with SVG' );
    }
  });
  
  if($(imgSelector).length == 0){
    setTimeout(function(){
      console.log( $(imgSelector).length + ' image/s replaced with SVG' );
      runAfterSvgLoad();
    }, 1000);
  }
}


// Run animations after SVG load
const runAfterSvgLoad = () => {
  // Code to run after SVG load
}