SVG Sprite & <symbol> Generator

Guia do Desenvolvedor: Gerador de Sprites SVG e Pacotes de <symbol>

Agrupe múltiplos ícones SVG em uma única folha de sprites <symbol> com IDs limpos, preservação de viewBox e trechos de uso em HTML.

Presets:
Sprite Options:
Id prefix label:
8 Symbols Parsed
Input label8 icons
Lines: 47•Chars: 2,750•Size: 2.7 KB
8 Icons Parsed
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
      <polyline points="9 22 9 12 15 12 15 22"/>
  </symbol>

  <symbol id="icon-search" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="8"/>
      <path d="m21 21-4.3-4.3"/>
  </symbol>

  <symbol id="icon-bell" viewBox="0 0 24 24">
    <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
  </symbol>

  <symbol id="icon-settings" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="3"/>
      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
  </symbol>

  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/>
      <circle cx="12" cy="7" r="4"/>
  </symbol>

  <symbol id="icon-check" viewBox="0 0 24 24">
    <polyline points="20 6 9 17 4 12"/>
  </symbol>

  <symbol id="icon-arrow-right" viewBox="0 0 24 24">
    <line x1="5" y1="12" x2="19" y2="12"/>
      <polyline points="12 5 19 12 12 19"/>
  </symbol>

  <symbol id="icon-menu" viewBox="0 0 24 24">
    <line x1="4" y1="12" x2="20" y2="12"/>
      <line x1="4" y1="6" x2="20" y2="6"/>
      <line x1="4" y1="18" x2="20" y2="18"/>
  </symbol>
</svg>
Bundle: 1.9 KB•Symbols: 8(-21% overhead)
HTTP: 1 Request vs 8
Stats card1
8Vector Assets Ready

Preserves exact SVG viewBox matrices and scales smoothly across any DPI.

Stats card2
100%Consolidated

1 shared sprite bundle instead of 8 separate network roundtrips.

Stats card3
1.9 KBOptimized Sprite

Eliminates XML declarations and metadata overhead from individual SVG files.

Client-Side Processing

High-performance processing executed entirely in browser memory.

Zero Server Upload Privacy

All data payloads remain strictly local with zero external server communication.

Production Ready Export

Clean, optimized output formats ready for immediate deployment.

Referência técnica e guia de arquitetura

Guia do Desenvolvedor: Gerador de Sprites SVG e Pacotes de <symbol> — Guia de referência

Agrupe múltiplos ícones SVG em uma única folha de sprites <symbol> com IDs limpos, preservação de viewBox e trechos de uso em HTML.

Parâmetros principais e controles

Prefixo de ID (ID Prefix)string

Prefixo adicionado ao ID de cada <symbol> gerado (ex.: 'icon-') para evitar colisões de identificadores no DOM.

Padrão: icon-
Normalização currentColorboolean

Substitui atributos de cor estáticos em fill e stroke por 'currentColor', permitindo estilização dinâmica via CSS e Tailwind.

Padrão: false
Modo Sprite Oculto (Inline Sprite)boolean

Configura o elemento raiz <svg> com style='display: none;' para embutir diretamente no corpo do HTML sem ocupar espaço.

Padrão: true
Minificação do Códigoboolean

Remove espaços extras, quebras de linha, comentários e declarações XML desnecessárias para reduzir o peso do arquivo.

Padrão: false
Autossíntese de viewBoxboolean

Gera matrizes de coordenadas viewBox precisas a partir de atributos width e height quando o SVG original não tiver viewBox.

Padrão: true

Dicas profissionais e melhores práticas

Zero requisições HTTP adicionais com inclusão inline

Insira o sprite sheet diretamente no layout raiz ou no <body> do HTML para exibir múltiplos ícones com <svg><use href='#id'/></svg> com renderização imediata e zero tráfego extra.

Temas e estados hover flexíveis com currentColor

Habilite a normalização currentColor para pacotes de ícones monocromáticos, possibilitando alterações instantâneas de cor com classes como text-blue-600 hover:text-blue-500.

Cache de navegador persistente com sprites externos

Salve o arquivo gerado como /public/sprite.svg e acesse via <use href='/sprite.svg#icon-id'/> para aproveitar o cache HTTP em aplicações multipáginas.

Evite conflito de IDs em gradientes e máscaras

Quando ícones utilizarem <linearGradient> ou <clipPath>, certifique-se de aplicar prefixos aos IDs internos para não sobrepor definições gráficas de outros elementos.

Problemas comuns e solução de problemas

Ícone invisível ou com dimensões 0x0 ao utilizar <use>

Certifique-se de que o <symbol> contenha um viewBox válido e que a tag <svg> externa tenha dimensões de largura e altura declaradas via atributos ou CSS (ex.: w-6 h-6).

Erro de CORS ao carregar arquivo de sprite externo

Navegadores bloqueiam chamadas cross-origin em <use href='/sprite.svg#id'>. Mantenha o sprite no mesmo domínio ou configure o cabeçalho 'Access-Control-Allow-Origin: *'.

Regras de cor CSS (fill ou color) não surtem efeito no ícone

Atributos fill ou stroke fixos dentro dos nós path sobrepõem os estilos CSS em cascata. Ative a 'Normalização currentColor' para liberar o controle por CSS.

Perguntas frequentes (FAQ)

Por que utilizar sprites SVG <symbol> em vez de tags <img> ou fontes de ícones?▼

Os sprites SVG <symbol> combinam a nitidez vetorial e a facilidade de estilização do SVG inline com a alta performance de uma única transferência de rede. Evitam problemas de renderização e FOUT de fontes de ícones e oferecem suporte nativo a acessibilidade ARIA.

Qual a diferença entre um sprite inline e um arquivo de sprite externo?▼

O sprite inline é incorporado diretamente no corpo do documento HTML, sendo renderizado de imediato sem requisições HTTP adicionais. O sprite externo é servido como arquivo estático (.svg) e se beneficia de cache agressivo do navegador em várias páginas.

Como controlar o redimensionamento e a responsividade dos ícones?▼

Como cada símbolo preserva sua viewBox original, o elemento <svg> externo comanda as dimensões na tela. Aplique atributos width/height ou utilitários CSS (como w-6 h-6 ou 1.5rem) para dimensionar sem deformar o traçado.

O gerador suporta ícones SVG multicoloridos e detalhados?▼

Sim. Ícones com múltiplas cores, camadas, gradientes e opacidades são totalmente suportados. Para preservar as cores originais, deixe a opção 'Normalização currentColor' desativada.

Como integrar o sprite em projetos React, Next.js ou Vue?▼

Acesse as abas de exportação 'React' ou 'Vue' para copiar um componente reutilizável em TypeScript (<Icon name='icon-name' />). O código gerado já inclui tipagem rigorosa para todos os símbolos criados.

Ferramentas e utilitários relacionados

Todas as ferramentas →
Gerador Interativo de Gradientes CSSdesign

Criador visual de gradientes CSS com paradas de cor, controle de ângulos, formas radiais, paletas prontas e exportação CSS em 1 clique.

Abrir ferramenta→
Limpador e minificador interativo de código SVGdesign

Limpe, minifique e remova metadados de gráficos SVG no navegador para reduzir drasticamente o tamanho do arquivo.

Abrir ferramenta→
Extrator de paletas de cores e verificador de contrastedesign

Verificador de contraste de cores acessível WCAG 2.1 e gerador de paletas harmoniosas.

Abrir ferramenta→
Gerador CSS de Glassmorfismodesign

Criador moderno de efeito de vidro fosco com desfoque de fundo, transparência e bordas.

Abrir ferramenta→
Guia de Proporção de Tela (Aspect Ratio) e Codecs de Vídeodesign

Referência de proporções de vídeo, simplificação euclidiana por MDC, alinhamento Mod 2/4/8 para codecs e propriedade CSS aspect-ratio.

Abrir ferramenta→
Gerador de Favicon e Ícones de Aplicativo Cheatsheetdesign

Guia técnico de referência para gerar favicons para navegadores, ícones Apple Touch, manifestos PWA Android e snippets HTML.

Abrir ferramenta→