Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Site da Apple adota imagens SVG

Publicado em: 2012-05-4 — 8.515 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!

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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. André SobralNo Gravatar 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!

  2. cristianoNo Gravatar disse:

    Uma tecnologia bem interessante, aposta de futuro.

  3. Agência de comunicação SonnaNo Gravatar disse:

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

  4. MaujorNo Gravatar 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. Hallison BatistaNo Gravatar 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.

  6. Rodrigo CapuskiNo Gravatar 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.

  7. LeonardoNo Gravatar 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.

Comentário:





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

Subscribe without commenting

topo