Creare contenuti per dispositivi mobili accattivanti significa trovare il giusto equilibrio tra la quantità di dati scaricati e il massimo impatto visivo. La grafica vettoriale è un ottimo strumento per offrire risultati visivi straordinari con una larghezza di banda minima.
Molte persone pensano che la tela sia l'unico modo per disegnare una combinazione di vettori e raster sul web, ma ci sono alternative che presentano alcuni vantaggi. Un ottimo modo per ottenere il disegno vettoriale è usare la Scalable Vector Graphics (SVG), una parte fondamentale di HTML5.
Sappiamo tutti che il design reattivo è fondamentale per gestire le diverse dimensioni degli schermi e il formato SVG è ideale per gestire con facilità schermi di diverse dimensioni.
Il formato SVG è un ottimo modo per presentare disegni al tratto vettoriali ed è un ottimo complemento per i bitmap, poiché quest'ultimo è più adatto per immagini a tonalità continue.
Uno degli aspetti più utili delle immagini SVG è che la sua risoluzione è indipendente, il che significa che non devi pensare a quanti pixel sono presenti sul tuo dispositivo: il risultato viene sempre ridimensionato e ottimizzato dal browser per avere un aspetto fantastico.
Strumenti di authoring popolari come l'applicazione Disegno di Google Drive, Inkscape, Illustrator, Corel Draw e molti altri generano file SVG, quindi ci sono molti modi per generare contenuti. Analizzeremo alcuni modi per utilizzare gli asset SVG, oltre ad alcuni suggerimenti per l'ottimizzazione.
Concetti fondamentali sulla scalabilità
Iniziamo con uno scenario semplice: vuoi utilizzare un'immagine a pagina intera come sfondo della pagina web. Sarebbe davvero utile avere il logo della tua azienda o qualcosa di simile in background a schermo intero, ma ovviamente è molto difficile fare bene con tutte le diverse dimensioni degli schermi disponibili. Per spiegare meglio, iniziamo con il semplice logo HTML5.
Il logo HTML5 è mostrato di seguito e, come hai intuito, ha origine da un file SVG.
Fai clic sul logo ed esaminalo in qualsiasi browser moderno per vedere che si adatta perfettamente a finestre di qualsiasi dimensione. Prova ad aprirla nel tuo browser preferito, ridimensiona la finestra e osserva che l'immagine è nitida a qualsiasi ingrandimento. Se provassimo a fare questo con un'immagine bitmap, dovremmo pubblicare molte dimensioni diverse per ogni schermo che incontriamo, oppure essere costretti a sopportare immagini ridimensionate in modo orribile.
Quindi qual è il problema? Se non l'avevi notato, questo è l'unico formato che viene scalato indipendentemente dal dispositivo utilizzato per visualizzarlo. Quindi, dobbiamo pubblicare un solo asset per i nostri utenti, senza mai dover sapere quali sono le dimensioni dello schermo o della finestra: ordinato.
Ma non è tutto: il logo HTML5 è di soli 1427 byte! Accidenti, le dimensioni sono talmente piccole che difficilmente il piano dati mobile viene caricato durante il caricamento, il che ne rende il caricamento veloce e lo rende economico e veloce per i tuoi utenti.
Un altro aspetto interessante dei file SVG è che possono essere compressi con formato GZIP per ridurli ulteriormente. Quando comprimi il file SVG in questo modo, l'estensione del file deve essere modificata in ".svgz". Nel caso del logo HTML5, quando compresso si riduce a 663 byte, e la maggior parte dei browser moderni lo gestisce con facilità.
Con il nostro file di esempio su alcuni dei più recenti dispositivi, l'utilizzo di dati vettoriali compressi ha un vantaggio di 60 volte. Inoltre, tieni presente che questi confronti vengono effettuati tra JPEG e SVG, anziché PNG. Tuttavia, il formato JPEG è con perdita di dati e risulta in una qualità inferiore rispetto al formato SVG o PNG. Se utilizzassimo PNG, il vantaggio sarebbe di oltre 80x, il che è sbalorditivo!
Tuttavia, PNG e JPEG non sono uguali. Una serie di suggerimenti per l'ottimizzazione indica 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 di 6x. L'immagine a destra è la stessa ma è codificata con JPEG.
È facile vedere che il salvataggio delle dimensioni dei file in formato JPEG ha un costo, con artefatti di colore ai bordi nitidi, il che probabilmente fa pensare alla tua retina di aver bisogno di occhiali:-) Ad essere onesti, il formato JPEG è ottimizzato per le foto ed è per questo che non è così buono per le arti vettoriali. In ogni caso, la qualità della versione SVG è uguale a quella del file PNG, quindi vince su tutti gli account, sia in termini di dimensioni del file che di chiarezza.
Creare sfondi vettoriali
Diamo un'occhiata a come puoi 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, a prescindere dalle dimensioni del display, l'immagine è ben dimensionata e con bordi nitidi e nitidi.
Poi, ovviamente, vorremmo inserire dei contenuti in background.
Tuttavia, come puoi vedere, il risultato non è l'ideale perché non possiamo leggere il testo. Che cosa facciamo?
Regolazione dello sfondo per un aspetto migliore
La cosa più ovvia da fare è rendere più chiari tutti i colori dell'immagine di sfondo. Questo può essere ottenuto facilmente utilizzando la proprietà di opacità del CSS o utilizzando l'opacità nel file SVG stesso. Per farlo funzionare, basta aggiungere questo codice ai tuoi contenuti CSS:
#bg {
opacity: 0.2;
}
Otterrai un risultato simile al seguente:
Sebbene questa soluzione sia semplice, è probabile che comprometta le prestazioni su un dispositivo mobile. Nella maggior parte dei browser per dispositivi mobili esistenti, l'uso della proprietà opacità può essere molto più lento rispetto agli oggetti opachi.
Una soluzione migliore
Modificare il colore nei contenuti SVG originali è molto meglio che impostare l'opacità con CSS. Di seguito è riportato il nostro logo HTML5 modificato per sembrare sbiadito cambiando i colori utilizzati e, nel processo, evitando del tutto la proprietà dell'opacità. Di conseguenza, l'immagine di sfondo riportata di seguito sembra identica al risultato della modifica dell'opacità, ma in realtà viene dipinta molto più velocemente consentendoci di risparmiare tempo di CPU e di prolungare la preziosa durata della batteria.
Ora che abbiamo acquisito una buona conoscenza di alcuni concetti fondamentali, passiamo ad altre funzionalità.
Utilizzo efficiente dei gradienti
Supponiamo di voler creare un pulsante. Potremmo iniziare creando un rettangolo con dei bei angoli arrotondati. Poi potremmo aggiungere un bel gradiente lineare per dare al pulsante una bella texture. Il codice da utilizzare potrebbe essere simile al seguente:
<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à il seguente aspetto:
Osserva come il gradiente che abbiamo aggiunto va da sinistra a destra. Questa è la direzione del gradiente predefinita nel file SVG. Ma possiamo fare di meglio, per un paio di motivi diversi: estetica e prestazioni. Proviamo a modificare la direzione del gradiente per renderlo più accattivante. L'impostazione degli attributi "x1", "y1", "x2" e "y2" sul gradiente lineare controlla la direzione del colore di riempimento.
L'impostazione solo dell'attributo "y2" ci permette di modificare il gradiente in diagonale. Quindi questa piccola modifica al codice:
<linearGradient id="blueshiny" y2="1">
ci offre un aspetto diverso per il pulsante, che avrà l'aspetto nell'immagine seguente.
Possiamo anche cambiare facilmente il gradiente per andare dall'alto verso il basso con questa piccola modifica al codice:
<linearGradient id="blueshiny" x2="0" y2="1">
e l'output sarà simile all'immagine seguente.
Quindi cosa c'è in questa discussione sui diversi angoli del gradiente?
Abbiamo scoperto che nell'ultimo esempio, quello con un gradiente che va dall'alto verso il basso è il più veloce da disegnare sulla maggior parte dei dispositivi. È un segreto poco noto tra i geek grafici che scrivono il codice del browser in base a quei gradienti verticali (dall'alto verso il basso) che dipingono quasi alla stessa velocità di un colore a tinta unita. Il motivo è che dipingere un oggetto avviene su righe orizzontali lungo la pagina; le viscere del codice di disegno comprendono che il colore non cambia su ogni riga e quindi lo ottimizzano.
Pertanto, se scegli di utilizzare le sfumature nel design della pagina, le sfumature verticali saranno più veloci e consumano meno batteria come effetto collaterale. Questa velocità si applica anche ai gradienti CSS, quindi non è solo una questione di SVG.
Se ci sentiamo molto avventurosi con questa nuova conoscenza dei gradienti, potremmo aggiungere un bel gradiente dietro il nostro logo HTML5 aggiungendo il codice seguente:
<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 leggera sfumatura multicolore che funziona velocemente, alla stessa velocità di uno sfondo a tinta unita.
Se carichi i contenuti in un browser desktop e ridimensionano i contenuti in base a proporzioni estreme, vedrai delle barre bianche in alto/basso o a sinistra/destra. Comunque, dopo le modifiche apportate al codice sopra, lo sfondo risultante avrà il seguente aspetto:
Crea animazioni con facilità
Forse ti starai chiedendo a cosa serve usare un gradiente SVG come sfondo della pagina. Potrebbe avere senso farlo con i gradienti CSS, ma un vantaggio delle immagini SVG è che il gradiente stesso risiede nel DOM. Ciò significa che puoi modificarlo con lo script, ma soprattutto puoi sfruttare la funzionalità di animazione integrata di SVG per aggiungere piccole modifiche ai tuoi contenuti.
Ad esempio, modificheremo il nostro colorato logo HTML5 cambiando la definizione del gradiente 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 qui sopra.
Il codice cambia i colori del nostro gradiente lineare attraverso tutte le diverse interruzioni di colore che abbiamo definito in un ciclo continuo la cui esecuzione richiede 20 secondi. Il risultato è che il gradiente si muove verso l'alto della pagina con un movimento continuo che non si ferma mai.
Il bello è che non c'è bisogno di un copione. È per questo che viene eseguito come immagine di riferimento in questa pagina, ma riduce anche il carico di lavoro su una CPU mobile eliminando la necessità di script.
Inoltre, il browser stesso può sfruttare la sua conoscenza del disegno per garantire un overhead minimo della CPU per creare animazioni accattivanti.
C'è un'avvertenza: alcuni browser non gestiscono affatto questo stile di animazione, ma in quel caso otterrai comunque uno sfondo di un bel colore, ma non cambierà. Si potrebbe risolvere questo problema utilizzando lo script (e requestAnimationFrame), ma è un po' più 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 i tuoi utenti e quei piani dati soddisfatti durante il processo.
Da dove andiamo?
In molti casi il formato SVG non è l'ideale e foto e video sono rappresentati meglio in altri formati. Il testo è un altro, in cui HTML e CSS nativi funzionano molto meglio in generale. Tuttavia, può essere la scelta ideale come strumento nell'arsenale per le opere d'arte disegnate a linee.
Abbiamo parlato di alcuni utilizzi fondamentali di base delle immagini SVG, a dimostrazione di quanto sia facile generare contenuti di dimensioni ridotte che forniscano immagini vivide a schermo intero con una quantità minima di download. Piccoli miglioramenti ai contenuti possono dare facilmente risultati grafici straordinari con quantità banali di markup. Nel prossimo articolo esamineremo alcuni dettagli su come l'animazione integrata in SVG può essere utilizzata per effetti più semplici ed efficaci e confronteremo l'uso di canvas con SVG per scegliere lo strumento giusto per creare il tuo sito di grafica per dispositivi mobili.
Altre utili risorse
- 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 di W3C contenente link a specifiche, risorse e così via
- Raphaël, una libreria JavaScript che offre una pratica API per disegnare e animare contenuti SVG, con un'ottima alternativa per i browser meno recenti.
- Risorse SVG della Slippery Rock University. Include un link a un fantastico Introduzione ai contenuti SVG.