🥇 SVG substituto para PNG no elemento img

Na minha empresa, adoramos trabalhar com svg, mas ele não é compatível com navegadores antigos como o IE8 e inferiores ( fonte ). Então, aqui está um bom substituto usando a opção Modernizr SVG

Primeiro, carregue o modernizr no cabeçalho do seu documento.

Em seguida, copie este código antes do final do corpo do documento:

// Check if browser can handle SVG
if(!Modernizr.svg){
    // Get all img tag of the document and create variables
    var i=document.getElementsByTagName("img"),j,y;

    // For each img tag
    for(j = i.length ; j-- ; ){
        y = i[j].src
        // If filenames ends with SVG
        if( y.match(/svg$/) ){
            // Replace "svg" by "png"
            i[j].src = y.slice(0,-3) + 'png'
        }
    }
}

Por último, crie uma versão png de cada imagem SVG que você tem em sua página no mesmo local que os arquivos SVG.

Aqui está uma versão condensada (143 bytes)

if(!Modernizr.svg)var i=document.getElementsByTagName("img"),j,y;for(j=i.length;j--;)y=i[j].src,y.match(/svg$/)&&(i[j].src=y.slice(0,-3)+"png")

Related Posts