Categories: movelsvgtodas

Site da Apple adota imagens SVG

A solução clássica para servir imagens para dispositivos móveis dotados da tecnologia Retina Display (Tela Retina) é criar uma imagem com dimensões dobradas em relação a imagem original e serví-la para uso daqueles dispositivos selecionando-os com media query e definindo a propriedade background-size apropriada. Essa é uma solução que melhora a apresentação da imagem naqueles dispositivos, mas está longe de ser a solução ideal.

Com o lançamento recente do iPad dotado da tecnologia Retina Display a Apple insatisfeita com a solução tradicional para servir imagens em alta resolução optou por ser servir uma imagem alternativa criada com SVG para tirar o máximo proveito da funcionalidade Retina Display.

Assim, os textos do menu de navegação do site da Apple usa uma imagem PNG para servir seu site para desktop e uma imagem SVG para seus dispositivos dotados da tecnologia Retina Display.

Como funciona?

Quando a página é carregada um script JavaScript identifica a existência da funcionalidade Retina Display no dispositivo que a carregou e caso positivo acrescenta uma classe denominada svg no elemento container da barra de navegação.

Com uso da classe serve-se a imagem SVG.

Observe a seguir trechos da marcação HTML e regras CSS do site da Apple, envolvidas nessa negociação da imagem.

Marcação HTML para a barra de navegação

<nav id="globalheader">
  <ul id="globalnav">
    <li id="gn-apple"><a href="\"><span>Apple</span></a><li>
    <li id="gn-store"><a href="..."><span>Store</span></a><li>
    <li id="gn-mac"><a href="..."><span>Mac</span></a><li>
    <li id="gn-ipod"><a href="..."><span>iPod</span></a><li>
    ...
  </ul>
  <div id="globalsearch">...</div>
</nav>

Observe a seguir as regras CSS para inserção das imagens dos textos do menu. Notar que os textos estão em uma imagem única e usa-se a técnica CSS Sprites para posicioná-los nos itens da navegação.

Veja a imagem PNG nesse link e a imagem SVG nesse link. Examine o código fonte da página que contém a imagem SVG.

#globalheader #globalnav li a span {
    background: url("/global/nav/images/globalnav_text.png") no-repeat scroll 50% 0 transparent;
    display: block;
    height: 30px;
    margin: 3px auto;
    width: 100%;
}
#globalheader.svg #globalnav li a span {
    background-image: url("/global/nav/images/globalnav_text.svg");
}
/* Técnica CSS Sprites */#globalheader #globalnav li#gn-apple a span {
    background-position: 50% 0;
}
#globalheader #globalnav li#gn-store a span {
    background-position: 50% -30px;
}
#globalheader #globalnav li#gn-mac a span {
    background-position: 50% -60px;
}
#globalheader #globalnav li#gn-ipod a span {
    background-position: 50% -90px;
}
/* Idem para os demais itens da navegação */

Chegou a hora das imagens SVG?

A solução da Apple para servir imagens em alta resolução coloca o centro do foco no uso de imagens SVG na Web. O suporte SVG em navegadores desktop modernos é consistente inclusive com Internet Explorer 9 já oferecendo suporte. Para dispositivos móveis a tecnologia SVG também é muito bem suportada.

Com essa sinalização da Apple para SVG o que você acha sobre essa tecnologia? Chegou a hora? Opine!

Maujor

View Comments

  • Bacana!

    É importante entender este conceito. Tendências e novidades chegam todos os dias e para nós desenvolvedores, é bom se atualizar sempre. Quanto a geração destas imagens e o emprego do SVG acredito que ainda a muito que se amadurecer e saber aplicar o uso correto.

    Abs e todos!

  • Muito interessante! Realmente as imagens da Apple são sempre de ótima qualidade. Abraços!

  • Olá Hallison,.
    Gráficos SVG são gerados com marcação XML e na maioria das vezes são mais "leves" do que gráficos bitmap e não ao contrário como você sugere.
    O Intertnet Explorer 9 já vem com suporte nativo razoável para SVG.
    O uso da biblioteca SVG Web permite suporte nos IE6+
    Um abraço e grato pelo comentário.

  • Finalmente. A tecnologia por trás do formato SVG é muito confiável e robusta. Infelizmente, devido as limitações de conexão de outrora, o formato foi substituído por outros com mais "leves" como o GIF, JPEG e PNG. Mas nos anos recentes a qualidade das conexões melhoraram significativamente e podemos finalmente usufruir de seus benefícios dos quais, na minha opinião, os mais importantes são a renderização vetorial (que oferece melhor qualidade nas imagens) e a animação.

    Infelizmente, como tudo não é perfeito, a MS não desenvolveu com suporte para SVG em seu IE e, como já citado pelo Rodrigo, terá os mesmos problemas do PNG.

    Leiam maiores detalhes em http://en.wikipedia.org/wiki/Svg.

    Parabéns pela postagem.

  • Realmente uma tecnologia que poderá ser muito usada. Principalmente pela facilidade que os dispositivos móveis têm de usar zoom nas páginas.
    Bem provável que sua adoção será como a do PNG transparente na era IE6, no começo com cautela, e em projetos específicos. Depois evoluindo gradualmente conforme o suporte dos navegadores.

  • Acho que com o aumento da densidade de pixels nas telas certamente a SVG se tornará a opção mais viável. Como essas telas vêm com dispositivos atuais não temos de nos preocupar com suporte, basta adicionar um fallback para PNG como a Apple fez.

    Muito legal ver esse uso, espero que os desenvolvedores passem a adaptar seus sites com SVG; afinal, a Apple dita tedências e certamente teremos telas-"retina" fora dos smartphones e tablets ficando populares.

Share
Published by
Maujor

Recent Posts

Teste seu conhecimento #20

Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…

7 anos ago

Teste seu conhecimento #19

Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…

10 anos ago

JavaScript bubbling e capturing

Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…

10 anos ago

HTML5 – W3C versus WHATWG

HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…

10 anos ago

Seria esse o futuro das imagens responsivas?

Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…

11 anos ago

BrazilJS Conf 2013

Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…

11 anos ago