Advertisement
  1. Web Design
  2. SVG

Como Implementar Sprites em SVG para Vários Navegadores

by
Read Time:19 minsLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Nesse tutorial, mostrarei uma implementação básica de alguns ícones em SVG, como prover uma versão alternativa e como torná-los em um sprite SVG.

Implementação Básica em SVG

Para esse tutorial, usarei uma página única, que agirá parecido com um cartão de visitas/negócios. Ele apresentará minha pessoa e mostrará três perfis de rede sociais relevante ao meu trabalho.

Ícones da flaticon

Da captura de tela acima, você pode ver que estou usando ícones (para Twitter, Dribbble e GitHub) para referenciar simbolicamente meus perfis nessas redes sociais. Baixei os ícones da flaticon, que possuir uma grande variedade de ícones & símbolos, tanto em formato vetor quanto rasterizado. 

PNG e SVG

Começaremos usando as versões PNG desses ícones, pelo fato da retro compatibilidade, e depois prepararemos as versões em SVG para usar nos navegadores que dão suporte à tecnologia.

Usei o Sketch para gerar as versões PNG dos meus ícones, então usarei ele novamente para preparar os ícones para uso no SVG.

My chosen icons in Sketch with named layers  groupsMy chosen icons in Sketch with named layers  groupsMy chosen icons in Sketch with named layers  groups

Se prestar atenção na captura de tela acima, perceberá que nomeei, apropriadamente, todos os grupos e formas no painel do lado esquerdo (O Adobe Illustrator tem uma visão parecida no painel de Camadas). É importante nomear todos os seus recursos corretamente, uma vez que, além de ajudar a manter a organização, também ajudará na hora que formos usá-los num passo mais a frente, nesse tutorial. 

Exportando os SVGs

Agora, exportarei os ícones como SVGs, que é bem simples, usando a ferramenta de recorte (slicing tool) no Sketch. Para maiores informações sobre como isso funciona, leia: Entendendo as Opções de Exportação do Sketch. Exportarei como arquivos separados e os colocarei dentro do diretório de imagens do meu projeto.

Normalmente, para mostrar uma imagem em seu site, você a referenciaria através do atributo src de um elemento ou algo similar: 

Entretanto, com SVG, há inúmeras formas de usá-lo dentro de um documento HTML. Por exemplo, podemos usar o código SVG diretamente na página - eis como o código se parece:

Esse é um dos ícones que exportei, no formato XML. Esse código é bem parecido com o HTML (é um formato estrutural), significando que podemos colá-lo diretamente na página. 

Adicionando SVG diretamente no HTML

Comecemos com o HTML base da página, que inclui os ícones em PNG com suas âncoras e um container:

Agora, copiarei e colarei o código SVG, contudo, ignorarei a linha inicial, que se refere à codificação dos caracteres do arquivo, além de outros detalhes. Como o HTML já contém essa informação, não precisamos duplicá-la.

Coloquei o SVG logo acima do ícone PNG correspondente. Por hora, comentarei o código da tag do ícone em PNG para que ele não apareça ao lado da versão em SVG. 

SVG Mais Limpo

Também limparei um pouco o código do SVG. Remover atributos dos elementos é opcional, uma vez que a maioria dos trechos que estou removendo não afetarão como o SVG se comportará. Eis o antes e o depois, caso queira fazer o mesmo com o seu:

Veja os elementos que removi. Os elementos <title>, <desc>, e <defs> não são necessários agora, mas precisaremos deles mais tarde. Também tem alguns elementos <g> que se referem aos grupos, correspondendo aos grupos criados no documento do Sketch. Por padrão, o Sketch coloca tudo dentro de uma página, por isso o nome do elemento de grupo <g id=”Page-1”…. Você pode remover isso, uma vez que não tem uso para nós (o grupo dentro dele é bem mais importante). O Sketch dá suporte a uma opção de gerar SVGs mais limpos durante a exportação, entretanto, não há mal algum em limpar o código por conta própria.

O último ponto é remover os atributos de altura e largura dentro do próprio elemento SVG. Eles precisarão ser compensados no arquivo CSS, como mostrado abaixo:

Se seguiu todos os passos, você deve ser capaz de ver uma versão vetorizada e precisa do seu ícone, usando seu navegador. 

Dica: Verifique se o gráfico é um SVG de verdade, dando zoom, usando Command-+ (ou CTRL-+) quando visualizá-lo em seu navegador. O ícone deve permanecer preciso, independentemente da quantidade zoom.

Provendo Uma Versão Alternativa

Se estiver usando essa técnica para um serviço de terceiro, talvez esteja em dúvida qual o suporte dos navegadores para ela. SVG direto no documento é suportado por todos os navegadores, exceto pelo Internet Explorer 8 (ou anterior) e Opera Mini. O Can I Use aponta que o IE8 é usado por cerca de 4% dos usuários e o Opera Mini pro cerca de 3%. Talvez você não precise criar uma versão alternativa, porém, demonstrarei essa possibilidade.

Eis um dos meus ícones em SVG dentro da página. Perceberá que o ícone original em PNG ainda está lá, comentado. Esse PNG será nossa versão alternativa. 

Removendo os Comentários

Primeiro, removerei os comentários. Agora, precisamos mover o elemento <img> para cima, para dentro do elemento <svg>, logo após o grupo que contém o ícone em SVG.

O próximo passo é envolver o elemento <img> em um elemento específico ao SVG, chamado foreignObject. Se seu navegador não é capaz de compreender a informação dentro do código do SVG, ele referenciará o “objeto externo” e, nesse caso, usará o elemento <img> dentro dele. Também devemos informar ao navegador para optar pela versão vetorizada, caso suporte. Essa é a tarefa do elemento <switch>, o qual usei para envolver tanto o grupo do SVG quanto o foreignObject

Eis o código atualizado:

Se estiver seguindo o processo e estruturando seu HTML tal qual o meu, caso o navegador usado não dê suporte a vetores, ele deverá usar a versão rasterizada no lugar.

Criando um Sprite em SVG

Sprites em SVG agem da mesma forma que sprites de imagens. De forma simples, sprites são coleções de elementos gráficos combinados em uma única imagem. Cada imagem é escolhida através do uso do CSS e HTML, geralmente, especificando coordenadas e a área de visualização. 

Os principais benefícios disso são o tempo de carregamento aprimorado da página, melhor fluxo de trabalho e consistência entre os elementos gráficos da página. Os segundo e terceiro pontos aplicam-se muito bem aos sprites em SVG. Ao invés de vários blocos de código SVG injetados diretamente na página, teríamos apenas um único lugar para atualizar nossos SVGs.

Para começar, criarei um novo elemento <svg> dentro do elemento <head> da minha página, logo antes da tag de fechamento desse elemento. Esse novo SVG guardará todos os ícones anteriormente colocados na página.

Depois, precisarei mover os ícones para dentro dele. Não preciso mover todo o SVG, apenas o grupo do elemento e seu conteúdo. Dessa forma, posso empilhá-los dentro do elemento <svg> recém criado. 

Nota: Se você for acostumado a usar o Grunt, há um plugin que automatizará a união de todos seus arquivos SVGs separados.

Esconda!

Agora que temos todos nossos ícones no elemento head, temos de escondê-lo: adicionar o atributo display=”none” ao novo <svg> indicará que todos os ícones não aparecerão no topo da página.

Definindo Cada Ícone

Nosso próximo passo é definir cada ícone de modo que possamos reusá-lo na página. É aqui que os elementos defs que removemos anteriormente, voltam à ação. Ao usá-lo para envolver todos os grupos, dessa forma, envolvendo todos os ícones, sou capaz de indicar que quero reutilizá-los em outras partes da página.

Usando os Ícones

Os ícones estão definidos mas precisamos de algum método para usá-los. Essa é a tarefa do elemento use. O elemento <use> permite-nos usar qualquer elemento dentro do elemento <defs> em qualquer lugar de nossa página. A forma que usaremos para pegar os elementos é através de seus IDs. Por isso que é importante nomear nossos ícones no documento inicial do Sketch. 

Anote os IDs do exemplo acima e veja que estou referenciando cada um usando o elemento use, dessa forma <use xlink:href="#twitter-icon"></use>.

Se tiver seguido corretamente os passos, você não verá qualquer mudança nos gráficos que aparecem na página, contudo, você poderá reusá-los (em qualquer tamanho que quiser) quantas vezes quiser.

Aperfeiçoando Seu Sprite SVG

Um ponto interessante do uso de sprites SVG é que o código visível da sua página é bem limpo e pode ser lido mais facilmente por outras pessoas trabalhando com seu código. Porém, podemos aprimorar mais ainda. 

Logo abaixo, mudei os elementos <g> no meu sprite SVG pelo elemento symbol, além disso, movi o atributo viewbox dos elementos SVG na página para os novos elementos symbol.

Usar o elemento <symbol> não é apenas mais semântico, pelo menos nesse exemplo, também nos evita a repetição do atributo viewbox em nossos elementos <svg> e <use>. Podemos trazer de voltas os elementos title e desc que removemos e usá-los para aprimorar a acessibilidade de nossos ícones.

Nota: Tenha em mente que o conteúdo dos elementos <desc>, por padrão no IE7, são mostrados ao usuário.

Ao alterar o elemento g por um symbol, fomos capazes de realizar todos esses aprimoramentos. Também podemos remover o elemento <defs> sprite SVG, tornando nosso código ainda mais limpo.

Conclusão

E terminamos! O que começou apenas como ícones rasterizados, tornou-se em uma solução extremamente poderosa usando ícones vetorizados, que podem ser reusados e redimensionados facilmente. Espero que tenha curtido esse tutorial e que curta brincar mais e mais com SVGs em seus próximos projetos.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.