{"id":2,"date":"2010-01-31T10:09:25","date_gmt":"2010-01-31T09:09:25","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/usare-svg-per-un-background-flessibile-scalabile-e-divertente-parte-i\/"},"modified":"2010-01-31T10:09:25","modified_gmt":"2010-01-31T09:09:25","slug":"usare-svg-per-un-background-flessibile-scalabile-e-divertente-parte-i","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/usare-svg-per-un-background-flessibile-scalabile-e-divertente-parte-i\/","title":{"rendered":"Usare SVG per un background flessibile, scalabile e divertente, Parte I"},"content":{"rendered":"

\"illustrazione<\/p>\n

SVG, ossia Scalable Vector Graphics<\/a>, consiste di cerchi, rettangoli e percorsi creati in XML e combinati in disegni sulle pagine web. Ad un oggetto SVG si possono applicare colori solidi, gradienti ed un certo numero di filtri sofisticati – sebbene non tutti i browser implementino tutti i tipi di filtri. Potete incorporarvi del testo cos\u00ec come delle immagini, e potete copiare e clonare il vostro SVG tutte le volte che volete. Principalmente, utilizziamo il formato SVG per programmi di grafica, diagrammi, illustrazioni o animazioni. Tuttavia possiamo incorporare oggetti SVG nel design complessivo di un sito: \u00e8 una potenzialit\u00e0 straordinariamente versatile del web design ed \u00e8 divertente da usare.<\/p>\n

In questo articolo introduttivo, far\u00f2 alcune importanti considerazioni su come lavorare con SVG, inclusi il supporto dei browser e l’accessibilit\u00e0. Leggete la Parte II<\/a> per scoprire come trovare ed adattare alle vostre esigenze oggetti SVG che si trovano online, o come creare il vostro disegno SVG ed aggiungerlo alle vostre pagine web.<\/p>\n

\n

SVG: un po’ di esempi d’uso<\/h2>\n

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<\/a> con delle icone che rappresentano l’argomento di ciascun post. Erik Dahlstrom di Opera fa lo stesso<\/a>, cos\u00ec come Jeff Schiller su Codedread<\/a>. Jeff va oltre le icone, incorporando SVG nella barra del menu con effetto fisheye, cos\u00ec come nella grafica che circonda il contenuto del suo sito. Il sito Emacs for Mac OS X<\/a> \u00e8 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<\/a> che viene visualizzata di volta in volta (ricaricate la pagina un paio di volte per vedere l’effetto), cos\u00ec come per un elemento di sfondo stravagante<\/a> e per dare un tema generale che caratterizzi ed unisca i miei siti web<\/a>.<\/p>\n<\/div>\n

\n

Quando si pu\u00f2 e quando non si pu\u00f2 usare SVG<\/h2>\n

SVG si pu\u00f2 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\u00f2 ridimensionare perch\u00e9 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\u00e0 del ridimensionamento (scaling) \u00e8 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\u00f2, osservate la Figura 1, che \u00e8 uno snapshot del sito EMACS for OS X la prima volta che lo si \u00e8 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.<\/p>\n

\n \"Fig<\/p>\n

Fig. 1. Snapshot del sito EMACS for OS X <\/p>\n<\/p><\/div>\n

\n \"Fig<\/p>\n

Fig. 2. Lo stesso sito con una dimensione diversa della finestra del browser<\/p>\n<\/p><\/div>\n

SVG pu\u00f2 anche essere “bandwith-friendly”: non importa quanto sia grande l’oggetto grafico, il file XML che lo descrive \u00e8 l’unica cosa trasmessa al client. Dai millimetri ai metri, la richiesta di banda per l’oggetto grafico \u00e8 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 \u00e8 meglio non usarlo. Ad esempio, si pu\u00f2 convertire una foto in un tracciato SVG, ma la conversione non sar\u00e0 mai a livello del singolo pixel. Inoltre, i device client si bloccheranno se l’oggetto grafico \u00e8 troppo complicato.
Ho convertito un’immagine JPEG piuttosto complessa in un file SVG<\/a> 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\u00f2 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, \u00e8 importante conoscere come i browser supportino SVG e le sue caratteristiche di accessibilit\u00e0.<\/p>\n<\/div>\n

\n

Supporto Browser<\/h2>\n

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<\/a> 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\u00ec come i gradienti ed alcuni filtri. Solo le funzioni pi\u00f9 esoteriche non sono supportate. Tuttavia, la mancanza di funzioni pi\u00f9 avanzate non dovrebbe influenzare l’utilizzo di SVG nel design di un sito, n\u00e9 tantomeno raccomando l’uso di immagini SVG oltremodo complesse come sfondo di una pagina: pi\u00f9 un’immagine \u00e8 complessa, pi\u00f9 tempo occorrer\u00e0 al browser per visualizzarla.
Inoltre, pensateci due volte prima di utilizzare sfondi animati, poich\u00e9 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 \u00e8 Internet Explorer.<\/p>\n<\/div>\n

\n

Internet Explorer e SVG<\/h2>\n

Vi sto incoraggiando ad usare SVG, ma come ho mostrato nell’ultimo paragrafo, uno dei maggiori browser attualmente non supporta SVG e quel browser \u00e8 Internet Explorer. Fortunatamente per noi, la mancanza di supporto per SVG di IE non \u00e8 pi\u00f9 un ostacolo come una volta. Librerie come SVGWeb,<\/a> Ample SDK<\/a> e Raphael<\/a> abilitano il supporto per SVG nelle attuali e passate versioni di IE. Inoltre, la specifica HTML5 rende possibile l’inserimento di SVG in HTML,<\/a> 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\u00e0 direttamente SVG – forse addirittura da IE9. Nel contempo, l’accesso al web tramite dispositivi mobili \u00e8 in aumento e nessuno dei pi\u00f9 popolari device handheld dipende da IE. In aggiunta a ci\u00f2, la recente popolarit\u00e0 del design minimalista pu\u00f2 essere usata per introdurre efficacemente SVG nei vostri siti web: se un sito ha un design attraente ma minimalista, SVG pu\u00f2 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\u00f9 di dieci anni fa.)<\/p>\n<\/div>\n

\n

E per quel che riguarda l’accessibilit\u00e0?<\/h2>\n

SVG ha la capacit\u00e0 di fornire testi corti o lunghi in alternativa alle immagini. Dal momento che \u00e8 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 \u00e8 scarso, e questo crea una sfida per i siti che usano SVG nel caso in cui l’accessibilit\u00e0 sia un requisito.<\/p>\n

\n\n<svg xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" version=\"1.0\"  \n  xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<title>Chimp on a tightrope<\/title>\n<desc>Older chimp walking across a tightrope between \n two trees at the St. Louis Zoo<\/desc>\n<image xlink:href=\"chimp.jpg\" x=\"0\" y=\"0\" height=\"402\" width=\"600\" \/>\n<\/svg> \n<\/code>\n<\/pre>\n
Il title \u00e8 tipicamente richiamato come titolo del documento in un SVG a s\u00e9 stante. Sia title che desc possono anche usare del markup complesso proveniente da altri namespaces. Inoltre, per metadata pi\u00f9 complessi, c’\u00e8 l’elemento metadata, che contiene RDF\/XML per cose come il copyright e le informazioni sull’autore. Poich\u00e9 il supporto degli screen readers per SVG \u00e8 scarso, potete usare o un processing server-side o XSLT per utilizzare le informazioni di accessibilit\u00e0 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\u00e0 di markup in SVG; in queste situazioni gli elementi title e desc potrebbero non essere necessari. Per ulteriori informazioni sull’accessibilit\u00e0 e SVG, leggete l’originale \u201cNote on SVG and Accessibility<\/a>\u201d del W3C, \u201cJust how accessible is SVG?<\/a>\u201d di Henny Swan e \u201cSVG Accessibility Guidelines for SVG 1.2<\/a>\u201d.<\/p>\n<\/div>\n
\n
Pronti per tuffarsi<\/h2>\n
Ora che abbiamo visto aspetti importanti come il supporto browser e l’accessibilit\u00e0, cos\u00ec come i vantaggi dell’uso di SVG, \u00e8 ora di tuffarci nel divertimento. Il secondo articolo<\/a> descrive come incorporare SVG nelle vostre pagine cos\u00ec che il vostro design funzioni su tutti i browsers, dove si possono trovare dei files SVG gratis e come usare uno dei pi\u00f9 noti (e gratis) tool di grafica vettoriale per modificare o creare i vostri design SVG.<\/p>\n<\/div>\n
\n