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:
- https://www.flaticon.com/free-icon/save-disk_13842
- https://www.flaticon.com/free-icon/download-arrow_64090
A figura abaixo mostra o código fonte das duas imagens:
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 podemos reusá-lo mais tarde através do elemento . 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: . Para cada elemento devemos atribuir um id juntamente com a viewBox da imagem e transpor os polígonos para dentro do elemento.
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.
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 https://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: https://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/
A figura abaixo mostra o resultado final.