🥇 Uma maneira simples de detectar nenhum suporte SVG para conteúdo e imagens de fundo

David Bushell e Chris Coyier escreveram em um blog sobre este pequeno truque para carregar um substituto de bitmap para um SVG carregado por meio de uma <img>tag:

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

Indo um pouco mais além, podemos detectar * se o SVG é compatível e ter uma classe CSS pronta para SVGs degradantes usados como imagens de fundo:

<img src="image.svg" onerror="this.onerror=null; this.src='image.png; document.documentElement.className+=' no-svg'">

Isso adicionará uma classe de no-svgà <html>tag se houver erros na imagem SVG. Quaisquer SVGs de plano de fundo definidos em seu CSS podem ser escritos assim:

.sprite {
    background-image: url(image.svg);
}

.no-svg .sprite {
    background-image: url(image.png);
}

Observação: isso só detectará se o SVG falha ao carregar, o que em 99,99% das vezes também deve estar relacionado ao suporte a SVG, e não a um problema de rede.

Use esta técnica apenas em um <img>(como o logotipo) para não modificar o DOM em cada imagem com falha ‘

Related Posts