Spritesheet SVG
Genera uno spritesheet SVG con una mappa JSON
Disponi le icone SVG su una griglia personalizzata ed esporta uno spritesheet PNG, WebP o SVG con una mappa frame JSON. Controlla le colonne, la dimensione della cella, la spaziatura, l'allineamento, la scala e l'ordinamento.
Anteprima
Nessuna anteprima. Aggiungi e seleziona file per vedere i risultati.
Nessun file ancora. Trascina file sopra o clicca SELEZIONA FILE.
Che cos'è uno spritesheet SVG?
Uno spritesheet è un'unica immagine che raccoglie molte immagini più piccole su una griglia, più una mappa che indica dove si trova ciascuna. Qui le sorgenti sono file SVG: ognuno viene disegnato nella propria cella e il foglio finito viene esportato come PNG, WebP o come un unico canvas SVG.
Non è la stessa cosa di uno sprite simbolo SVG. Uno sprite simbolo è un file SVG con un <symbol> per icona a cui le pagine fanno riferimento tramite ID con <use>, quindi ogni icona rimane markup vettoriale e CSS può comunque colorarla. Uno spritesheet è una tela visiva: qualunque cosa consumi, taglia i fotogrammi in base alle coordinate. Scegli lo sprite simbolo per le icone HTML, il foglio sprite per la tela, WebGL o gli sprite di sfondo CSS.
Quando usare uno spritesheet
Uno spritesheet riunisce molte immagini piccole in un unico file, così un gioco o un'app fa una sola richiesta e tiene tutti i frame in un'unica texture. I renderer su canvas e WebGL ne disegnano un rettangolo alla volta, il CSS lo posiziona con background-position e la mappa JSON fornisce le coordinate, così non c'è niente da misurare a mano. Usalo ogni volta che la destinazione ragiona in pixel; se vuoi icone che scalano ed ereditano il colore dentro l'HTML, crea invece uno sprite di simboli SVG.
Come creare uno spritesheet da file SVG
- 1
Trascina i tuoi file SVG, o clicca SELEZIONA FILE, per aggiungerli alla coda. Fino a 40 alla volta.
- 2
Imposta la griglia (colonne, righe, dimensione delle celle, padding, spaziatura), poi l'allineamento, la scala, l'ordinamento e il formato di output. Il foglio si ridisegna mentre li modifichi.
- 3
Clicca SALVA TUTTO per scaricare un unico ZIP con il foglio e la sua mappa JSON dei frame.
Privacy: i tuoi file non escono dal browser
La conversione viene eseguita localmente nel tuo browser utilizzando JavaScript e WebAssembly. Non è previsto il caricamento di file o la conversione lato server, quindi i file che aggiungi rimangono sul tuo dispositivo.
L'elaborazione locale aiuta a proteggere i loghi riservati, i documenti interni e le opere d'arte inedite dei clienti. Le pagine e il codice di conversione vengono memorizzati nella cache mentre li utilizzi, quindi gli strumenti che hai già aperto possono continuare a funzionare senza una connessione di rete.
Domande frequenti
Meglio uno spritesheet o uno sprite di simboli SVG?
Usa uno sprite di simboli quando le icone finiscono nell'HTML: resta vettoriale, eredita la proprietà CSS color e ogni icona si richiama per id con <use>. Usa uno spritesheet quando qualcosa disegna pixel a partire dalle coordinate, come un gioco su canvas o WebGL o uno sprite di sfondo in CSS. La mappa JSON dello spritesheet ti dà x, y, width e height di ogni frame.
Cosa contiene la mappa JSON?
Una voce per ogni icona, con chiave il nome del file senza estensione, per esempio {"home":{"x":0,"y":0,"width":64,"height":64}}. Il rettangolo copre l'intera cella, padding incluso, quindi disegnare quel rettangolo riproduce l'icona esattamente dove è stata collocata. I nomi duplicati ricevono i suffissi -2 e -3, così ogni chiave resta unica.
Quanto può essere grande il foglio?
Il canvas è limitato a 16.384 px per lato e a 64 megapixel in totale, quindi 40 icone in celle da 256 px stanno comodamente entro il limite. Oltre quel punto lo strumento segnala la dimensione invece di scrivere un'immagine vuota. Anche WebP dipende dal browser: dove non riesce a codificare WebP ricevi un errore invece di un PNG con l'estensione sbagliata.