Suggerimento rapido Meno nodi = Più leggero SVG

Recentemente mi sono ritrovato a giocare sul sito snap.svg (date un'occhiata se non l'avete ancora usato da soli). Ha un bellissimo sfondo poligono SVG sull'intestazione, che pesa a un misero 2,2Kb. Perché sono strano, ho deciso di provare a renderlo più piccolo.

In Illustrator

Il file SVG stesso appare come questo quando aperto in Illustrator:

Quindi se controlli la vista struttura (Visualizza> Struttura) vedi tutti i percorsi vettoriali disposti senza colori di riempimento:

"Che casino!" Ho pensato "Sono sicuro che posso riordinarlo e ridurre le dimensioni del file." Così ho ripulito le righe per rimuovere tutte le sovrapposizioni non necessarie. 

Sconcertante

Con il esploratore strumento è possibile utilizzare oggetti per "tagliare i cookie" la loro forma dagli oggetti sottostanti. In questo modo puoi evitare di sovrapporre alcune forme, creando invece un effetto più "jigsaw puzzle".

Da questa… … a questo

Molto meglio. Una volta che ho fatto lo stesso con l'intera illustrazione, stavo osservando questo:

Mi sbagliavo

In questo modo, le dimensioni del file non si riducevano, cresceva. Considerando che l'originale pesava 2.217Kb, la nuova versione pesava 2.269Kb. Una piccola differenza in termini reali, ma il "riordino" delle cose aveva comunque reso il file più pesante. Su un grafico più ampio l'effetto avrebbe potuto fare una grande differenza.

Ma perché? Tutto dipende da nodi, o ancoraggi; le articolazioni lungo un percorso vettoriale. I file SVG non sono altro che dati XML e ogni nodo lungo un percorso richiede coordinate aggiuntive. Il file originale potrebbe essere stato creato da un gruppo di triangoli sovrapposti, ma stratificazione non costa affatto la dimensione del file (tutti gli oggetti all'interno di un documento XML sono intrinsecamente visualizzati in ordine). Ciò che ha creato la dimensione extra è stato il mio aver realizzato poligoni quadrilateri (a quattro lati) dai triangoli. Spiacenti.

Ecco come appaiono come codice SVG, prima uno degli originali:

E ora una delle mie forme "migliorate":

Più dati Semplice come quella.

Pulisci i tuoi nodi

La lezione da fare è rimuovere tutti i nodi indesiderati dai file SVG, ma non preoccuparti di sovrapposizioni. Eliminare i nodi è il modo numero uno per ridurre la complessità e quindi la dimensione del file.

Utilizzare il Elimina strumento Punto di ancoraggio (-) rimuovere un'ancora da un percorso. Rimarrai sorpreso di quanto poche ancore abbiano bisogno di un percorso vettoriale pur conservando la sua forma! Un'ancora ben piazzata farà il lavoro di tre mal concepiti.

Punti smarriti

Un ultimo consiglio è quello di rimuovere i punti vaganti dal tuo SVG. I punti di rantolo sono spesso invisibili perché non possono essere riempiti, ma ti costano comunque i dati. In Illustrator, vai a Selezionare> Oggetto> Punti di randagio per selezionarli tutti, quindi premere Elimina per rimuoverli.

Punti di ancoraggio vaganti

Spero che tu abbia imparato qualcosa da questo! È una di quelle cose apparentemente ovvie alle quali non avevo mai pensato prima. Avevi tu?