Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de Folha de Sprite SVG

DesenvolvedorMatemática

ANUNCIADO Remover?

ENTRADA

SAÍDA

Lado cliente

Carregue arquivos SVG e clique em Gerar para criar uma folha de sprites.

SVG de Folha de Sprites

Tipo de Snippet de Uso

Snippets de Uso

Snippet HTML Interno

ANUNCIADO Remover?

Guia

Gerador de Folha de Sprite SVG

Combine múltiplos arquivos SVG em uma única folha de sprites para carregamento eficiente de ícones. Carregue seus SVGs por arrastar e soltar, pré-visualize-os em uma grade, edite IDs de símbolos e baixe um arquivo de sprite combinado pronto para produção. Obtenha snippets de código de uso para abordagens de referência externa, interna e de fundo CSS. Opcionalmente, remova preenchimentos e traços para ícones coloridos com CSS e remova metadados do editor para reduzir o tamanho do arquivo.

Como usar

Arraste e solte seus arquivos de ícone SVG na área de upload ou clique para procurar. Cada SVG é analisado e exibido em uma grade de pré-visualização com seu ID de símbolo gerado automaticamente. Edite qualquer ID de símbolo clicando nele. Ative as opções de otimização para remover preenchimentos/traços ou remover metadados. Clique em gerar para combinar todos os ícones em uma única folha de sprites. Baixe o arquivo SVG combinado ou copie o HTML interno. Use os snippets de código gerados para referenciar ícones individuais em seu projeto.

Características

Upload por Arrastar e Soltar – Carregue múltiplos arquivos SVG de uma vez com arrastar e soltar ou seletor de arquivos
Grade de Pré-visualização de Ícones – Veja todos os ícones carregados exibidos em uma grade responsiva com rótulos
IDs de Símbolos Editáveis – Gerados automaticamente a partir de nomes de arquivos, clique para personalizar antes de combinar
Geração de Folha de Sprites – Combina SVGs em um único arquivo usando elementos de símbolo com preservação do viewBox
Snippets de Código de Uso – Obtenha código pronto para uso para referência externa, referência interna e métodos de fundo CSS
Remoção de Preenchimento/Traço – Remova atributos de preenchimento e traço para ícones que você deseja colorir com CSS
Otimização – Remova comentários, metadados e namespaces de editor para minimizar o tamanho do arquivo
Comparação de Tamanho de Arquivo – Veja tamanhos de arquivo individuais vs. combinados e a economia de espaço

ANUNCIADO Remover?

 Perguntas frequentes

O que é uma folha de sprites SVG e por que devo usá-la?

Uma folha de sprites SVG é um único arquivo SVG que contém múltiplos ícones definidos como elementos de símbolo. Em vez de carregar 20 arquivos SVG separados (20 requisições HTTP), você carrega um arquivo de sprite e referencia ícones individuais com o elemento use. Isso reduz as requisições HTTP, melhora o desempenho de carregamento da página e facilita o gerenciamento de ícones. Cada símbolo preserva seu próprio viewBox para que os ícones sejam renderizados nas proporções corretas. Folhas de sprites são especialmente valiosas para sites com muitos ícones em várias páginas.
Qual é a diferença entre referências de sprites externas e internas?

Referência externa usa um arquivo SVG de sprite separado e referencia ícones com href apontando para o caminho do arquivo mais o ID do símbolo, como sprite.svg#nome-do-ícone. O navegador carrega o arquivo de sprite uma vez e o armazena em cache. Referência interna incorpora todo o SVG de sprite diretamente na página HTML (geralmente oculto) e referencia ícones apenas com o hash e o ID. Sprites internos funcionam imediatamente sem uma requisição de arquivo extra, mas aumentam o tamanho do HTML e não podem ser armazenados em cache separadamente. Sprites externos são melhores para sites com várias páginas, enquanto internos funcionam bem para aplicações de página única.
Por que eu removeria preenchimentos e traços de ícones SVG?

Remover atributos de preenchimento e traço de ícones SVG permite que você controle sua cor inteiramente com CSS. Isso é essencial para sistemas de ícones onde os ícones precisam mudar de cor ao passar o mouse, no modo escuro ou em diferentes contextos de UI. Sem remover os atributos originais, as mudanças de cor do CSS podem não funcionar porque os atributos SVG internos têm especificidade maior do que as regras CSS. A opção de remoção de preenchimento/traço nesta ferramenta remove esses atributos para que você possa definir cores usando as propriedades CSS fill e stroke ou a palavra-chave currentColor.
Como os IDs de símbolos são gerados a partir de nomes de arquivos?

A ferramenta converte cada nome de arquivo em um ID de símbolo seguro para URL removendo a extensão .svg, convertendo para minúsculas, substituindo espaços e caracteres especiais por hífens e removendo hífens consecutivos. Por exemplo, Meu Ícone (v2).svg se torna meu-icone-v2. Você pode editar qualquer ID gerado antes de combinar. Cada ID deve ser exclusivo dentro da folha de sprites, pois serve como identificador de referência ao usar o ícone. IDs significativos como icone-seta-direita ou icone-fechar tornam seu código mais legível do que nomes genéricos.