# Gerador de sprite sheet SVG Envie até 30 ícones SVG e mescle-os em um único sprite sheet: modo para embutido, modo para fragmentos de arquivo externo. Normaliza o viewBox (derivado de width/height), deduplica ícones, opcionalmente remove fill/stroke para currentColor, sempre limpa e atributos on\*, e gera snippets HTML / React / Vue / CSS com pré-visualização ao vivo de cada ícone. > Página canônica: https://elysiatools.com/pt/tools/svg-sprite-generator - **Categoria:** Media - **Palavras-chave:** sprite svg, folha de sprites, svg symbol, conjunto de ícones, elemento use ## Visão geral Regras de mesclagem: cada \`\` recebe o conteúdo interno do \`\` original (sem o elemento raiz); se o viewBox faltar, é derivado de width/height como 0 0 W H; o modo \`\` emite ainda um \`\` para referências externas (\`\`). Os IDs são derivados do nome de arquivo (caracteres fora de \[A-Za-z0-9\_-\] → «-», prefixo i- se começar com dígito, mais o prefixo do usuário), sufixo -2 em colisões. Deduplicação por hash de viewBox + conteúdo com espaços comprimidos. Segurança: \`\` e atributos on\* sempre removidos. ## Entradas - **Arquivos SVG (até 30)** (file): Select up to 30 .svg icon files - **Tipo de sprite** (select) - **Prefixo de ID** (text): e.g. icon- - **Remover fill/stroke (para currentColor)** (checkbox) - **Deduplicar ícones idênticos** (checkbox) ## Quando usar - Quando precisa de unir vários ícones SVG num único ficheiro para reduzir pedidos HTTP. - Quando quer referenciar ícones com no HTML ou com ficheiro externo no modo view. - Quando precisa de IDs consistentes, viewBox normalizado e código de uso pronto para HTML, React, Vue ou CSS. ## Como funciona - Carregue até 30 ficheiros SVG (image/svg+xml). - Escolha o tipo de sprite: symbol para embutido ou view para fragmentos externos com e . - Defina um prefixo de ID opcional, ative a remoção de fill/stroke para currentColor e a deduplicação de ícones idênticos. - Obtenha o sprite sanitizado, IDs derivados do nome do ficheiro e snippets de uso com pré-visualização de cada ícone. ## Casos de uso - Unir um conjunto de ícones de interface num sprite symbol para uso com no HTML. - Gerar um sprite view com prefixo de ID para referenciar ícones a partir de um ficheiro SVG externo. - Preparar ícones para currentColor removendo fill e stroke e obter snippets React ou Vue. ## Perguntas frequentes ### Quantos ficheiros SVG posso enviar? Até 30 ficheiros SVG, com limite de tamanho por ficheiro. ### Qual a diferença entre os modos symbol e view? O modo symbol gera para no mesmo documento. O modo view gera e para referências externas como . ### Como são criados os IDs dos ícones? A partir do nome do ficheiro: caracteres fora de [A-Za-z0-9_-] viram hífen, prefixo i- se começar com dígito, mais o prefixo que indicar; em colisão acrescenta-se -2. ### O que acontece se o SVG não tiver viewBox? O viewBox é derivado de width e height como 0 0 W H. ### Os scripts e eventos são removidos? Sim. Elementos e atributos on\* são sempre removidos por segurança. ## Ferramentas relacionadas - [Gerador de Data URI](https://elysiatools.com/pt/tools/data-uri-generator): Converte arquivos em Data URIs (Base64 ou porcentagem-codificada) para incorporar imagens, fontes e recursos diretamente em HTML, CSS ou Markdown - [Fragmentos de Cabeçalho/Rodapé PDF](https://elysiatools.com/pt/tools/pdf-header-footer-snippets): Converte HTML para PDF com logo, título e data - [Gerador de Favicon SVG](https://elysiatools.com/pt/tools/svg-favicon-generator): Transforma um logo SVG ou raster em um pacote favicon completo com ICO, variacoes PNG, Apple touch icon e web manifest - [Conversor SVG para JPG](https://elysiatools.com/pt/tools/svg-to-jpg): Converter gráficos vetoriais SVG para formato raster JPG com opções personalizáveis de resolução, qualidade e fundo - [SVG para PDF](https://elysiatools.com/pt/tools/svg-to-pdf): Converter gráficos vetoriais SVG em documentos PDF para impressão e compartilhamento - [Conversor SVG para PNG](https://elysiatools.com/pt/tools/svg-to-png): Converter gráficos vetoriais SVG para formato raster PNG com opções personalizáveis de resolução, qualidade e transparência - [Conversor SVG para WebP](https://elysiatools.com/pt/tools/svg-to-webp): Converter gráficos vetoriais SVG para formato raster WebP com compressão moderna e suporte de transparência - [Verificador de acessibilidade](https://elysiatools.com/pt/tools/accessibility-checker): Detecta problemas comuns de WCAG 2.1 em HTML, paginas ou imagens de design e retorna orientacoes praticas ## Exemplos - [Amostras XML](https://elysiatools.com/pt/samples/xml-viewer-samples): Arquivos de amostra para o visualizador XML no navegador - [Exemplos de XML](https://elysiatools.com/pt/samples/xml-samples): Exemplos de formato XML (eXtensible Markup Language) de estruturas simples a complexas - [Exemplos SVG](https://elysiatools.com/pt/samples/svg-samples): Exemplos de Gráficos Vetoriais Escaláveis (SVG) demonstrando vários recursos e técnicas SVG - [Amostras SVG](https://elysiatools.com/pt/samples/svg-viewer-samples): Gráficos vetoriais de amostra para o visualizador SVG ## Conteúdo relacionado - [Ferramentas de conversao de formatos de imagem e exportacao animada](https://elysiatools.com/pt/hubs/image-convert): Compare conversores de imagem para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 e saidas voltadas para animacao em um unico hub. - [Ferramentas de conversao, mapeamento e XPath para XML](https://elysiatools.com/pt/hubs/xml-convert): Ferramentas reunidas para conversao, mapeamento, uniao e extracao XPath em XML em um unico hub. - [Ferramentas de extração, limpeza e exportação de HTML para Markdown/PDF](https://elysiatools.com/pt/hubs/html-convert): Compare ferramentas de limpeza de HTML, extração de atributos, extração de imagens, HTML para Markdown e HTML para PDF em um único hub para fluxos de conversão de conteúdo web. - [Ferramentas de limpeza, acabamento e preparo em lote de imagens](https://elysiatools.com/pt/hubs/image-utility): Reune em um so hub ferramentas para limpar imagens, recortar bordas, adicionar margem ou moldura, redimensionar e comprimir em lote, aplicar marca d agua e dar acabamento visual.