Creare contenuti per il mobile che lasciano a bocca aperta significa trovare il giusto equilibrio tra la quantità di dati scaricati e l'impatto visivo massimo. Le immagini vettoriali sono un ottimo modo per ottenere risultati visivi straordinari utilizzando una larghezza di banda minima.
Molte persone pensano alla tela come l'unico modo per disegnare un mix di vettori e raster sul web, ma esistono alternative che hanno alcuni vantaggi. Un ottimo modo per realizzare disegni vettoriali è utilizzare Scalable Vector Graphics (SVG), un componente chiave di HTML5.
Sappiamo tutti che il responsive design è fondamentale per gestire schermi di dimensioni diverse e SVG è ideale per gestire facilmente schermi di dimensioni diverse.
SVG è un ottimo modo per presentare disegni a linee basati su vettori ed è un ottimo complemento per le immagini bitmap, che sono più adatte per le immagini a tono continuo.
Uno degli aspetti più utili degli SVG è che sono indipendenti dalla risoluzione, il che significa che non devi preoccuparti di quanti pixel hai sul tuo dispositivo. Il risultato verrà sempre ridimensionato ed ottimizzato dal browser per avere un aspetto ottimale.
Tra gli strumenti di sviluppo più diffusi, come l'applicazione Disegno su Google Drive, Inkscape, Illustrator, Corel Draw e molti altri, si generano contenuti SVG in molti modi. Analizzeremo alcuni modi per utilizzare gli asset SVG, oltre a alcuni suggerimenti per l'ottimizzazione per iniziare.
Concetti fondamentali sulla scalabilità
Iniziamo con uno scenario semplice: vuoi un'immagine a pagina intera come sfondo della pagina web. Sarebbe davvero utile avere il logo della tua azienda o qualcosa di simile a schermo intero in background in qualsiasi momento, ma ovviamente è molto difficile farlo bene con tutte le diverse dimensioni dello schermo. Per fare un esempio, inizieremo con il semplice logo HTML5.
Il logo HTML5 è mostrato di seguito e, come avrai intuito, ha origine come file SVG.
Fai clic sul logo e dai un'occhiata in qualsiasi browser moderno: vedrai che si adatta perfettamente a qualsiasi dimensione della finestra. Prova ad aprirlo nel tuo browser preferito, ridimensiona la finestra e verifica che l'immagine sia nitida a qualsiasi livello di ingrandimento. Se dovessimo provare a farlo con un'immagine bitmap, o avremmo dovuto pubblicare molte dimensioni diverse per ogni schermo che potremmo incontrare, oppure essere costretti a sopportare immagini in scala estremamente pixelate.
Che problema c'è? Se non l'hai notato, questo è l'unico formato che si adatta indipendentemente dal dispositivo utilizzato per visualizzarlo. Dobbiamo quindi mostrare un solo asset ai nostri utenti, senza dover mai sapere quali sono le dimensioni dello schermo o della finestra. Perfetto!
Ma non è tutto: il logo HTML5 è di soli 1427 byte. È così piccolo che non inciderà quasi per niente sul piano di dati mobili durante il caricamento, il che significa che si carica rapidamente ed è economico e veloce per gli utenti.
Un altro aspetto interessante dei file SVG è che possono essere compressi con GZIP per ridurli ulteriormente. Quando comprimi i file SVG in questo modo, l'estensione del file deve essere modificata in ".svgz". Nel caso del logo HTML5, le dimensioni si riducono a soli 663 byte dopo la compressione e la maggior parte dei browser moderni lo gestisce facilmente.
Con il nostro file di esempio su alcuni dei dispositivi più recenti, abbiamo riscontrato un vantaggio di circa 60 volte utilizzando i dati vettoriali compressi. Inoltre, tieni presente che questi confronti vengono effettuati tra JPEG e SVG, anziché PNG. Tuttavia, JPEG è un formato con perdita di dati che comporta una qualità inferiore rispetto a SVG o PNG. Se utilizzassimo il formato PNG, il vantaggio sarebbe superiore a 80 volte, un risultato sorprendente.
Ovviamente, i formati PNG e JPEG non sono uguali. Diversi suggerimenti di ottimizzazione consigliano di utilizzare JPEG anziché PNG, ma non sempre è una buona idea. Dai un'occhiata alle immagini di seguito. L'immagine a sinistra è un'immagine PNG della parte in alto a destra del logo HTML5 ingrandita sei volte. L'immagine a destra è la stessa, ma codificata con JPEG.
È facile capire che il risparmio delle dimensioni del file in JPEG ha un costo, con artefatti di colore agli spigoli netti, che probabilmente fanno pensare alla retina che ha bisogno di occhiali:-) Per essere onesti, il formato JPEG è ottimizzato per le foto, motivo per cui non è altrettanto buono per l'illustrazione vettoriale. In ogni caso, la qualità della versione SVG è la stessa del PNG, quindi è la migliore sotto tutti gli aspetti, sia per le dimensioni del file che per la chiarezza.
Creare sfondi vettoriali
Vediamo come utilizzare un file vettoriale come sfondo di una pagina. Un modo semplice è dichiarare il file di sfondo utilizzando il posizionamento fisso CSS:
<style>
#bg {
position:fixed;
top:0;
left:0;
width:100%;
z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>
Noterai che, indipendentemente dalle dimensioni del display, l'immagine ha dimensioni adeguate con bordi nitidi e puliti.
Poi, ovviamente, vorremmo inserire alcuni contenuti sullo sfondo.
Tuttavia, come puoi vedere, il risultato non è ottimale perché non possiamo leggere il testo. Che cosa facciamo?
Regolare lo sfondo per renderlo più bello
La cosa ovvia che dobbiamo fare è rendere tutti i colori dell'immagine di sfondo più chiari. Questo risultato si ottiene facilmente utilizzando la proprietà CSS opacity o l'opacità nel file SVG stesso. Per farlo, puoi semplicemente aggiungere questo codice ai contenuti CSS:
#bg {
opacity: 0.2;
}
Il risultato sarà il seguente:
Sebbene semplice, questa soluzione potrebbe causare problemi di rendimento su un dispositivo mobile. Per la maggior parte dei browser mobile esistenti, l'utilizzo della proprietà opacità può essere molto più lento rispetto agli oggetti opachi.
Una soluzione migliore
La modifica del colore nei contenuti SVG originali è molto meglio dell'impostazione dell'opacità con CSS. Di seguito è riportato il nostro logo HTML5 modificato in modo da apparire sbiadito cambiando i colori utilizzati, evitando del tutto la proprietà opacità. Quindi l'immagine di sfondo riportata di seguito sembra identica al risultato della modifica dell'opacità, ma in realtà dipinge molto più rapidamente, consentendoci di risparmiare tempo di CPU e di risparmiare una preziosa durata della batteria.
Ora che abbiamo acquisito una buona conoscenza di alcuni concetti fondamentali, passiamo ad altre funzionalità.
Utilizzare le sfumature in modo efficiente
Supponiamo di voler creare un pulsante. Potremmo iniziare creando un rettangolo con bei bordi arrotondati. Poi potremmo aggiungere un bel gradiente lineare per conferire al pulsante una bella texture. Il codice per farlo potrebbe avere il seguente aspetto:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="blueshiny">
<stop stop-color="#a0caf6" offset="0"/>
<stop stop-color="#1579df" offset="0.5" />
<stop stop-color="#1675d6" offset="0.5"/>
<stop stop-color="#115ca9" offset="1"/>
</linearGradient>
</defs>
<g id="button" onclick="alert('ouch!');">
<rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
<text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
</g>
</svg>
Il pulsante risultante avrà un aspetto simile a questo:
Nota come la sfumatura che abbiamo aggiunto va da sinistra a destra. Questa è la direzione del gradiente predefinita in SVG. Possiamo fare di meglio, per due motivi: l'estetica e le prestazioni. Proviamo a cambiare la direzione del gradiente per renderlo un po' più gradevole. L'impostazione degli attributi "x1", "y1", "x2" e "y2" sul gradiente lineare controlla la direzione del colore di riempimento.
L'impostazione dell'attributo "y2" ci consente di modificare la diagonale del gradiente. Questa piccola modifica al codice:
<linearGradient id="blueshiny" y2="1">
il nostro pulsante ha un aspetto diverso, risulta simile all'immagine di seguito.
Possiamo anche modificare facilmente il gradiente in modo che vada dall'alto verso il basso con questa piccola modifica al codice:
<linearGradient id="blueshiny" x2="0" y2="1">
e il risultato sarà simile all'immagine di seguito.
Ma che dire della discussione sui diversi angoli del gradiente che ho sentito chiedere?
Ebbene, risulta che l'ultimo esempio, quello con il gradiente da cima a fondo, è il più veloce da disegnare sulla maggior parte dei dispositivi. È un segreto molto poco noto tra gli esperti di grafica che scrivono il codice del browser in cui i gradienti verticali (dall'alto verso il basso) dipingono quasi alla stessa velocità di un colore a tinta unita. Il motivo è che la pittura di un oggetto viene eseguita in linee orizzontali lungo la pagina e il codice di disegno di base comprende che il colore non cambia in ogni linea, quindi lo ottimizza.
Pertanto, se scegli di utilizzare le sfumature nel design della pagina, quelle verticali saranno più veloci e, come effetto collaterale, utilizzeranno meno batteria. Questo aumento di velocità si applica anche alle sfumature CSS, quindi non è solo un problema SVG.
Se vogliamo provare questa nuova conoscenza sui gradienti, possiamo aggiungere un bel gradiente dietro il logo HTML5 aggiungendo il codice riportato di seguito:
<defs>
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0" />
<stop stop-color="#CCCCFF" offset="0.2" />
<stop stop-color="#CCFFCC" offset="0.4" />
<stop stop-color="#FFFFCC" offset="0.6" />
<stop stop-color="#FFEDCC" offset="0.8" />
<stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>
Il codice riportato sopra aggiunge un gradiente lineare verticale sbiadito allo sfondo del nostro logo HTML5 per dare una sfumatura multicolore sottile che viene visualizzata rapidamente, tanto quanto uno sfondo a tinta unita.
Se carichi i contenuti in un browser desktop e ridimensionali in base a proporzioni estreme, vedrai apparire delle barre bianche in alto/in basso o a sinistra/destra. Ad ogni modo, dopo le modifiche al codice apportate sopra, lo sfondo risultante avrà il seguente aspetto:
Crea animazioni con facilità
A questo punto potresti chiederti qual è lo scopo di utilizzare una sfumatura SVG come sfondo della tua pagina. In effetti, potrebbe avere senso farlo con i gradienti CSS, ma un vantaggio dell'SVG è che il gradiente stesso si trova nel DOM. Ciò significa che puoi modificarlo con script, ma soprattutto puoi sfruttare la funzionalità di animazione integrata di SVG per apportare modifiche sottili ai tuoi contenuti.
Ad esempio, modificheremo il nostro logo HTML5 colorato cambiando la definizione della sfumatura lineare con il codice riportato di seguito:
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0">
<animate attributeName="stop-color"
values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCCCFF" offset="0.2">
<animate attributeName="stop-color"
values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCFFCC" offset="0.4">
<animate attributeName="stop-color"
values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFFFCC" offset="0.6">
<animate attributeName="stop-color"
values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFEDCC" offset="0.8">
<animate attributeName="stop-color"
values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFCCCC" offset="1">
<animate attributeName="stop-color"
values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
</linearGradient>
Dai un'occhiata all'immagine di seguito per vedere il risultato di queste modifiche.
Il codice cambia i colori della sfumatura lineare attraverso tutti i diversi punti di colore che abbiamo definito in un ciclo continuo che richiede 20 secondi. L'effetto è che il gradiente sembra muoversi verso l'alto nella pagina in un movimento continuo che non si ferma mai.
Il bello è che non è necessario alcun script. Ecco perché viene eseguita come immagine di riferimento da questa pagina, ma riduce anche il carico di lavoro su una CPU mobile rimuovendo la necessità di script.
Inoltre, il browser stesso può sfruttare la sua conoscenza della pittura per garantire un overhead della CPU minimo per l'animazione elaborata.
C'è un'avvertenza: alcuni browser non gestiscono affatto questo stile di animazione, ma in questo caso avrai comunque un bello sfondo colorato che però non cambierà. Questo problema potrebbe essere risolto utilizzando script (e requestAnimationFrame), ma non rientra nell'ambito di questo articolo.
Un'altra cosa da notare è che questo file SVG non compresso è di soli 2922 byte, incredibilmente piccolo per fornire un effetto grafico così ricco, mantenendo gli utenti e i piani dati felici nel processo.
Da dove vuoi partire da qui?
In molti casi, l'SVG non è l'ideale, perché le foto e i video sono rappresentati meglio in altri formati. Il testo è un altro aspetto in cui gli asset HTML e CSS nativi funzionano molto meglio in generale. Tuttavia, come strumento nell'arsenale per l'artwork a linee, può essere la scelta ideale.
Abbiamo accennato ad alcuni utilizzi di base delle immagini SVG, mostrando quanto sia facile generare contenuti piccoli che forniscono grafica vivida a schermo intero con una quantità minima di download. Piccoli miglioramenti ai contenuti possono creare facilmente risultati grafici sorprendenti con piccole quantità di markup. Nel prossimo articolo esamineremo ulteriori dettagli su come l'animazione integrata in SVG può essere utilizzata per effetti più semplici e potenti e confronteremo l'uso di canvas con SVG per scegliere lo strumento giusto per la creazione di siti di grafica mobile.
Altre risorse utili
- Inkscape, un'applicazione di disegno open source che utilizza SVG come formato file.
- Apri Clip Art è un'enorme raccolta di clip art open source contenente migliaia di immagini SVG.
- Pagina SVG del W3C contenente link a specifiche, risorse e così via.
- Raphaël, una libreria JavaScript che fornisce un'API pratica per disegnare e animare contenuti SVG con un'ottima alternativa per i browser meno recenti.
- SVG Resources della Slippery Rock University, che include un link a un ottimo SVG Primer.