Sprite di simboli SVG
Unisci le icone SVG in un unico sprite di simboli
Combina una cartella di icone SVG in uno sprite riutilizzabile. Ogni file diventa un <symbol> con uno snippet <use> già pronto, mentre gli ID interni con prefisso impediscono la collisione di gradienti, maschere e tracciati di ritaglio.
Queste impostazioni valgono per l'intero sprite.
Anteprima dello sprite
Aggiungi file SVG per creare uno sprite.
Nessun file ancora. Trascina file sopra o clicca SELEZIONA FILE.
Sprite di simboli o spritesheet?
Uno sprite di simboli è un unico file SVG che contiene un <symbol> per ogni icona. Non viene disegnato nulla finché non richiami un simbolo con <use>, così le icone restano vettoriali, restano stilizzabili dal CSS e restano nitide a qualsiasi dimensione. È quello che serve per un set di icone di interfaccia.
Uno spritesheet è un'unica immagine con tutte le icone disposte su una griglia, disegnate con background-position o con una mappa di frame in JSON. Le icone sono pixel a coordinate fisse, che è ciò che si aspettano i motori di gioco e i renderer su canvas, ed è ciò che serve quando la destinazione non può usare <use> per niente.
Apri il generatore di spritesheet SVGQuando usare uno sprite di simboli
Uno sprite simbolo mantiene un set di icone in un file SVG riutilizzabile e ogni istanza di icona diventa un breve elemento <use> invece di un blocco ripetuto di percorsi. Ciò è utile per la navigazione, i pulsanti, le tabelle e altre interfacce che riutilizzano le stesse icone. I simboli rimangono markup vettoriale, quindi rimangono nitidi e possono ereditare colore e dimensioni da CSS.
Come creare uno sprite di simboli SVG online
- 1
Trascina le tue icone SVG, o clicca SELEZIONA FILE, per aggiungerle alla coda. Fino a 40 alla volta, e l'ordine dell'elenco è l'ordine dei simboli.
- 2
Scegli uno sprite esterno o inline, decidi se ottimizzare le icone e normalizzare i loro viewBox, e guarda la griglia di icone ricostruirsi dallo sprite stesso.
- 3
Clicca SALVA TUTTO per scaricare sprite.svg, o uno ZIP con sprite.svg e usage.html quando gli esempi d'uso sono attivi.
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
Cosa succede se due file producono lo stesso ID?
Gli ID vengono dal nome del file senza estensione, convertito in minuscolo e ridotto a slug, quindi "Arrow Left.svg" diventa arrow-left. Quando due file producono lo stesso ID, il primo lo mantiene e i successivi ricevono -2, -3 e così via. Rinominare un file nell'elenco ne cambia subito l'ID, e lo stesso vale se ordini o trascini l'elenco, perché il primo file nell'ordine è quello che tiene l'ID semplice.
Meglio uno sprite esterno o uno sprite inline?
Uno sprite esterno è un file sprite.svg che richiami con <use href="sprite.svg#icon-id">. Viene messo in cache come qualsiasi altro asset e mantiene leggero il tuo HTML, al costo di una richiesta in più, e deve arrivare dalla stessa origine a meno che CORS non consenta altro. Uno sprite inline è lo stesso markup incollato nella pagina dentro un <svg> nascosto e richiamato con <use href="#icon-id">. Non richiede nessuna richiesta e si risolve sempre, ma quei byte si ripetono in ogni documento HTML che lo usa.
Creare uno sprite cambia l'aspetto delle mie icone?
No. L'elemento <svg> radice di ogni file diventa un <symbol> con lo stesso viewBox e i suoi figli vengono riportati invariati, a parte il prefisso aggiunto agli ID. "Ottimizza SVG" esegue lo stesso insieme di passaggi sicuri dell'Ottimizzatore SVG, quindi commenti, metadati dell'editor e attributi ridondanti spariscono mentre la geometria resta. "Normalizza il viewBox" ricentra ogni icona in un riquadro di coordinate quadrato, il che cambia il riquadro e non il disegno. Gli elementi <script> e gli attributi on* vengono sempre rimossi, perché uno sprite finisce inline nella tua pagina.