SVG / Ícones

Gerador de sprite SVG: símbolos e uso de ícones

Solte vários ícones SVG para criar um sprite de símbolos. Sanitize a marcação, elimine IDs duplicados de nomes de arquivo, preserve os viewBoxes, converta opcionalmente os preenchimentos para currentColor e baixe sprite.svg.

Gerador de sprite SVG: símbolos e uso de ícones: Solte um conjunto de ícones SVG e obtenha um único arquivo de sprite com um símbolo para cada ícone, além do trecho para usar cada um. Scripts, recursos externos e qualquer conteúdo inseguro são removidos; os tamanhos se tornam um viewBox quando necessário; e os preenchimentos podem ser convertidos para currentColor, para que os ícones acompanhem a cor do texto. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.

Categoria
Ferramentas para desenvolvedores
Execuções
No seu navegador
Custo
Grátis · sem cadastro
Disponibilidade
Pronto para usar
Sprite de ícones SVGProcessamento local

Roda inteiramente no seu navegador

Até 60 ícones · 1 MB cada · selecionar arquivos substitui o conjunto atual

Scripts, manipuladores de eventos, recursos externos, imagens incorporadas, textos e elementos não compatíveis são removidos. Estilos inline básicos se tornam atributos de apresentação. Quando o viewBox está ausente, são usadas a largura e a altura numéricas, com 24 unidades como fallback para cada dimensão ausente. Verifique cada pré-visualização antes de usar.

Editar um ícone SVG

Símbolos e reutilização

O SVG 2 especifica os elementos symbol e use e o comportamento do viewBox: https://www.w3.org/TR/SVG2/struct.html#SymbolElement ; https://www.w3.org/TR/SVG2/struct.html#UseElement

Processamento local e pintura

Cada ícone é recriado a partir de uma lista de elementos e atributos SVG seguros, portanto scripts, manipuladores de eventos e recursos externos não podem chegar ao sprite. Nenhum conjunto de ícones de terceiros é incluído. A pintura SVG e currentColor são especificadas em https://www.w3.org/TR/SVG2/painting.html . As licenças dos ícones enviados são responsabilidade do usuário.

Como usar

  1. Solte até 60 ícones SVG, cada um com menos de 1 MB.
  2. Inspecione as prévias sanitizadas e, opcionalmente, converta os preenchimentos para currentColor.
  3. Baixe o sprite e selecione um ícone para copiar o trecho de uso.

Privacidade e limitações

Seus arquivos SVG permanecem no dispositivo. A ferramenta não busca URLs incorporadas nem envia os ícones.

Ferramentas relacionadas

Editor SVGLimpador de SVGSVG para JSX

Perguntas frequentes

Como uso o sprite?

Insira o SVG uma vez em um contêiner oculto na página e use os trechos inline copiados. Para usar um arquivo separado, utilize sprite.svg#id como href.

O que acontece quando o viewBox está ausente?

As larguras e alturas numéricas, incluindo unidades px, definem um novo viewBox. Qualquer dimensão ausente ou não compatível assume 24 unidades. A prévia sinaliza os viewBoxes corrigidos para que você possa verificar cortes.

Todos os ícones manterão sua aparência exata?

Não. Formas básicas, grupos, gradientes, recortes e máscaras são mantidos, mas scripts, textos, imagens incorporadas, elementos use e estilos não compatíveis são removidos. Verifique a prévia. Você continua responsável pelas licenças das artes enviadas.

Ferramenta grátis · no seu navegador execuções · não precisa de conta