Trasformare degli SVG linkati con img in SVG inline con jQuery

Per modificare i valori, siano il colore o la dimensione, di immagini SVG in CSS è necessario che siano inline e non inseriti con il tag <img>, risulta però molto più comodo includerli in quest’ultimo modo;
Includendoli con il tag <img> infatti potremmo aggiornare il file senza modificare il sorgente della pagina e al tempo stesso mantenere molto più ordinato il sorgente.
La soluzione è molto semplice in realtà, grazie a jQuery:

// cicliamo tutti tag img che hanno la classe 'svg'
$('img.svg').each(function(){
    // memorizziamo il file e gli attributi del file
    var $img = $(this);
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

    // effettuiamo una chiamata ajax al file per recuperare il contenuto dell'SVG
    $.get(imgURL, function(data) {
        // memorizziamo solamente il contenuto del tag svg ignorando il resto
        var $svg = $(data).find('svg');

        // se ha un id lo memorizziamo e lo assegnamo al nostro nuovo svg
        // ricostruito
        if(typeof imgID !== 'undefined') {
            $svg = $svg.attr('id', imgID);
        }
        // aggiorniamo allo stesso modo le classi aggiungendoci anche un prefisso
        if(typeof imgClass !== 'undefined') {
            $svg = $svg.attr('class', imgClass+' replaced-svg');
        }

        // Rimuoviamo tutti i tag xml che non sono validi per il w3c
        $svg = $svg.removeAttr('xmlns:a');

        // sostituiamo il tag iniziale img con il nuovo svg inline
        $img.replaceWith($svg);

    }, 'xml');
});
Matteo Currò

Autore: Mi chiamo , ho 29 anni e lavoro come freelance Web designer e Front-end developer aiutando startups e aziende a migliorare o a rivoluzionare la loro immagine nel web.