Grafica vettoriale scalabile: Internet ha fatto molta strada dai tempi del HTML5 divenne popolare e la gente iniziò a guardare il JavaScript come linguaggio in grado di sviluppare applicazioni molto più complesse. Di conseguenza, diversi API sono emersi e ci sono abbondanti contenuti su come i browser possono gestirli tutti con SVG (Scalable Vector Graphics).
Qualche anno fa, il Microsoft ha applicato un approccio progettuale differenziato a tutte le sue applicazioni e servizi, nonché a tutte le interfacce utente per i dispositivi mobili. Con l'avvento di iOS 7, Apple ha sostituito i suoi principi di aspetto e formato a favore del bene design pulito e minimalista. Tuttavia, il lancio da parte di Google di "Progettazione dei materiali" che può essere utilizzato ovunque, dalle app al web.
Inizialmente, il vantaggio principale di SVG, ben pubblicizzato su Internet, è la sua natura scalabile. Quando si assembla un'icona, il designer non deve preoccuparsi di "come sarà" in diverse dimensioni o su dispositivi mobili con diverse densità di pixel e si concentra Appena nel realizzare la risorsa nel migliore dei modi.
Con gli SVG non è necessario esportare due diversi formati di file basati su pixel in cui visualizzarli modalità retina È non retina. Non è infatti necessario preoccuparsi della densità di pixel su ciascun dispositivo, soprattutto considerando la loro natura non standardizzata, ma piuttosto mantenere l’attenzione sull’opera d’arte.
Una volta pronta l’icona, il designer la esporta in un unico file nel formato “.SVG”, che può essere ridimensionato dallo sviluppatore senza perdita di qualità, semplicemente applicando gli attributi “larghezza" È "altezza” con i rispettivi valori.
Di seguito puoi vedere un esempio del logo del browser Firefox:
upload.wikimedia.org/wikipedia/commons/7/76/Mozilla_Firefox_logo_2013.svg
Tuttavia, sebbene i file generati “.SVG" essere solo XML, è molto più probabile che utilizzi a editor di immagini vettoriali. Le alternative più comuni sono Adobe Illustrator È Inkscape, ma su macOS abbiamo un'altra ottima alternativa chiamata schizzo.
Inoltre, SVG funziona meglio quando non è così complesso. Questo perché le sue dimensioni possono aumentare molto a seconda di ciò che si sta sviluppando: i colori solidi sono molto più piccoli dei gradienti, ad esempio. Tuttavia, questo non significa che non puoi avere grafica complessa, ma tieni a mente il problema della dimensione del file se, ad esempio, utilizzerai SVG su una pagina.
Se utilizzi il software Adobe Illustrator, ci sono alcune cose che puoi fare per ridurre considerevolmente questa complessità durante l'esportazione del file SVG. La prima cosa da fare è espandere la grafica, modificando gli attributi che ne definiscono l'aspetto e altre proprietà degli elementi al suo interno. Ciò aiuterà anche con cose come l'opacità e le sfumature.
Un altro aspetto importante a cui devi prestare attenzione è che quando esporti ci sono anche alcune cose da fare. Scegli il profilo SVG 1.1, che è ciò che ha maggiore compatibilità tra i browser odierni. I profili SVG Piccolo 1.1 e le altre varianti di SVG sono rivolte ai dispositivi mobili ma non dispongono ancora di un supporto adeguato.
Inoltre, se non hai bisogno di manipolare il testo in modo dinamico, converti tutti i caratteri in oggetti. Questo farà sì che il testo mantenga le caratteristiche da te definite, senza aumentare la dimensione finale del file, poiché a tutti gli effetti i testi saranno solo oggetti.
Poiché si tratta di un file basato su testo, il file SVG Ha un eccellente fattore di compressione per vari segmenti. Un file di 30KB, ad esempio, scende a 9,6KB quando servito con la tecnologia GZIP. Se usi la tecnica del URI di dati, un file contenente 13KB cade a 4,9KB quando servito con la tecnologia di compressione GZIP.
Spero che questo ti aiuti!
Condividi l'articolo e lascia i tuoi commenti! 🙂
