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.
Estas opções se aplicam ao sprite inteiro.
Pré-visualização do sprite
Adicione arquivos SVG para montar um sprite.
Ainda não há arquivos. Solte arquivos acima ou clique em SELECIONAR ARQUIVOS.
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.