Sprite com SVG
Quando se trata de implementar um sistema de ícone para seus projetos web, SVG é uma ótima escolha! Neste artigo vamos criar um SVG Sprite usando uma técnica que baseia-se na utilização de dois elementos: <symbol> e <use>.
O elemento <symbol> é usado para agrupar elementos, já o elemento <use> usamos para fazer referência ao ícone que será usado.
Vamos considerar o código SVG abaixo:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
<path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
</svg>
Logo em seguida vamos “embrulhar” o seu conteúdo dentro de um <symbol>, desta forma:
<svg>
<symbol viewBox="0 0 24 24" id="heart">
<path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
</symbol>
</svg>
Se inserirmos esse código na página, percebemos que o ícone não é visível, e isso é porque precisamos fazer referência a ele usando o elemento <use>, assim:
<body>
<svg style="display: none;">
<symbol viewBox="0 0 24 24" id="heart">
<path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
</symbol>
</svg>
<svg>
<use xlink:href="#heart"/> <!-- this is our visible icon -->
</svg>
</body>
Resultado:
Em outras palavras, depois de ter definido um grupo de objetos gráficos (usando <symbol>), você pode exibi-lo quantas vezes quiser usando o elemento <use>. Você especifica o grupo que deseja exibir usando o atributo xlink:href, que, no nosso caso, é o ID do <symbol> que deseja exibir (#heart).
Mesmo se o <symbol> não for apresentado, o elemento <svg> que o envolve ainda é processado e vai ocupar algum espaço na sua página, e é por isso que precisamos escondê-lo.
Agora que conhecemos os elementos <symbol> e <use> e sabemos como funcionam, vamos construir nosso Sprite SVG.
Criando seu SVG Sprite
Primeiro, você precisa ter todos os seus ícones, cada um em um arquivo .svg separado. Você pode, então, criar um novo arquivo .svg (Vazio). Vou chamá-lo de myicons.svg.
Dentro deste novo arquivo, inserir uma tag <svg> e, em seguida, para cada um de seus ícones, um <symbol> que irá englobar o código do ícone.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 24 24" id="heart">
<path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="arrow">
<path fill="#0f0f0f" d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M22.8,13.6l-6,8C16.6,21.9,16.3,22,16,22 s-0.6-0.1-0.8-0.4l-6-8c-0.2-0.3-0.3-0.7-0.1-1S9.6,12,10,12h12c0.4,0,0.7,0.2,0.9,0.6S23,13.3,22.8,13.6z"></path>
</symbol>
</svg>
Explicação do nosso código SVG Sprite:
- Cada elemento <symbol> precisa ter um ID; este ID será usado para fazer referência a ela dentro do seu documento usando <use>.
- Note que especificamos um atributo ViewBox para cada <symbol>. Ele permite visualizarmos uma parte específica do elemento.
- Atributo ViewBox é composto de 4 números, os 2 primeiros são geralmente zero (mas realmente depende de como o ícone foi desenhado), enquanto os outros 2 são a largura e altura do SVG.
- Desta forma, seus ícones não precisam ter a mesma proporção, pois você pode definir um atributo ViewBox diferente para cada um deles.
Como etapa final, podemos adicionar uma tag <title> para cada ícone SVG para melhorar a acessibilidade:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 24 24" id="heart">
<title>Heart</title>
<path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="arrow">
<title>Arrow</title>
<path fill="#0f0f0f" d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M22.8,13.6l-6,8C16.6,21.9,16.3,22,16,22 s-0.6-0.1-0.8-0.4l-6-8c-0.2-0.3-0.3-0.7-0.1-1S9.6,12,10,12h12c0.4,0,0.7,0.2,0.9,0.6S23,13.3,22.8,13.6z"></path>
</symbol>
</svg>
Nosso SVG Sprite está pronto para ser usado. Podemos salvar o arquivo myicons.svg dentro de sua pasta de imagens (vou chamar a pasta de img).
Para exibir um de seus ícones, tudo que você precisa fazer é inserir o seguinte trecho em algum lugar no seu documento:
<svg>
<use xlink:href="img/myicons.svg#heart"/>
</svg>
Compatibilidade dos Navegadores
Infelizmente, fazendo referência SVG externa usando <use> não funciona no Internet Explorer, nem mesmo IE9 + (felizmente, esse problema foi resolvido no Microsoft Edge).
Como corrigir isso? Vamos dar uma olhada em duas soluções possíveis:
1) Podemos incluir o sprite SVG na parte superior do documento e, em seguida, fazer referência a cada ícone usando, novamente, a tag <use>:
<svg style="display: none;"> <!-- this is our svg sprite -->
<symbol viewBox="0 0 24 24" id="heart">
<path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="arrow">
<!-- ... -->
</symbol>
</svg>
<svg>
<use xlink:href="#heart"/> <!-- this is our visible icon -->
</svg>
Desta vez o atributo xlink: href é igual a apenas o identificador ID (que não inclui a fonte externa).
Esta técnica funciona muito bem, mas tem a desvantagem de o sprite SVG não ficar armazenada em cache.
2) Podemos usar um polyfill, um bom exemplo é o SVGxuse. Este polyfill busca SVGs externos referenciados no <use> quando o navegador em si não consegue fazê-lo. Basicamente, o polyfill passa por cada elemento <use>, para referenciar um SVG externo que o navegador não conseguiu carregar, pega o SVG e prepara-o para o <body> do seu documento. Ótimo!
Ícones SVG referenciados desta forma têm o seu próprio DOM separado, que não é acessível por seletores CSS. Vamos dizer que nós temos o nosso ícone:
<svg class="icon">
<use xlink:href="img/myicons.svg#heart"/>
</svg>
E fizemos isso:
.icon path { fill: #000000; }
Não vai funcionar.
Como resolver este problema? Vamos dizer que você deseja alterar a cor de preenchimento de seus ícones. Primeiro, verifique se o atributo de preenchimento não é definido em linha (estilo CSS inline).
Este é o seu código de Sprite SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 24 24" id="heart">
<title>Heart</title>
<path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="arrow">
<title>Arrow</title>
<path fill="#0f0f0f" d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M22.8,13.6l-6,8C16.6,21.9,16.3,22,16,22 s-0.6-0.1-0.8-0.4l-6-8c-0.2-0.3-0.3-0.7-0.1-1S9.6,12,10,12h12c0.4,0,0.7,0.2,0.9,0.6S23,13.3,22.8,13.6z"></path>
</symbol>
</svg>
você precisará remover o atributo de preenchimento inline, assim:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 24 24" id="heart">
<title>Heart</title>
<path d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="arrow">
<title>Arrow</title>
<path d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M22.8,13.6l-6,8C16.6,21.9,16.3,22,16,22 s-0.6-0.1-0.8-0.4l-6-8c-0.2-0.3-0.3-0.7-0.1-1S9.6,12,10,12h12c0.4,0,0.7,0.2,0.9,0.6S23,13.3,22.8,13.6z"></path>
</symbol>
</svg>
E acrescentar no seu CSS:
.icon {
fill: #00000; /* this will be your icons default color */
}
Se queremos mudar a cor de preenchimento de apenas um ícone, podemos estilizar este ícone usando uma classe:
<svg class="icon my-class-name">
<use xlink:href="img/myicons.svg#heart"></use>
<svg>
E altere seu valor de preenchimento usando css:
.my-class-name {
fill: red;
}
Sites para criar ícones SVG
Criar seus ícones SVG manualmente pode ser tornar uma tarefa cansativa. Utilize ferramentas que automatizam essa tarefa.
Fonte: https://nucleoapp.com/how-to-create-an-icon-system-using-svg-symbols/
Curta a página do blog kadunew no Facebook. Siga-me no Twitter: @kadunew.