Sprite de símbolos SVG
Combinar ícones SVG num único sprite de símbolos
Combine uma pasta de ícones SVG em um sprite reutilizável. Cada arquivo se torna um <symbol> com um snippet <use> pronto, enquanto IDs internos prefixados evitam a colisão de gradientes, máscaras e caminhos de clipe.
Pré-visualização do sprite
Adicione arquivos SVG para montar um sprite.
Estas opções se aplicam ao sprite inteiro.
Sprite de símbolos ou spritesheet?
Um sprite de símbolos é um único arquivo SVG que guarda um <symbol> por ícone. Nada é desenhado até você referenciar um símbolo com <use>, então os ícones continuam vetoriais, continuam estilizáveis pelo CSS e continuam nítidos em qualquer tamanho. É isso que você quer para um conjunto de ícones de interface.
Um spritesheet é uma única imagem com todos os ícones dispostos numa grade, desenhados com background-position ou com um mapa de quadros em JSON. Os ícones são pixels em coordenadas fixas, que é o que motores de jogo e renderizadores de canvas esperam, e o que você precisa quando o destino não consegue usar <use> de jeito nenhum.
Abrir o gerador de spritesheet SVGQuando usar um sprite de símbolos
Um sprite de símbolo mantém um conjunto de ícones em um arquivo SVG reutilizável, e cada instância de ícone se torna um elemento <use> curto em vez de um bloco repetido de caminhos. Isto é útil para navegação, botões, tabelas e outras interfaces que reutilizam os mesmos ícones. Os símbolos permanecem como marcação vetorial, portanto permanecem nítidos e podem herdar a cor e o tamanho de CSS.
Como montar um sprite de símbolos SVG online
- 1
Solte seus ícones SVG, ou clique em SELECIONAR ARQUIVOS, para adicioná-los à fila. Até 40 por vez, e a ordem da lista é a ordem dos símbolos.
- 2
Escolha um sprite externo ou embutido, decida se quer otimizar os ícones e normalizar os viewBox deles, e veja a grade de ícones ser remontada a partir do próprio sprite.
- 3
Clique em SALVAR TUDO para baixar o sprite.svg, ou um ZIP com sprite.svg e usage.html quando os exemplos de uso estiverem ativados.
Privacidade: seus arquivos não saem do navegador
A conversão é executada localmente em seu navegador usando JavaScript e WebAssembly. Não há upload de arquivos ou conversão no servidor, portanto, os arquivos adicionados permanecem no seu dispositivo.
O processamento local ajuda a proteger logotipos confidenciais, documentos internos e obras de arte não divulgadas de clientes. As páginas e o código de conversão são armazenados em cache à medida que você os utiliza, para que as ferramentas que você já abriu possam continuar funcionando sem uma conexão de rede.
Perguntas frequentes
O que acontece quando dois arquivos geram o mesmo ID?
Os IDs vêm do nome do arquivo sem a extensão, em minúsculas e convertido em slug, então "Arrow Left.svg" vira arrow-left. Quando dois arquivos geram o mesmo ID, o primeiro fica com ele e os seguintes recebem -2, -3, e assim por diante. Renomear um arquivo na lista muda o ID na hora, e ordenar ou arrastar a lista também, porque quem fica com o ID sem sufixo é o primeiro arquivo da ordem.
Devo usar um sprite externo ou embutido?
Um sprite externo é um arquivo sprite.svg que você referencia com <use href="sprite.svg#icon-id">. Ele fica em cache como qualquer outro recurso e mantém seu HTML pequeno, ao custo de uma requisição a mais, e precisa vir da mesma origem, a não ser que o CORS permita outra coisa. Um sprite embutido é a mesma marcação colada na página dentro de um <svg> oculto e referenciada com <use href="#icon-id">. Não precisa de requisição e sempre resolve, mas esses bytes se repetem em todo documento HTML que o usa.
Montar um sprite muda a aparência dos meus ícones?
Não. O <svg> raiz de cada arquivo vira um <symbol> com o mesmo viewBox e os filhos são levados sem alteração, tirando o prefixo nos IDs. "Otimizar SVG" executa o mesmo conjunto de passos seguros do Otimizador de SVG, então comentários, metadados do editor e atributos redundantes vão embora enquanto a geometria fica. "Normalizar o viewBox" recentraliza cada ícone numa caixa de coordenadas quadrada, o que muda a caixa e não o desenho. Elementos <script> e atributos on* são sempre descartados, porque um sprite acaba embutido na sua página.