Come creare e gestire SVG Sprites

SVG sta vincendo la gara quando si tratta di grafica che scala sul web. Designer e sviluppatori scelgono SVG al posto di font di icone, immagini raster e sprite raster.

I vantaggi dell'utilizzo di SVG sono numerosi ma, a mio parere, si riducono alla scalabilità.

L'utilizzo di SVG può essere semplice come copiare e incollare il codice esportato da un programma basato su vettori. Da lì il problema sta nel fornire tali grafici nel modo più efficiente.

Inserisci sprite SVG. Questi funzionano in un modello simile a quello degli sprite delle immagini, tuttavia, il modo in cui vengono creati e inclusi in una pagina Web è molto diverso.

Perché usare gli sprite?

Gli sprite aiutano ad aumentare la velocità, a mantenere un flusso di lavoro di sviluppo coerente e rendono la creazione di icone molto più veloce. Gli sprites SVG vengono in genere creati utilizzando icone di forma o forma simili, mentre la grafica su scala più grande sono applicazioni una tantum.

In molti casi, una libreria di icone si ridimensiona. L'aggiunta di nuove icone deve essere efficiente e alla fine facile. Gli sprite SVG aiutano a rendere questo una realtà.

Esportazione del codice SVG

Gli SVG possono essere esportati dal tuo programma di grafica vettoriale preferito. Tendo ad usare un mix di strumenti e ho scoperto che tutti hanno un grande supporto per esportare SVG. Schizzo si distingue in particolare perché è possibile selezionare un'icona o un'immagine e premere il comando + c e copiare il codice SVG negli Appunti. Quindi puoi andare al tuo editor di codice, incollare il codice e far comparire l'immagine davanti ai tuoi occhi nel browser.

Ottimizzazione di SVG per Web

Purtroppo, se dovessi copiare e incollare da Sketch, potresti scoprire che il codice non è ottimale e potrebbe essere ottimizzato meglio. Ci sono alcuni strumenti per questo.

Se utilizzi Sketch in particolare, dai un'occhiata a Plug-in SVGO Compressor . Mentre esporti SVG, il plug-in li ottimizza automaticamente prima di salvare il file.

Se non utilizzi Sketch, consulta la stessa funzionalità in modulo di app o se preferisci le app web, Jake Archibald mettere insieme uno per te .

Creazione manuale di sprite SVG

La creazione di uno sprite SVG può essere eseguita manualmente. Avrai bisogno di un programma di disegno vettoriale in grado di generare codice SVG. Per fare questo, farò uso di Sketch ed esporterò alcune icone come SVG.

Dopo aver esportato le icone e averle eseguite tramite il plug-in SVGO Compressor, mi rimane il seguente elemento per ogni icona. Nota che a questo punto ogni icona è un file separato:

Ora che i nostri SVG sono tutti ottimizzati, possiamo iniziare a creare lo sprite usando il codice sopra. Per creare uno sprite iniziare con l'ambiente circostante

Nota come SVG ha uno stile di visualizzazione in linea : nessuno . Questo è necessario per utilizzare correttamente gli sprite SVG. Anche se le icone non renderanno sulla pagina una grande quantità di spazio sarà. Per evitare questo spazio aggiuntivo creato da SVG, nascondiamo l'SVG con CSS.

Semplicemente includendo il codice dalle icone non sarà sufficiente a questo punto. Dobbiamo usare a elemento che ti permetterà di incorporare il codice SVG e di fornire il proprio specifico attributo viewBox, importante per le icone che potrebbero essere visualizzate a larghezze e altezze diverse.

Elementi definiti all'interno del l'elemento può essere reso al browser solo quando indicato da elemento.

Lo sprite finale assomiglia al seguente frammento:

Si noti come ho aggiunto gli attributi id a ciascun elemento simbolo. Questo è importante perché quando fai riferimento a un'icona specifica nello sprite hai bisogno di un modo univoco di bersagliarlo. Inoltre, nota come ogni icona ha i propri parametri unici di ViewBox . I primi due parametri saranno quasi sempre "0 0"; i secondi due saranno uguali alla dimensione dell'icona che hai esportato.

Compresa un'icona sulla pagina

Con lo sprite tutto pronto per andare abbiamo bisogno di un modo per includere icone specifiche su una pagina. Per fare ciò utilizzerai il elemento scritto in questo modo:

Nella tua pagina, dovresti vedere l'icona apparire e questo è davvero tutto quello che c'è da fare!

Automazione di SVG Sprites

Creare sprite SVG inline non è poi così difficile. Il problema sta nel fatto che molti sviluppatori hanno bisogno di creare sprite per centinaia di icone o più per applicazioni robuste. Creare qualcosa del genere a mano potrebbe richiedere tempo e noioso. Gli sviluppatori hanno bisogno di un modo per automatizzare il processo in modo da non perdere tempo creando gli sprite a mano.

Fortunatamente, ci sono strumenti per una cosa del genere. Task manager come Grugnito o Sorso avere i plugin disponibili per l'uso. Questi semplificano la creazione degli sprite SVG. Fornendo ogni file SVG in una determinata directory, il plugin ottimizzerà e genererà tutti gli SVG nella directory di riferimento da includere in un nuovo sprite nuovo.

Se devi aggiungere più icone allo sprite, tutto quello che devi fare è esportare l'icona come SVG e aggiungerla alla stessa cartella. Da lì il plugin gestisce la parte che richiede tempo.

Alcuni plugin disponibili in diversi gusti: grugnito-svgstore , gulp-SVG-sprites , svg-sprite .

Conclusione

Come per tutte le cose nello sviluppo web, c'è più di un modo per creare sprite SVG. Puoi fare riferimento a loro esternamente, includerli tramite CSS e persino li fanno di risposta .