SVG from Sketch: ottimizzazione con SVGito

SVGito è una Web application concepita per aiutare Web designer e sviluppatori nelle procedure di ottimizzazione dei file basati su SVG (Scalable Vector Graphics). L’obbiettivo è naturalmente quello di limitare l’impatto di questi contenuti sulle prestazioni, nel contempo diverse operazioni che altrimenti andrebbero effettuate manualmente vengono invece eseguite automaticamente, con evidenti vantaggi in termini di produttività.

SVGito è stato sviluppato con lo scopo di ridurre la complessità dei sorgenti SVG e diminuire il peso dei file, garantendo però il miglior risultato possibile a livello di rendering. L’utilizzo è estremamente semplice: si incolla il codice all’interno dell’apposito modulo, si procede con l’ottimizzazione dopo aver selezionato le opzioni desiderate e il sorgente risultante diventa disponibile per essere copiato. Il servizio consente di visualizzare un’anteprima degli output e di disporre in qualsiasi momento del codice originale per testare gli effetti delle diverse impostazioni.

La Web App non si propone come una soluzione alternativa agli altri SVG optimizer, si tratta invece di uno strumento complementare che offre alcune funzionalità generalmente assenti in altri tool dello stesso tipo; in linea generale è consigliabile utilizzarlo prima di sottoporre i propri SVG ad altri optimizer. Il suo ambito d’impiego privilegiato è quello relativo alla pulizia degli SVG esportati da Sketch, sono supportate anche altre piattaforme per il digital design ma Sketch è stato lo strumento di riferimento per l’implementazione di SVGito.

Le opzioni per l’ottimizzazione sono sostanzialmente quattro:

1. rimozione dal codice degli Sketch Layers con riempimenti e bordi;
2. sostituzione degli elementi use a singola istanza con le loro referenze;
3. rimozione degli attributi fill-rule dai tipi di elementi per i quali non sono necessari;
4. rimozione dell’elemento defs quando vuoto.

Queste procedure sono volte in massima parte ad eliminare dal codice tutto ciò che non è necessario per una resa grafica ottimale, ad esempio l’attributo fill-rule non ha alcuna influenza sull’output dell’elemento circle e può quindi essere rimosso senza causare problemi a livello di rendering.

Via SVGito