O que é um SVG sprite? Agrupando ícones em um único arquivo
Um SVG sprite combina muitos ícones SVG individuais em um único arquivo, para que o navegador os baixe em uma única requisição e referencie cada um por id.
Carregar dezenas de ícones como arquivos separados significa dezenas de requisições. Um SVG sprite os empacota em um único arquivo, e cada ícone é referenciado por um id onde quer que seja usado. É a resposta moderna, nítida e escalável às antigas técnicas de fonte de ícones e image sprite. Gerar o sprite a partir dos ícones de origem individuais é uma etapa do build que se encaixa no CI.
Como um sprite funciona
Cada ícone se torna um symbol com um id dentro de um único arquivo SVG. Na sua marcação, um pequeno elemento use referencia o symbol por id, para que o ícone renderize sem uma requisição separada por ícone.
Por que supera as alternativas
- Uma requisição em vez de uma por ícone.
- Ícones vetoriais permanecem nítidos em qualquer tamanho e em qualquer display.
- Os ícones podem ser estilizados com CSS, ao contrário dos sprites raster.
Sprite versus SVG inline
Colocar cada SVG inline evita uma requisição, mas incha o HTML e duplica ícones usados muitas vezes. Um sprite centraliza os ícones uma única vez e os referencia, o que é melhor quando os mesmos ícones aparecem repetidamente.
Gerando o sprite
Uma ferramenta de build coleta os arquivos de ícone individuais, otimiza cada um e os monta no sprite com ids estáveis. Fazer isso no build mantém o sprite em sincronia com os ícones de origem automaticamente.
Um SVG sprite no CI/CD
O build otimiza cada ícone, gera o sprite e adiciona content-hash a ele para cache, de modo que ele é entregue como um único static asset cacheável. Como o sprite é gerado a partir da origem, adicionar ou mudar um ícone o regenera de forma determinística em cada execução do pipeline.
Principais conclusões
- Um SVG sprite empacota muitos ícones em um único arquivo referenciado por id.
- Ele reduz requisições e mantém os ícones nítidos e estilizáveis por CSS.
- O CI gera e adiciona hash ao sprite como um único static asset cacheável.