Imagens SVG com fallback na Web

SVG é o formato vetorial para imagens mais famoso da Web. Existe há muitos anos mas só nos últimos anos ganhou maiores adeptos. Existem vários motivos pra se usar vetores, sendo o principal a independência de tamanho e resolução. Algo particularmente muito útil em design responsivo e aparelhos com diferentes densidades de pixels.

Usar SVG hoje é bastante simples, basta uma tag IMG comum:

<img src="icone.svg">

Ou, se usar CSS, basta o background-image correto:

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

O único problema desse mundo ideal é justo o suporte nos navegadores. SVG tem excelente suporte, de todos os browsers modernos. O IE desde a versão 9 já suporta. As grandes exceções, porém, são IE8 e anteriores, e Android 2.x. São navegadores mais antigos que não se aplicam a todos os públicos, então talvez não afete tanto seu caso – no site da Caelum, por exemplo, com público mais atualizado, esses navegadores são bastante inexpressivos.

Mas muitos outros sites têm requisitos diferentes. Recentemente lançamos a MusicDot, uma escola de música online, com cursos online de teclado, piano, violão etc. O público é bastante geral – músicos, amadores, interessados por música etc. E muitos desses alunos usam navegadores antigos.

No site do MusicDot, usamos muitos ícones e quisemos usar SVG. Mas preocupados com fallback caso o navegador seja incompatível.

Usando CSS, a solução mais comum é usar Modernizr. Ele coloca algumas classes a mais no elemento raiz da página que nos permitem detectar o suporte a SVG e, assim, carregar a imagem correta:

.svg .conteudo {
   background-image: url(logo-musicdot.svg);
}
.no-svg .conteudo {
   background-image: url(logo-musicdot.png);
}

No caso da tag IMG, não há uma solução tão elegante. Algumas pessoas defendem o uso de um SRC dinâmico, testando antes o suporte a SVG para aí atribuir o SRC adequado. O ruim dessa solução é que ela compromete a performance, já que adia o carregamento da imagem até essa resolução ser feita. E, se pensarmos que apenas navegadores muito antigos não suportam SVG, seria uma solução que sacrifica a maioria, que tem navegadores modernos.

Uma solução simples e intermediária é trabalhar com o onerror na imagem:

<img src="musicdot.svg" onerror="this.src='musicdot.png'">

Ele tenta baixar o ícone SVG e, no caso de problemas, como falta de suporte, baixa a versão PNG. Nos poucos navegadores ainda sem suporte (menos de 5% da população geral), haverá 2 requests, desperdiçando um pouco a banda. Mas parece uma solução justa que prioriza a maioria dos navegadores compatíveis, sem deixar os antigos na mão.

É essa solução que usamos no novo site do MusicDot e em outros projetos nossos. E você, o que acha? Tem usado SVG já em produção? De que maneiras?

1 Comentário

  1. Lucas Augusto 09/05/2014 at 23:43 #

    O IE sempre vai ser um problema rsrsr…
    Acho também que já passou da hora de a apple dar suporte a SVG no desenvolvimento para iOS. Acho que isso ajudaria muito para casos de uma imagem usada em mais de um lugar com tamanho diferente, sem contar o tamanho que é insignificante.

    Muito bom o post Sérgio. Valeu.

Deixe uma resposta