Blog do Maujor - Tutoriais e pensamentos, CSS, web standards, acessibilidade, tableless


Site da Apple adota imagens SVG

Publicado em: 2012-05-4 — 7.179 visualizacoes

    

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!

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique o livro para detalhes.



capa livro javascript   capa livro html   capa livro css   capa livro jquery   capa livro ajax-jquery
capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG

Enquete

Esta matéria foi publicada em: 2012-05-4 (sexta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2012/05/04/site-da-apple-adota-imagens-svg/trackback no seu site.

7 comentários na matéria: “Site da Apple adota imagens SVG”

  1. Leonardo disse:

    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.

  2. Rodrigo Capuski disse:

    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.

  3. Hallison Batista disse:

    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.

  4. Maujor disse:

    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.

  5. Agência de comunicação Sonna disse:

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

  6. cristiano disse:

    Uma tecnologia bem interessante, aposta de futuro.

  7. André Sobral disse:

    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!

Comentário:





Subscrição de comentários sem comentar

Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Voltar ao topo

PR Tool


ir topo