Ícones – SVG Sprites com CSS na prática

Criando um sprites usando ícones SVG.

por rogerio dias moreira 29/05/2015

O uso de ícones com SVG pode ser usado como uma alternativa mais poderosa, semântica e leve em relação a tradicional técnica de Icon Font.

O artigo abaixo abordará de forma prática o uso de ícones SVG com o uso das seguintes técnicas: SVG (defs, symbol), HTML + CSS + SVG (use). Como diziao Chapolin: “Sigam-me os bons!”

Obtendo arquivos SVG

O site FlatIcon contém alguns ícones gratuitos que podem ser baixados no formato SVG. Para este exemplo serão usados os dois arquivos SVG abaixo para compor o sprite:

A figura abaixo mostra o código fonte das duas imagens:

figura_exemplo_svg_fonte1

Percebam que existe muito ‘lixo’ nos arquivos gerados pela ferramenta do site mas o que realmente importa é o grupo (‘’) que contém os polígonos juntamente com a informação de viewBox que está destacada.

Montando arquivo svg contendo sprites

Usaremos uma técnica de SVG Symbol, juntamente com o elemento defs, para construir um arquivo SVG contendo sprites de imagens. Quando criamos um elemento <symbol /> podemos reusá-lo mais tarde através do elemento <use />. O MDN tem mais detalhes sobre esses elementos: https://developer.mozilla.org/pt-BR/docs/Web/SVG/Element/symbol e https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

A figura abaixo mostra a montagem do arquivo de sprites dentro da seguinte estrutura: <svg><defs><symbol /></defs></svg>. Para cada elemento devemos atribuir um id juntamente com a viewBox da imagem e transpor os polígonos para dentro do elemento.

figura_svg_exemplo_fonte2 Note que foi retirada a estilização (style) do SVG para que a mesma seja feita via CSS.

Usando ícones SVG dentro da página HTML

Para o uso das imagens dentro do html foi utilizado o elemento juntamente com o elemento para referenciar o sprite (symbol) contido no arquivo. O atributo role=’button’ foi utilizado obedecendo a especificação WAI-ARIA para acessibilidade, onde foi utilizado o atributo title para uma pequena descrição do que o button irá fazer.

O tamanho da imagem, juntamente com a cor de preenchimento, foi definida via CSS, sendo que podemos explorar efeitos simples como mudança de cor num evento mouse over, até efeitos complexos através de animações.

figura_svg_exemplo_fonte3

Resultado final

Este exemplo foi testado com Chrome e Firefox. O Internet Explorer não suporta nativamente (tinha que ser…) o uso do elemento para arquivos externos(veja http://caniuse.com/#feat=svg), sendo necessário o uso de polyfill (veja https://github.com/jonathantneal/svg4everybody).

Para quem quiser se aprofundar neste assunto não deixem de ler o seguinte artigo: http://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/

A figura abaixo mostra o resultado final.

figura_svg_exemplo_fonte4