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 sorprendenti utilizzando una larghezza di banda minima.
Molte persone pensano che Canvas sia l'unico modo per disegnare una combinazione di vettori e raster sul web, ma esistono alternative che offrono 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 toni continui.
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.
Gli strumenti di authoring più diffusi, come l'applicazione Disegno in Google Drive, Inkscape, Illustrator, Corel Draw e molti altri, generano file SVG, quindi esistono molti modi per generare contenuti. Analizzeremo alcuni modi per utilizzare gli asset SVG, oltre a alcuni suggerimenti per l'ottimizzazione.
Concetti fondamentali sulla scalabilità
Iniziamo con uno scenario semplice: vuoi che un'immagine a pagina intera sia lo sfondo della tua 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 controlla che l'immagine sia nitida a qualsiasi livello di ingrandimento. Se provassimo a farlo con un'immagine bitmap, dovremmo pubblicare molte dimensioni diverse per ogni schermo che potremmo incontrare o essere costretti a utilizzare immagini ridimensionate con una risoluzione orribile.
Che problema c'è? Se non l'hai notato, questo è l'unico formato che si adatta indipendentemente dal dispositivo utilizzato per visualizzarlo. Di conseguenza, dobbiamo pubblicare un solo asset per i nostri utenti, senza dover mai conoscere le dimensioni dello schermo o della finestra. Fantastico!
Ma non è tutto: il logo HTML5 occupa solo 1427 byte. Wow, è 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 vantaggio 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 valore 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ù gradevole
La cosa ovvia che dobbiamo fare è rendere più chiaro tutto il colore dell'immagine di sfondo. 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 rappresentare un problema 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. Ecco il nostro logo HTML5 modificato in modo da apparire sbiadito cambiando i colori utilizzati ed evitando del tutto la proprietà di opacità. L'immagine di sfondo di seguito è identica al risultato della modifica dell'opacità, ma verrà visualizzata molto più rapidamente e ci farà risparmiare tempo della CPU e la durata della batteria.
Ora che abbiamo una buona conoscenza di alcuni aspetti 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. A questo punto potremmo aggiungere un bel gradiente lineare per dare al pulsante una bella trama. 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 predefinita della sfumatura in SVG. Ma 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">
ci offre un aspetto diverso per il nostro pulsante, che avrà il seguente aspetto.
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.
Mi pare di capire che ti stai chiedendo cosa c'entrano tutti questi discorsi sugli angoli diversi del gradiente.
Ebbene, l'ultimo esempio, quello con il gradiente da cima a fondo, è quello che viene disegnato più velocemente sulla maggior parte dei dispositivi. È un segreto poco conosciuto tra i fanatici della grafica che scrivono codice del browser: le sfumature verticali (dall'alto verso il basso) vengono applicate 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, alla stessa velocità di uno sfondo a tinta unita.
Se carichi i contenuti in un browser desktop e ne regoli le dimensioni in base a proporzioni estreme, vedrai delle barre bianche nella parte superiore/inferiore o sui lati sinistro/destro. 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, un valore incredibilmente ridotto per fornire un effetto grafico così ricco, il tutto a vantaggio degli utenti e dei relativi piani dati.
Che cosa vuoi fare adesso?
In molti casi, SVG non è l'ideale, perché le foto e i video sono rappresentati meglio in altri formati. Un altro esempio è il testo, in cui 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.
- Open 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.