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');
});
$('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');
});
Autore: Mi chiamo Matteo Currò, 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.
