Usare SVG per un background flessibile, scalabile e divertente, Parte I

SVG: un po’ di esempi d’uso#section1

Molte persone utilizzano SVG nel design del loro sito – soprattutto per le icone che descrivono l’argomento di un post (topic icons). Ad esempio, Sam Ruby, l’attuale co-chair del HTML5 Working Group, usa SVG per annotare i post sul suo blog con delle icone che rappresentano l’argomento di ciascun post. Erik Dahlstrom di Opera fa lo stesso, così come Jeff Schiller su Codedread. Jeff va oltre le icone, incorporando SVG nella barra del menu con effetto fisheye, così come nella grafica che circonda il contenuto del suo sito. Il sito Emacs for Mac OS X è realizzato in gran parte con SVG: provate a ridimensionare la pagina web per vedere in azione la funzione “scaling” (ridimensionamento) di SVG. Io ho usato SVG per creare un gradiente selezionando un colore dalla foto che viene visualizzata di volta in volta (ricaricate la pagina un paio di volte per vedere l’effetto), così come per un elemento di sfondo stravagante e per dare un tema generale che caratterizzi ed unisca i miei siti web.

Quando si può e quando non si può usare SVG#section2

SVG si può usare ovunque si usi una GIF, un JPEG o un PNG. Con SVG si forniscono le istruzioni di disegno piuttosto che una bitmap. Essendo SVG un formato grafico vettoriale, si può ridimensionare perché risulti adatto alla pagina web, mentre le immagini bitmap come i JPEG e le GIF non si possono ridimensionare, o perlomeno non si ridimensionano in maniera impeccabile. La proprietà del ridimensionamento (scaling) è particolarmente comoda quando gli utenti accedono alle pagine web da device piccoli come gli iPhone o grandi come monitor da 32 pollici. Per dimostrare ciò, osservate la Figura 1, che è uno snapshot del sito EMACS for OS X la prima volta che lo si è aperto in un browser. La Figura 2 mostra lo stesso sito, ma con la finestra del browser ristretta verticalmente: notate come l’immagine si restringa per adattarsi alla pagina, ridimensionandosi in maniera tale che le proporzioni dell’immagine siano sempre preservate.
Non importa quanto sia larga la pagina, l’immagine si ridimensiona di conseguenza, senza effetti di spixellamento.

Fig. 1. Snapshot del sito EMACS for OS X

Fig. 2. Lo stesso sito con una dimensione diversa della finestra del browser

SVG può anche essere “bandwith-friendly”: non importa quanto sia grande l’oggetto grafico, il file XML che lo descrive è l’unica cosa trasmessa al client. Dai millimetri ai metri, la richiesta di banda per l’oggetto grafico è la stessa, cosa che rende SVG un’alternativa attrattiva quando una grafica deve riempire lo sfondo di una pagina web, senza doversi ripetere
Per quanto SVG possa essere divertente, ci sono delle circostanze in cui è meglio non usarlo. Ad esempio, si può convertire una foto in un tracciato SVG, ma la conversione non sarà mai a livello del singolo pixel. Inoltre, i device client si bloccheranno se l’oggetto grafico è troppo complicato.
Ho convertito un’immagine JPEG piuttosto complessa in un file SVG che uso per fare test: non solo ha fatto bloccare la prima beta release di Chrome, ma lo stesso browser ha fatto bloccare il mio computer cercando di processare il file SVG.
Quindi: no, SVG non può rimpiazzare le foto o le immagini complesse, ma per tutto il resto va abbastanza bene.
Prima di sporcarci le mani con SVG nella seconda parte di questo articolo, è importante conoscere come i browser supportino SVG e le sue caratteristiche di accessibilità.

Supporto Browser#section3

La maggior parte dei browsers – Firefox, Chrome, Safari e Opera – supporta SVG, sia come file caricato in un oggetto sia direttamente inserito nel XHTML. Jeff Schiller, che ho menzionato prima, ha creato ed aggiorna un grafico che mostra in dettaglio come i vari browsers supportino SVG. Come si evince dal grafico, la maggior parte dei browsers supporta le funzioni base di SVG. Queste includono il supporto per i font, per le immagini, per gli elementi grafici come cerchi o percorsi (paths) così come i gradienti ed alcuni filtri. Solo le funzioni più esoteriche non sono supportate. Tuttavia, la mancanza di funzioni più avanzate non dovrebbe influenzare l’utilizzo di SVG nel design di un sito, né tantomeno raccomando l’uso di immagini SVG oltremodo complesse come sfondo di una pagina: più un’immagine è complessa, più tempo occorrerà al browser per visualizzarla.
Inoltre, pensateci due volte prima di utilizzare sfondi animati, poiché molte persone sono innervosite da una pagina che ha troppo movimento, specialmente se si tratta di movimento non controllabile disabilitando JavaScript. Come ho appena detto, la maggior parte dei browsers supporta le funzioni base di SVG. L’eccezione illustre è Internet Explorer.

Internet Explorer e SVG#section4

Vi sto incoraggiando ad usare SVG, ma come ho mostrato nell’ultimo paragrafo, uno dei maggiori browser attualmente non supporta SVG e quel browser è Internet Explorer. Fortunatamente per noi, la mancanza di supporto per SVG di IE non è più un ostacolo come una volta. Librerie come SVGWeb, Ample SDK e Raphael abilitano il supporto per SVG nelle attuali e passate versioni di IE. Inoltre, la specifica HTML5 rende possibile l’inserimento di SVG in HTML, dove prima era solo supportato con XHTML. Questo aumento nel supporto del document type sommato alla notizia recente riguardo l’adesione di Microsoft al W3C SVG Working Group fanno ben sperare che alla fine IE supporterà direttamente SVG – forse addirittura da IE9. Nel contempo, l’accesso al web tramite dispositivi mobili è in aumento e nessuno dei più popolari device handheld dipende da IE. In aggiunta a ciò, la recente popolarità del design minimalista può essere usata per introdurre efficacemente SVG nei vostri siti web: se un sito ha un design attraente ma minimalista, SVG può essere aggiunto come notazione divertente e non importa se SVG viene mostrato oppure no. I siti che usano SVG menzionati precedentemente o forniscono una grafica di ripiego nel caso in cui SVG non sia implementato o hanno un aspetto gradevole senza SVG o chiedono al lettore di considerare la migrazione verso un browser che supporti SVG. (Non stupitevi dell’ultima opzione: questo approccio ha funzionato per IE 4.x durante la guerra dei browsers più di dieci anni fa.)

E per quel che riguarda l’accessibilità?#section5

SVG ha la capacità di fornire testi corti o lunghi in alternativa alle immagini. Dal momento che è basato su un linguaggio di markup, potete facilmente aggiungere sia il titolo sia la descrizione attraverso gli elementi title e desc, come mostrato di seguito. Sfortunatamente, il supporto degli
screen reader per tali elementi è scarso, e questo crea una sfida per i siti che usano SVG nel caso in cui l’accessibilità sia un requisito.

<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0"  
  xmlns="http://www.w3.org/2000/svg">
<title>Chimp on a tightrope</title>
<desc>Older chimp walking across a tightrope between 
 two trees at the St. Louis Zoo</desc>
<image xlink:href="chimp.jpg" x="0" y="0" height="402" width="600" />
</svg> 

Il title è tipicamente richiamato come titolo del documento in un SVG a sé stante. Sia title che desc possono anche usare del markup complesso proveniente da altri namespaces. Inoltre, per metadata più complessi, c’è l’elemento metadata, che contiene RDF/XML per cose come il copyright e le informazioni sull’autore. Poiché il supporto degli screen readers per SVG è scarso, potete usare o un processing server-side o XSLT per utilizzare le informazioni di accessibilità da un SVG embedded e generare il contenuto in HTML partendo dagli elementi title, desc e metadata.
Per le immagini di sfondo e per quelle decorative, dovreste minimizzare la quantità di markup in SVG; in queste situazioni gli elementi title e desc potrebbero non essere necessari. Per ulteriori informazioni sull’accessibilità e SVG, leggete l’originale “Note on SVG and Accessibility” del W3C, “Just how accessible is SVG?” di Henny Swan e “SVG Accessibility Guidelines for SVG 1.2”.

Pronti per tuffarsi#section6

Ora che abbiamo visto aspetti importanti come il supporto browser e l’accessibilità, così come i vantaggi dell’uso di SVG, è ora di tuffarci nel divertimento. Il secondo articolo descrive come incorporare SVG nelle vostre pagine così che il vostro design funzioni su tutti i browsers, dove si possono trovare dei files SVG gratis e come usare uno dei più noti (e gratis) tool di grafica vettoriale per modificare o creare i vostri design SVG.