Como criar e gerenciar sprites SVG

O SVG está ganhando a corrida quando se trata de gráficos que são dimensionados na web. Designers e desenvolvedores estão escolhendo SVG em vez de fontes de ícones, imagens rasterizadas e sprites raster.

Os benefícios de usar o SVG são numerosos, mas para mim, tudo se resume à escalabilidade.

Usar o SVG pode ser tão simples quanto copiar e colar o código exportado de um programa baseado em vetores. A partir daí, o problema está em fornecer esses gráficos da maneira mais eficiente.

Digite sprites SVG. Estes trabalham em um padrão semelhante como sprites de imagem, porém, como eles são criados e incluídos em uma página da web é muito diferente.

Por que usar Sprites?

Os sprites ajudam a aumentar a velocidade, manter um fluxo de trabalho de desenvolvimento consistente e tornar a criação de ícones muito mais rápida. Os sprites SVG são normalmente criados usando ícones de uma forma ou forma semelhante, enquanto gráficos de escala maior são aplicativos únicos.

Em muitos casos, uma biblioteca de ícones será dimensionada em tamanho. Adicionar novos ícones precisa ser eficiente e, em última instância, fácil. Sprites SVG ajudam a tornar isso uma realidade.

Exportando o código SVG

SVGs podem ser exportados do seu programa gráfico vetorial favorito. Eu costumo usar uma mistura de ferramentas e descobri que todos eles têm grande suporte para exportar SVGs. Esboço destaca-se em particular, porque você pode selecionar um ícone ou gráfico e apertar o comando + c e ter esse código SVG copiado para a área de transferência. Então você pode ir ao seu editor de código, colar o código e fazer com que o gráfico apareça diante de seus olhos no navegador.

Otimizando o SVG para Web

Infelizmente, se você copiasse e colasse do Sketch, você pode achar que o código está abaixo do ideal e pode ser melhor otimizado. Existem algumas ferramentas para isso.

Se você usa o Sketch em particular, confira Plugin de Compressor SVGO . Ao exportar SVGs, o plug-in otimiza-os automaticamente antes de salvar o arquivo.

Se você não usa o Sketch, confira a mesma funcionalidade formulário de aplicativo ou se você preferir aplicativos da web, Jake Archibald montar um para você .

Criando Sprites SVG Manualmente

Criar um sprite SVG pode ser feito manualmente. Você precisará de um programa de desenho vetorial que possa gerar código SVG. Para isso, utilizarei o Sketch e exportarei alguns ícones como SVG.

Depois de exportar os ícones e executá-los através do plugin SVGO Compressor, deixo o seguinte para cada ícone. Note que neste ponto cada ícone é um arquivo separado:

Agora que nossos SVGs estão todos otimizados, podemos começar a criar o sprite usando o código acima. Para criar um sprite começar com o ambiente

Observe como o SVG tem um estilo de exibição in-line : nenhum . Isso é necessário para utilizar adequadamente os sprites do SVG. Mesmo que os ícones não sejam renderizados na página, haverá uma grande quantidade de espaço. Para evitar esse espaço extra que o SVG cria, estamos escondendo o SVG com CSS.

Simplesmente incluir o código dos ícones não será suficiente neste momento. Precisamos fazer uso de um elemento que lhe permitirá incorporar o código SVG, bem como fornecer seu próprio atributo viewBox específico, que é importante para os ícones que podem ser exibidos em diferentes larguras e alturas.

Elementos definidos dentro do elemento só pode ser processado para o navegador quando referenciado pelo elemento.

O sprite final se assemelha ao seguinte trecho:

Observe como eu adicionei atributos de id a cada elemento de símbolo. Isso é importante porque quando você faz referência a um ícone específico no sprite, você precisa de uma maneira única de segmentá-lo. Além disso, observe como cada ícone possui seus próprios parâmetros viewBox exclusivos. Os dois primeiros parâmetros serão quase sempre “0 0”; os segundos dois serão iguais ao tamanho do ícone que você exportou.

Incluindo um ícone na página

Com o sprite todo pronto para funcionar, precisamos de uma maneira de incluir ícones específicos em uma página. Para fazer isso, você utilizará o elemento escrito assim:

Na sua página, você deve ver o ícone aparecer e isso é tudo que existe para isso!

Automatizando Sprites SVG

Criar sprites em linha do SVG não é tão difícil. O problema está no fato de que muitos desenvolvedores precisam criar sprites para centenas de ícones ou mais para aplicativos robustos. Criar algo assim à mão pode consumir tempo e ser tedioso. Os desenvolvedores precisam de uma maneira de automatizar o processo para que eles não estejam perdendo tempo criando sprites manualmente.

Felizmente, existem ferramentas para tal coisa. Gerenciadores de tarefas, como Grunhido ou Gole tem plugins disponíveis para uso. Estes agilizam a criação dos sprites SVG. Ao fornecer cada arquivo SVG dentro de um determinado diretório, o plugin irá otimizar e gerar todos os SVGs em seu diretório referenciado para serem incluídos em um novo sprite.

Se você precisar adicionar mais ícones ao sprite, tudo o que você precisa fazer é exportar o ícone como um arquivo SVG e adicioná-lo à mesma pasta. A partir daí, o plug-in manipula a parte demorada.

Alguns plugins disponíveis em diferentes sabores: grunhir-svgstore , gulp-svg-sprites , svg-sprite .

Conclusão

Assim como todas as coisas no desenvolvimento da web, há mais de uma maneira de criar sprites SVG. Você pode referenciá-los externamente, incluí-los via CSS , e até mesmo torná-los responsivo .