Come già dichiarato più volte all’interno di questo blog, viviamo in un mondo pieno di dispositivi e risoluzioni diverse. Possiamo creare siti web responsive con molta facilità ma quando si parla di immagini abbiamo le mani legate, o meglio pensiamo di averle.
Ebbene sì perché anche se le nuove specifiche del HTML5 ci hanno presentato elementi come <picture>
e l’attributo srcset
che ci hanno permesso, in effetti, di offrire diverse immagini a seconda della risoluzione utilizzata siamo sempre ben distanti dalla possibilità di semplificare questo processo.
Con le soluzioni precedenti abbiamo sempre l’obbligo di ottimizzare le nostre immagini e utilizzare le tecniche che ci permettono di far scaricare immagini di dimensioni diverse, ovviamente le immagini dobbiamo crearle noi con un programma di grafica adeguato.
Non voglio mettere assolutamente in discussione l’opportunità che abbiamo nell’offrire immagini ottimizzate a seconda della risoluzione utilizzata dal dispositivo, però bisogna dire che se per ogni immagine che carico nel mio sito ho l’onere di crearne altre 4 è un bel lavoro da fare.Per fortuna i CMS più famosi, come WordPress, sono in grado di creare queste immagini e la struttura HTML adeguata in modo del tutto automatico.
Ma allora perché preoccuparsi di tutto questo?
Semplicemente perché anche se la potenza dei computer ci può in parte aiutare, i problemi non mancano. Anche se parliamo di immagini, non necessariamente quindi scatti fotografici, generalmente ci scontriamo con un grosso peso in termini di kilobyte e di una perdità di qualità, infatti, più ottimizziamo un’immagine e maggiori sono le informazioni che perdiamo andando a degradare la qualità dell’immagine stessa.
Per fortuna nostra, soprattutto per immagini che rappresentano icone o illustrazioni vettoriali, abbiamo un formato immagine che è raccomandato dal W3C sin dal 2001 ma che ben pochi stanno utilizzando. Come probabilmente ti stai immaginando, il formato di cui sto parlando prende il nome di SVG.
L’acronimo significa Scalable Vector Graphic e permette di portare nel web delle immagini che sono definite non dal colore dei singoli pixel, come succede per le immagini bitmap, ma da formule matematiche che permettono di definire le forme e colori dei singoli elementi.
Questo ci consente di rimpicciolire o ingrandire le nostre immagini senza alcuna perdita di informazione, i bordi degli elementi rappresentati saranno sempre ben delineati e non capiteranno strani blocchi di colore nel nostro sfondo, cosa che spesso accade con le immagini in formato JPEG.
Oltre a questo ci sono un sacco di altre interessanti caratteristiche che sono racchiuse all’interno di questo acronimo perché, come scopriremo in questo e in successivi articoli, queste immagini possono essere personalizzate con CSS, JavaScript e possiamo aggiungere delle animazioni inserendole direttamente nell’immagine!
L’animazione che vedi qua sopra è una GIF animata che pesa circa 2MB e non è assolutamente scalabile. Vuoi sapere quanto pesa la stessa immagine in SVG? 37kb… Ti ho incuriosito abbastanza?
Perché SVG e non JPEG (o PNG per quel che conta)
Iniziamo quindi lo scontro tra grafica vettoriale e la grafica bitmap, se non conosci la differenza tra le due mi basta dire che la grafica bitmap sono tutte quelle immagini che si ottengono colorando ogni singolo pixel mentre una grafica vettoriale è creata grazie alle formule matematiche.
In questo contesto ci troviamo a far lottare due approcci molto differenti, da un lato abbiamo la potenza di calcolo del computer che viene utilizzata per creare forme geometriche, riempirle di colore e modificarle con trasparenze, sfumature e anche animazioni. Dall’altro lato del ring troviamo dei formati immagine che utilizzano la potenza di calcolo del nostro computer in modo molto stupido, praticamente gli chiediamo di colorare ogni pixel di cui è composta un’immagine, un po’ come quando eravamo di fronte ai libri da colorare quando avevamo 4 anni 🙂
Ti è mai capitato di zoommare un’immagine così tanto da vedere i pixel da cui è composta? Forse ti è capitato qualcosa di ancora più simile all’immagine che trovi qua sopra.
Infatti capita molto spesso che man mano che ingrandiamo una determinata immagine i bordi degli elementi iniziano ad essere meno definiti, un po’ come succede alla scarpa destra di questo ragazzo.
Questo è dovuto principalmente al fatto che nelle immagini bitmap l’algoritmo di compressione ha bisogno di salvare soltanto lo stretto numero di informazioni necessarie e nient’altro. Significa che se l’immagine viene visualizzata alla sua grandezza naturale il nostro occhio la vedrà ben nitida e riuscirà a distinguere facilmente elementi e colori, ma anche con un leggero zoom la qualità ne risentirà drasticamente rendendo una bell’immagine un’accozzaglia di colori sfumati.
Grazie al formato SVG questo non succede affatto e anche se non possiamo andare a riprodurre immagini complesse come quella precedente (soltanto perché richiederebbe una grande potenza di calcolo) possiamo comunque utilizzarlo per dare vita alle nostre pagine web e migliorare le interfacce che stiamo realizzando.
Infatti, a parte rari casi ed esperimenti, tutte le interfacce di siti web e applicazioni che utilizziamo quotidianamente fanno affidamento a elementi geometrici per rappresentare bottoni, campi di ricerca, menu e anche i nostri loghi.
Per questi tipi di elementi le immagini SVG vincono su tutta la linea!
Un altro motivo per scegliere SVG
C’è ancora qualcosa che permette a questo formato di essere uno dei favoriti quando si parla di grafica per il web ed è il fatto che ogni elemento geometrico presente all’interno di un’immagine SVG non è altro che un elemento XML, ovvero un linguaggio di marcatura molto simile al già familiare HTML.
Senza andare a consultare il codice che ci ha permesso di creare la tigre precedente (perché ha moltissimi elementi), che ne dici se intanto scopriamo come sia possibile creare un cerchio rosso?
<svg viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="251" cy="251" r="150" fill="rgb(255,0,0)"/> </svg>
Ecco fatto, un bel cerchio rosso a tua disposizione! Se non credi a quanto ho appena scritto non devi far altro che aprire un Pen incollare il codice che ho appena inserito, che cosa vedi?
Tornando per un momento ad analizzare il peso che hanno queste immagini c’è da dire che questo cerchio rosso salvato in SVG pesa soltanto 144 byte mentre la stessa immagine salvata nel formato PNG che mi permette di avere uno sfondo trasparente pesa 7 kb. Ancora una volta abbiamo un rapporto tra i due formati incredibilmente a favore per le nostre SVG.
Però voglio avvertirti di una cosa, anche se abbiamo ottenuto questo strabiliante risultato, c’è da dire che essendo testo il formato SVG può essere ulteriormente compresso grazie alla tecnologia GZip che permette di ridurre di circa il 70% il peso di qualsiasi pagina web. C’è ancora margine di miglioramento 😉
Il miglior modo per utilizzare SVG nelle proprie pagine
Eccoci ad un piccolo tasto dolente perché anche se il formato di queste immagini è uno standard W3C da più di 15 anni, soltanto negli ultimi anni i browser hanno iniziato a supportarlo completamente (almeno per quanto riguarda la versione 1.1) mentre i più anziani non lo accettano di buon grado.
Come succede da anni a questa parte, se stai pensando che sia Internet Explorer il principale responsabile hai pensato bene! Per fortuna nostra tutti i problemi terminano dall’arrivo della sua versione 9 e a oggi con Edge non ci sono più problemi per includerle nelle nostre pagine.
Allo stesso tempo, se sei come me, ti sarà sicuramente sorto un dubbio perché quello che abbiamo visto poco fa non era un formato immagine, bensì del codice SVG che ci ha permesso di creare un cerchio rosso all’interno del nostro browser.
Come possiamo creare un’immagine SVG?
A parte i programmi di grafica come Illustrator, Sketch e Affinity Design che permetto di esportare le nostre immagini con un’estensione .svg
possiamo fare la stessa identica cosa anche dai nostri editor di testo. Per esempio, io ho creato il cerchio precedente aprendo il fedele Atom e salvando il codice che ho scritto con estensione .svg
in questo modo ho creato l’immagine di cui avevo bisogno.
Con la fama che sta guadagnando questo formato negli ultimi anni sono nati moltissimi programmi di grafica dedicati alla sua creazione, ma prima di andarli a scoprire in questa sezione voglio affrontare un argomento diverso. In questa sezione voglio parlarti dei metodi per inserire le immagini SVG nelle pagine web.
Come si inserivano SVG nel passato
Come ti ho accennato precedentemente, il formato SVG è uno standard da diverso tempo ma molti sviluppatori hanno tardato a implementarlo nei vari browser per diversi motivi che non staremo ad analizzare. Diversi anni fa si doveva inserire questo tipo di immagine sfruttando dei tag dedicati all’inclusione di file multimediali o esterni come embed
, object
e iframe
.
<embed type="image/svg+xml" src="img.svg" /> <object type="image/svg+xml" data="img.svg"> <!-- fallback --> </object> <iframe src="img.svg"> <!-- fallback --> </iframe>
Per nostra fortuna, anche se in alcuni casi era possibile inserire delle immagini di fallback per i browser che non supportavano questo formato, i limiti che ci hanno imposto questi elementi in termini di accessibilità, semantica e responsive sono ormai un cattivo ricordo.
Al giorno d’oggi queste soluzioni sono ormai sconsigliate e si utilizzano soltanto se nel nostro progetto è richiesta la compatibilità con vecchi browser, come Internet Explorer 8 e Android 2.3.
Inseriamo un SVG come sfondo
In alcuni contesti è molto utile poter inserire questo formato utilizzando un linguaggio con il quale siamo molto confidenti, ovvero il nostro CSS.
.ele{ background: url(img.svg); }
Se vogliamo inserire le nostre immagini SVG con questa sintassi il nostro lavoro è molto semplice perché non dovremo preoccuparci di fallback o altro, semplicemente il browser utilizzerà l’immagine che gli abbiamo indicato come sfondo per l’elemento scelto.
Con questa soluzione abbiamo l’obbligo di inserire le dimensioni in modo da far adattare l’immagine alle grandezze del contenitore o utilizzando una proprietà come background-size
impostata al valore cover
per fare la stessa cosa sui browser che la supportano.
Un SVG è un’immagine, quindi usiamo <img>
Eccoci quindi all’ultima alternativa che ci permette di inserire le immagini all’interno delle pagine web, dato che un SVG non è altro che un’immagine potremmo inserirla direttamente utilizzando l’elemento dedicato.
<img src="img.svg" alt="...">
Niente di più semplice vero? Utilizziamo un tag che conosciamo bene e nel suo attributo src
inseriamo il percorso verso l’immagine.
Ovviamente questa soluzione, come le precedenti, soffre di alcuni problemi che abbiamo discusso precedentemente, prima tra tutte l’impossibilità di inserire un’immagine di fallback. Per fortuna esistono molte librerie JavaScript, come per esempio questa, che permettono di conoscere se il browser che visualizza l’immagine supporta o meno questo formato e all’occorrenza sostituire il percorso indicato nell’attributo.
Però il limite delle soluzioni che ti ho presentato precedentemente non riguarda soltanto la compatibilità con i browser datati, c’è un altro importante aspetto che ci interessa quando andiamo ad inserire le immagini SVG all’interno delle nostre pagine.
Perché è sempre meglio inserire SVG inline
In questo contesto torniamo per un momento ad analizzare le immagini SVG dal punto di vista “codice”. Fino a ora abbiamo parlato di come sia possibile inserirle come classico file immagine e quindi utlizzare soluzioni HTML e CSS per includerle nelle pagine.
Ma stiamo sbagliando perché le immagini SVG non sono immagini classiche.
Inserire queste immagini attraverso le soluzioni precedenti limita incredibilmente le potenzialità che queste hanno nella gestione dello stile e delle animazioni! Hai capito bene, dato che il codice SVG è molto simile al XML può essere personalizzato attraverso CSS e JavaScript per modificarne le proprietà e applicare animazioni.
Avere un SVG inserito direttamente nel codice HTML ci permette di avviare delle animazioni CSS e modificare lo stile in base alle sue interazioni.
L’esempio che ti ho appena inserito può sembrare stupido, ma mi aiuta a farti capire che cosa intendo. Non ho fatto altro che prendere il codice del cerchio rosso che abbiamo creato precedentemente (modificandola leggermente per farla entrare nella viewport senza utilizzare CSS) e poi ho applicato una semplice animazione utilizzando la pseudo classe :hover
. Ecco il codice CSS:
.round:hover{ fill: blue; }
Se analizzi il codice del Pen precedente troverai che ho aggiunto l’attributo class
all’elemento circle
in modo da poterlo selezionare attraverso i CSS e questa è una delle prime interessanti soluzioni che possiamo mettere in pratica quando lavoriamo con le immagini SVG inserite direttamente nel codice HTML.
Inserendo infatti le immagini in questo modo, ogni percorso o forma geometrica realizzata in SVG è selezionabile attraverso CSS o JavaScript. La cosa importante è utilizzare le proprietà native degli SVG, come per esempio fill
al posto di background-color
perché altrimenti i nostri effetti non funzioneranno.
Sono sicuro che adesso apprezzi molto di più questo tipo di immagini, ma torneremo successivamente con altri articoli e corsi dove ti spiegheremo nel dettaglio come sia possibile personalizzarle e animarle. Prima di concludere c’è un ultimo aspetto che voglio trattare con te e riguarda la creazione di queste immagini.
Come creare immagini SVG?
Se non sei in grado di utilizzare un programma di grafica non mi resta altro che dirti: benvenuto in famiglia!
Personalmente so utilizzare Affinity Design quel tanto che basta per creare layout web e interfacce per dispositivi mobili, ma se mi chiedi di creare qualcosa di diverso come una semplice illustrazione mi trovi a fare stupidi esperimenti che non porteranno mai a niente.
Questo perché non è il mio lavoro, io sono uno sviluppatore!
Posso intuire quando un’interfaccia è ben realizzata, bilanciata e adatta a diventare responsive, ma creare delle grafiche partendo da zero sono proprio negato. Che dire… Ognuno ha il suo talento 🙂
Prima ti avevo detto che per creare delle immagini in formato SVG possiamo utilizzare alcuni programmi di grafica, come per esempio Illustrator, Sketch e Affinity Design o altri come Vectr e Boxy SVG (entrambi gratuiti).
La cosa bella è che utilizzare dei programmi di grafica che sono stati appositamente pensati per creare SVG da utilizzare in pagine web è che questi sono in grado di ottimizzare l’output del nostro codice.
Infatti una cosa che dobbiamo sempre tenere a mente quando si lavora con gli SVG è la qualità del codice che viene generato perché in base a questo possiamo ottimizzare il peso, la qualità e la velocità delle nostre animazioni incluse nelle immagini.
Tratteremo in un articolo distinto tutte le operazioni che ci permettono di ottimizzare gli SVG e anche di come renderli più accessibili perché le informazioni da condividere sono molte e questo articolo è già abbastanza lungo. Inoltre vogliamo sapere da te quanto sei interessato a ottenere questo tipo di informazioni, quindi non fare il timido e commenta qua sotto 😉
Prima di concludere voglio però rassicurarti su una cosa, tu non hai alcun bisogno di creare immagini SVG o di imparare ad usare uno dei programmi indicati precedentemente perché il web è incredibilmente generoso e offre moltissimi posti dove poter trovare immagini vettoriali di alta qualità e, cosa ancor più bella, gratuite.
Dove trovare immagini vettoriali
Il primo posto dove vado a cercare questo tipo di immagini è Freepik, un immenso portale di immagini vettoriali (e non) che offre tutte le immagini con licenza creative commons.
Potrai scegliere di fare un abbonamento mensile e non avere alcun limite sul numero di download e sulle immagini che vorrai scaricare, ma ti confesso che anche con l’account gratuito ci sono moltissime immagini che possono essere utilizzate per qualsiasi scopo. Io per esempio le utilizzo moltissimo per creare le immagini di copertina degli articoli.
Altro portale molto interessante è Vecteezy che presenta un immenso numero di immagini semplici da esportare per i nostri scopi.
Sicuramente esistono moltissimi altri portali che raccolgono grafiche vettoriali, ma onestamente mi trovo spesso a utilizzare questi due perché li trovo molto completi e ben forniti. Se poi per un determinato progetto ho bisogno di una grafica personalizzata mi rivolgo a chi fa questo lavoro di professione 😉
Le icone, il miglior modo per iniziare con SVG
Dalle immagini che rappresentano elementi complessi pieni di colori, sfumature e ombre passiamo a un elemento molto minimal e che ci aiuterà moltissimo a muovere i primi passi: le icone!
Anche in questo caso, trovare icone di buona qualità non è affatto difficile perché esistono decine di portali che ci permettono di accedere a migliaia di icone e consentono di scaricarle in formato SVG. Il mio preferito fra tutti è Flaticon che oltre a permettermi il download delle icone in SVG mi permette anche di personalizzarne il colore. È una piccola feature ma quando devi scaricare decine di icone ti assicuro che fa la differenza 🙂
Iniziare lavorando con le icone in SVG è sicuramente vantaggioso perché ti troverai degli elementi molto più semplici e gestibili. Io per esempio ho iniziato con le icone lineari, senza neanche dei colori pieni. Ho iniziato a muovere i primi passi con quelle e man mano che diventavo sempre più confidente con queste tipologie di immagini ho iniziato ad analizzare e usare immagini man mano più complesse.
La scelta è ovviamente tua, però ti assicuro che procedere in modo graduale ci permette di non bruciarci 😉
Conclusioni
Con questo articolo abbiamo conosciuto un formato immagine che era presente da 15 anni come raccomandazione del W3C ma che ben pochi utilizzano quotidianamente.
Mi sono chiesto più e più volte come mai questo formato sta tardando a entrare nell’uso quotidiano e dal mio punto di vista il problema principale è che designer e developer parlano spesso due lingue diverse. Noi sviluppatori non vediamo l’ora di ottenere le grafiche per il progetto che stiamo costruendo e di inserirle al suo interno senza pensarci troppo, mentre i designer non si possono sognare di aprire un file SVG in un editor di testo per ottimizzare il codice ottenuto.
Anche tu pensi che sia così?
Mentre aspetti i futuri articoli che pubblicheremo perché non condividi con noi il tuo pensiero? Qual è il tuo problema più grosso per poter iniziare a lavorare con questo formato di immagini?
Andy War dice
Forse è un programma troppo ponderoso per chi deve fare qualche icona, ma Inkscape usa l’svg come formato nativo.
Silvia dice
Ottimo articolo, l’unica cosa che mi dispiace è che WordPress non digerisce bene l’svg, mi spiego meglio =) per inserire e sostituire delle immagini o loghi diventa un procedimento più macchinoso rispetto alle semplici png.
andywar65 dice
Ci sono vari plugin che permettono di caricare svg direttamente nella media library. Io ho sperimentato SVG Support, che permette inoltre di modificare l’svg tramite css.
AVdesign dice
Ottimo articolo, complimenti 🙂
Andrea Barghigiani dice
Grazie mille, fa un’incredibile piacere scoprire che il duro lavoro che facciamo viene apprezzato. Torna spesso a trovarci perché abbiamo intenzione di continuare così ancora per molto 😉
Marco dice
“[…] questo cerchio rosso salvato in SVG pesa soltanto 144 byte mentre la stessa immagine salvata nel formato PNG che mi permette di avere uno sfondo trasparente pesa 7 kb.”
7kb (in realtà 1kb è più che sufficiente) alla prima richiesta e ~0kb per ogni richiesta successiva sfruttando la cache del browser. L’inline delle SVG porta ad un incremento dei byte trasferiti nel lungo periodo, quindi su questo aspetto non vince assolutamente.
È sicuramente un aspetto trascurabile in caso di piccole icone, ma citare anche gli aspetti negativi non farebbe male, tutto ha pro e contro.
Andrea Barghigiani dice
Ciao Marco,
certo che segnalare lati positivi e negativi di una tecnologia è una cosa giusta da fare e voglio scusarmi se dalla lettura di questo articolo possa essere sembrato il contrario, probabilmente ero abbastanza emozionato dalle possibilità che il formato SVG ci mette a disposizione.
La differenza in kb in fin dei conti è soltanto uno degli aspetti che possiamo tenere in considerazione. Le SVG ci permettono di animare i loro elementi in diversi modi, di personalizzarne il colore con i CSS, la loro nativa scalabilità e la possibilità di risparmiare delle chiamate HTTP che tendenzialmente, dati i tempi di connessione, si attestano alle centinaia di millisecondi per ogni immagine da scaricare. Tutti questi sono aspetti che dal mio punto di vista sono a favore delle SVG.
È anche vero che grazie all’HTTP/2 e alla possibilità di molteplici connessioni contemporanee questo aspetto inizia a diventare meno importante ma non credo di dire baggianate affermando, soprattutto in casi di immagini semplici (come hai ben indicato anche tu), che al momento il formato SVG è un ottimo formato che possiamo utilizzare per l’inserimento di immagini vettoriali.
Non sto cercando di portare acqua al mio mulino, ci sono casi in cui formati come PNG o JPEG sono ancora molto utili da utilizzare e altri in cui le stesse GIF e le sue animazioni riescono a dare vita a un sito web in una manciata di kb. La vera esperienza viene dal saper utilizzare il formato migliore nel momento opportuno.
Grazie per le tue precisazioni Marco, aspetto altri tuoi interessanti commenti che possano mettere in discussione i contenuti dei miei articoli e migliorare sia le mie conoscenze che quelle dei lettori di SkillsAndMore.