Spritesheet SVG
Gere uma Spritesheet SVG com um mapa JSON
Organize os ícones SVG em uma grade personalizada e exporte uma spritesheet PNG, WebP ou SVG com um mapa de quadros JSON. Controle as colunas, tamanho da célula, preenchimento, espaçamento, alinhamento, escala e ordem de classificação.
Pré-visualização
Sem pré-visualização. Adicione e selecione arquivos para ver os resultados.
Ainda não há arquivos. Solte arquivos acima ou clique em SELECIONAR ARQUIVOS.
O que é um spritesheet SVG?
Um spritesheet é uma única imagem que reúne muitas imagens menores numa grade, mais um mapa que diz onde cada uma fica. Aqui as fontes são arquivos SVG: cada um é desenhado na sua própria célula e a folha pronta é exportada como PNG, WebP ou um único canvas SVG.
Não é a mesma coisa que um sprite de símbolo SVG. Um sprite de símbolo é um arquivo SVG com um <symbol> por ícone que referencia as páginas por id com <use>, portanto, cada ícone permanece com marcação vetorial e CSS ainda pode colori-lo. Uma spritesheet é uma tela visual: tudo o que consome, ela corta os quadros por coordenadas. Escolha o sprite de símbolo para ícones HTML, a planilha de sprites para tela, WebGL ou sprites de fundo CSS.
Quando usar um spritesheet
Um spritesheet junta muitas imagens pequenas num único arquivo, então um jogo ou um app faz uma única requisição e mantém todos os quadros numa só textura. Renderizadores de canvas e WebGL desenham a partir dele por retângulo, o CSS o posiciona com background-position, e o mapa JSON fornece as coordenadas para que nada precise ser medido à mão. Use quando quem consome trabalha em pixels; se você quer ícones que escalam e herdam a cor dentro do HTML, monte um sprite de símbolos SVG.
Como montar um spritesheet a partir de arquivos SVG
- 1
Solte seus arquivos SVG, ou clique em SELECIONAR ARQUIVOS, para adicioná-los à fila. Até 40 por vez.
- 2
Defina a grade (colunas, linhas, tamanho da célula, margem interna, espaçamento), depois o alinhamento, a escala, a ordenação e o formato de saída. A folha é redesenhada conforme você os muda.
- 3
Clique em SALVAR TUDO para baixar um único ZIP com a folha e o seu mapa de quadros em JSON.
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
Devo usar um spritesheet ou um sprite de símbolos SVG?
Use um sprite de símbolos quando os ícones vão para o HTML: ele continua vetorial, herda a propriedade color do CSS, e cada ícone é referenciado por id com <use>. Use um spritesheet quando algo desenha pixels a partir de coordenadas, como um jogo em canvas ou WebGL ou um sprite de fundo em CSS. O mapa JSON do spritesheet dá o x, o y, a width e a height de cada quadro.
O que vem no mapa JSON?
Uma entrada por ícone, com a chave sendo o nome do arquivo sem a extensão, por exemplo {"home":{"x":0,"y":0,"width":64,"height":64}}. O retângulo cobre a célula inteira, com a margem interna, então desenhar esse retângulo reproduz o ícone exatamente onde ele foi colocado. Nomes repetidos recebem os sufixos -2 e -3, para que cada chave continue única.
Qual é o tamanho máximo da folha?
O canvas é limitado a 16.384 px por lado e a 64 megapixels no total, então 40 ícones em células de 256 px cabem com folga dentro do limite. Acima disso, a ferramenta informa o tamanho em vez de gravar uma imagem em branco. O WebP também depende do navegador: onde ele não consegue codificar WebP você recebe um erro em vez de um PNG com a extensão errada.