Possiamo considerare conclusi gli anni in cui i web designer dovevano convertire bellissimi loghi dal formato vettoriale in jpg o png restituendo un risultato, diciamo, passabile ma ovviamente adattato alla tecnologia di riferimento.
La Scalable Vector Graphic (SVG) di recente sta spopolando nel Web, prendendo letteralmente a calci gli altri formati. Andiamo a vedere perché!
1) Presenza
La popolarità e compatibilità crescente degli SVG sta spingendo tutti i principali browser a svilupparne il supporto. I browser moderni sono capaci di restituire il movimento e l’animazione previsti permettendo agli utenti di apprezzare il miglioramento visivo del nostro sito web.
2) Riduzione dei tempi di caricamento
Gli SVG generalmente pesano molto poco e, proprio per questo, si scaricano più velocemente delle immagini raster. Sono necessari milioni di pixel per riempire uno schermo con una fotografia digitale su monitor di dimensioni comuni, mentre
possiamo creare sfondi SVG a schermo intero con una notevole riduzione delle dimensioni del file. Ci capita di realizzare illustrazioni assolutamente straordinarie, ma inutilizzabili sul web a causa delle grandi dimensioni e dell’aumento del tempo di
caricamento della pagina. SVG è il modo più semplice per ovviare a tale difficoltà.
3) Scalabilità
Le animazioni sono scalabili all’infinito, lo dice il nome stesso. Con il design reattivo, che ormai non è più facoltativo, la grafica che si ridimensiona automaticamente è uno strumento ottimo nelle mani del web designer. Grazie alla loro natura vettoriale, le
tue animazioni saranno indipendenti dalla risoluzione, quindi appariranno sempre nitide e perfette su qualsiasi display, anche su quelli ad altissima risoluzione!
4) Bellezza
Dato lo stile puramente illustrativo, gli SVG hanno un bell’aspetto con qualsiasi risoluzione e questo è importante poiché presentabili anche sui dispositivi a risoluzione più elevata.
5) SVG + CSS
Il CSS sta diventando sempre più potente. Gli SVG utilizzano un linguaggio di markup basato su XML e ciò significa che puoi scegliere, come target, bit e pezzi che compongono l’intero SVG. Puoi cambiare il colore di un’icona o riposizionare la
direzione di una freccia all’interno di un’icona. Puoi posizionare molte di queste proprietà al passaggio del mouse per semplici animazioni.
6) Si possono animare
Le immagini raster possono sembrare impressionanti, ma a meno che non ci si applichi con video o gif, l’animazione delle foto digitali è limitata. A differenza delle immagini raster, gli SVG sono costituiti da parti più piccole che possono essere
manipolate. Un esempio pratico è l’animazione dei loghi aziendali. Molti anni fa, eri limitato negli effetti al passaggio del mouse. Se un visitatore di un sito web passava il mouse sopra un logo caricato in un formato .png trasparente, poteva restare stupito dalla
mutazione del colore dello sfondo. Ora, con gli SVG, il visitatore sgranerà gli occhi vedendo una rotazione del logo, il cambio del colore delle lettere in successione ritardata, l’aumento delle dimensioni complessive del logo, ecc…
7) Seo friendly
Le immagini SVG, magari lo saprai già, possono migliorare la SEO del tuo sito! Poiché Google Image Search è il secondo motore di ricerca più utilizzato subito dopo Google Search, hai la possibilità di aumentare la visibilità del tuo marchio e
migliorare l’accessibilità complessiva con le immagini SVG. Essendo un formato basato su codice può essere letto, scansionato e indicizzato dai motori di ricerca. Quando si utilizzano altri formati di immagine, i motori di ricerca leggono solo i
titoli, le descrizioni e i tag alt scritti da te, ma nel caso di un SVG, possono leggere il contenuto effettivo della tua immagine. Ovviamente, includerai ancora descrizioni, collegamenti e parole chiave direttamente nel tuo markup SVG per renderlo ancora
più leggibile e indicizzabile. Più semplice di così!
8) Interattività
Gli SVG animati ti danno la possibilità di progettare contenuti accattivanti in grado di coinvolgere maggiormente il tuo pubblico di destinazione, poiché non solo hanno un bell’aspetto, ma possono anche essere interattivi.
Il formato SVG può aiutarti a sviluppare animazioni interattive usando CSS e Javascript. Per esempio, un bel logo o un’icona a cui abbiamo attribuito un’animazione e desideriamo che questa venga riprodotta solo al clic o al passaggio
del mouse. Fortunatamente, tutto questo è possibile se stiamo usando SVG senza nemmeno bisogno di imparare a programmare grazie ai tanti tool che puoi trovare online. Wow!!!
IMMAGINE DI COPERTINA TRATTA DAL FILM Sin City
.
Sono lontani i tempi in cui in bagno si leggevano le etichette degli shampoo…