Usare SVG per creare sfondi flessibili, scalabili e divertenti

Questa è la traduzione dell'articolo Using SVG For Flexible, Scalable, and Fun Backgrounds di Shelley Powers, pubblicato originariamente su A List Apart il 26 Gennaio 2010. La traduzione viene qui presentata con il consenso dell'editore (A List Apart Magazine) e dell'autore.

Il formato SVG (Scalable Vector Graphics) consiste in cerchi, rettangoli e linee creati in XML e combinati sotto forma di disegni su una pagina web.

Potete applicare a SVG colori solidi, gradienti e un buon numero di filtri sofisticati, sebbene non tutti i browser supportino tutti i tipi di filtri. Potete incorporare testo, anche immagini, potete copiare e clonare la vostra grafica in SVG come e quando volete.

Nella maggior parte dei casi usiamo SVG per realizzare grafici, illustrazioni o animaizoni. Tuttavia, possiamo incorporare SVG nel design complessivo di un sito; è una straordinaria e versatile risorsa che è anche molto divertente da usare. In questo articolo affronteremo prima di tutto alcune questioni preliminari per lavorare con SVG, a partire dal supporto dei browser e dall'accessibilità. Successivamente impareremo a trovare online grafica SVG da usare nei nostri progetti e a creare i nostri disegni per aggiungerli alle nostre pagine.

Molte persone usano SVG per certi parti grafiche del loro sito. Per esempio, Sam Ruby, attualmente presidente del Working Group che si occupa di HTML5, usa SVG per annotare i post del suo blog con icone di categoria. Erik Dahlstrom, di Opera Software, fa la stessa cosa, così come Jeff Schiller su Codedread. Jeff va oltre le semplici icone e incorpora SVG nel menu fisheye della barra, così come in altre sezioni del suo sito. Il sito Emacs for Mac OS X è fatto quasi completamente in SVG; se lo visitate, provate a ridimensionare la finestra del browser per vedere in azione la capacità di scalare di questo formato.

Io ho usato SVG per fornire un colore gradiente selezionato da una foto (ricaricate un paio di volte la pagina per vedere l'effetto in azione), come elemento per lo sfondo e per creare una sorta di tema grafico che unificasse tutti i miei siti.

Quando usare e quando non usare SVG

Potete usare SVG in tutti i contesti in cui potreste usare immagini GIF, JPEG o PNG. Con SVG fornite istruzioni su come disegnare piuttosto che un'immagine bitmap.

SVG, essendo un formato di grafica vettoriale, può scalare al meglio per adattarsi ad una pagina web. Le immagini JPEG o GIF, invece, non hanno questa capacità, quanto meno, come sapete, quando vengono ridimensionate non offrono buoni risultati. La possibilità di scalare al meglio è particolarmente utile quando gli utenti accedono alla pagina con dispositivi dotati di schermo piccolo, come gli iPhone o usando un monitor di 32 pollici.

Per dimostrare tutto ciò, nella figura 1 è riportato uno screenshot del sito di Emacs for OS X appena aperto in un browser. La figura 2 mostra lo stesso sito, ma con la finestra rimpicciolita in senso verticale. Notate come l'immagine si adatta alla pagina, scalando in modo tale che la prospettiva si sempre e comunque preservata. Non importa quanto sia grande o larga la pagina, l'immagine scala e si adatta, senza i problemi tipici delle immagini bitmap.

SVG può essere molto utile anche per risparmiare banda. Non importa quanto sia grande l'immagine, il documento XML che la descrive è l'unica cosa che arriva al browser. Che si tratti di millimetri o metri, i requisiti in termini di banda sono gli stessi: ciò fa di SVG un'alternativa attraente quando un'immagine grafica deve riempire tutto lo sfondo di una pagina web senza la necessità che sia ripetuta.

Per quanto possa essere divertente usare SVG, ci sono circostanze in cui non è saggio usarlo. Per esempio, potete anche convertire una foto in un disegno SVG, ma la conversione non avverrà mai a livello di singolo pixel. Inoltre, alcuni dispositivi potrebbero avere comportamenti inaspettati se l'immagine è troppo complicata. Ho convertito un'immagine piuttosto complessa in un file SVG che ho poi usato per dei test. Non solo ha mandato in crash la beta di Google Chrome, ma il browser ha fatto bloccare il PC nel taentativo di processare il documento SVG.

Dunque, SVG non può sostituire foto o immagini complesse, ma per tutto il resto può andare bene.

Dopo questa introduzione passeremo a parlare del supporto nei browser e dell'accessibilità. Sarà l'argomento della seconda parte. Intanto, chi volesse iniziare a creare elementi grafici con SVG, può utilizzare Inkscape, un ottimo strumento open source per la grafica vettoriale.

Supporto nei vari browser

I principali browser (Firefox, Chrome, Safari e Opera) supportano SVG, sia come file caricato in un oggetto,sia incorporato direttamente nel codice XHTML. Jeff Schiller, che ho citato in precedenza, mantiene da tempo una lista in forma grafica che elenca i dettagli relativi al supporto di SVG nei vari browser.

Come mostra l'immagine, la maggior parte dei browser supporta le basi di SVG. Ciò include il supporto per i font, le immagini, gli elementi grafici (cerchi o linee), i gradienti e alcuni filtri. Solo per le caratteristiche più particolari manca il supporto. Tuttavia, la mancanza del supporto per tali funzionalità non dovrebbe portare a nessuno a evitare di usare SVG per il design del proprio sito. Al tempo stesso raccomando di non usare immagini estremamente complesse come sfondo per le pagine. Pensateci due volte, anche, prima di usare sfondi animati: molte persone trovano irritante l'eccessivo movimento sulle pagine, specie quando non sono in grado di controllarlo magari disabilitando Javascript.

Come ho detto, i principali browser supportano SVG. L'eccezione è rappresentata da Internet Explorer.

Internet Explorer e SVG

Sto incoraggiando tutti a usare SVG, ma c'è un browser importante che non supporta questo formato: Internet Explorer. Per fortuna, la mancanza di tale supporto non è più, oggi, una barriera insormontabile.

Librerie come SVGWeb, Ample SDK e Raphael sono in grado di aggiungere al browser di Microsoft (in tutte le sue versioni) il supporto per SVG. Inoltre, la specifica HTML5 rende possibile incorporare SVG nell'HTML, mentre prima ciò era possibile solo con XHTML. Il supporto a nuovi doctype, unito alla recente notizia che Microsoft è entrata a far parte del Working Group SVG del W3C, ci fanno sperare che IE offrirà un supporto nativo prima o poi, magari a partire da IE9.

Nel frattempo, l'accesso al web tramite dispositivi mobili aumenta, e nessuno dei più popolari dispositivi dipende da Internet Explorer. Inoltre, la popolarità recente del design minimalista può essere usata come un mezzo efficace per introdurre SVG nei propri siti. Se un sito web ha un design accattivante ma minimalista, SVG può essere aggiunto una divertente annotazione, e non importa se l'SVG viene mostrato o no. I siti che già ora usano SVG come quelli che ho menzionato all'inizio dell'articolo offrono un'immagine grafica alternativa se SVG non è visualizzato, oppure chiedono all'utente di passare ad un browser che supporta il formato.

Considerare l'accessibilità

SVG ha la capacità di offrire brevi e lunghi testi alternativi alle immagini. Dal momento che è un linguaggio di markup, potete facilmente aggiungere sia un titolo sia una descrizione attraverso gli elementi desc e title, come mostriamo qui sotto. Purtroppo gli screen reader supportano poco e male tali elementi, e ciò può diventare problematico quando l'accessibilità di un sito è un requisito fondamentale:

<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>

Title viene in genere estratto per diventare il titolo di un documento in un file SVG stand-alone. Sia title sia desc possono essere definiti con markup più complesso proveniente da altri namespace. Inoltre, per creare metadati più complessi, c'è l'elemento metadata, che può contenere RDF/XML per cose come il copyright o le informazioni sull'autore.

Dal momento che il supporto degli screen reader è povero, potete usare soluzioni lato server o XSLT per estrarre le informazioni relative all'accessibilità da un documento SVG e generare contenuto HTML a partire dagli elementi title, desc e metadata. Per le immagini di sfondo o decorative, comunque, title e desc non sono strettamente necessari.

Per approfondire il tema, potete leggere l'articolo Note on SVG and Accessibility sul sito del W3C, l'articolo di Henny Swan Just how accessible is SVG? e SVG Accessibility Guidelines for SVG 1.2.

Dopo aver coperto le basi (supporto dei browser e accessibilità) è arrivato il momento di passare alla parte divertente. Nella prossima parte vedremo come incorporare SVG in una pagina web in modo che il design funzioni su tutti browser, dove recuperare file SVG gratuiti, come usare i principali software (gratuiti e commerciali) per generare e modificare grafica SVG con le nostre mani.

Aggiungere SVG a una pagina web

Ci sono molti modi per aggiungere SVG a una pagina web, sebbene solo pochi siano davvero cross-browser.

Il primo metodo consiste nell'uso dell'elemento object tramite il quale si crea un riferimento ad un documento SVG esterno. Questo approccio è al momento il più popolare, specie quando si tratta di incorporare SVG in pagine servite come HTML.

Per aggiungere SVG usando l'elemento object, usiamo questo markup (l'ho copiato dal sito di Jeff Schiller di cui abbiamo già parlato in precedenza):

<object type="image/svg+xml"
width="100" height="100" style="float:right"
data="http://blog.codedread.com/clipart/apple.svgz">
<span/></object>

Si imposta l'attributo type in base al MIME type tipico di SVG: image/svg+xml. Definiamo una larghezza (width) e un'altezza (height), tenendo presente che si può fare pure attraverso un foglio di stile. Per finire si definisce l'URL che punta al documento SVG. In questo esempio Jeff usa la versione compressa via gzip del file SVG per risparmiare banda (da qui l'estensione .svgz). Per vedere l'immagine prodotta aprite il file in Firefox, safari, Opera e Chrome. L'esempio 1 mostra un file SVG aggiunto ad una pagina tramite l'elemento object.

Al momento, l'uso dell'elemento object è l'unico approccio nativo che funziona con HTML. Quando il supporto per HTML5 aumenterà, più browser supporteranno l'incorporamento di SVG direttamente nel codice HTML. Un altro vantaggio di questo approccio consiste nel fatto che potete usare file SVG esistenti e non dovete mettere mano al codice XML.

Tuttavia, c'è uno svantaggio. Estendere una grafica SVG su tutta la pagina usando l'elemento object può essere problematico, a seconda del browser. Per esempio, Safari/WebKit attualmente non è in grado di rendere uno sfondo trasparente per l'elemento object.

Questo svantaggio insito nell'uso di object ci porta a parlare del secondo modo con cui possiamo inserire SVG in una pagina web: attraverso i CSS. Con i CSS possiamo usare un file SVG al posto delle immagini PNG o JPEG come sfondo di un elemento:

body {
background-image: url(redcircle.svg);
}

L'esempio 2 mostra in pratica come aggiungere uno sfondo SVG ad una pagina tramite i CSS. È una buona opzione, tranne che per il fatto che al momento Firefox non supporta l'SVG all'interno dei CSS. Fin quando ciò non avverrà, dunque, non è un'opzione da prendere in considerazione. Possiamo anche usare SVG con l'elemento img, ma il supporto è ancora meno diffuso.

L'ultimo approccio possibile per aggiungere SVG ad una pagina web è quello che uso di più. Basta infatti incorporare direttamente il codice SVG nella pagina usando l'elemento SVG. Possiamo farlo in due modi:

1. servendo la pagina con il MIME type application/xhtml+xml: funziona in Chrome, Safari, Opera, Firefox e molti altri browser, non su Internet Explorer (esempio 3)
2. incorporando l'elemento SVG nel codice HTML, servendo la pagina come HTML, cosa che è consentita in HTML5, come mostra l'esempio 4.

Tenete però conto che l'SVG incorporato direttamente in HTML funziona al momento solo su Firefox 3.6. Inoltre, il validatore HTML5 genera un errore quando si incorpora SVG nell'HTML, non perché sia un errore di SVG, ma perché ora solo un browser supporta questa funzionalità.

Incorporare SVG direttamente nel codice XHTML è molto facile: basta copiare e incollare un elemento SVG da un file. In genere un file SVG inizia così:

<?xml version="1.0" encoding="UTF-8" ?>
<svg viewBox="0 0 400 253"
version="1.1" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none">

Oppure così:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.0"
viewBox = "0 0 725 828"
preserveAspectRatio="none"
id="svg2">

La parte da copiare è quella compresa tra i tag SVG di apertura e chiusura, inclusi gli stessi tag SVG.

Potete incollare il codice SVG in qualunque punto della pagina, ma il mio consiglio è quello di incollarlo in un div da collocare verso il fondo della pagina stessa, come potete vedere nell'esempio 3. Potete posizionarlo come sfondo usando i CSS, assicurandovi che sia collocato dietro a tutti gli altri elementi della pagina tramite la proprietà z-index.

Userete la stessa procedura per incorporare SVG in pagine HTML. Ma, come abbiamo detto, l'unico browser che al momento supporta SVG in HTML è Firefox 3.6. Se incorporate SVG in HTML, vi consiglio di usare una libreria come SVGWeb. Non solo potete incorporare SVG nel codice HTML con SVGWeb, ma il risultato sarà fruibile anche su Internet Explorer, basta che sia disponibile per l'utente il Flash Player.

Usare SVGWeb

Usare SVGWeb è molto semplice. Scaricate il file .zip che include una demo e i sorgenti, aggiungete la libreria Javascript alla pagina, assicuratevi che sia collocato prima di ogni altra libreria Javascript:

<script src="src/svg.js" data-path="src/"></script>

SVGWeb consiste di diverse librerie, così dovrete far sì che tutte siano nello stesso percorso della libreria principale svg.js. Oppure dovrete fornire l'attributo di HTML5 data-path. Inoltre, assicuratevi di caricare sul server tutto il contenuto della directory src che troverete nel pacchetto .zip.

Una volta caricate sul server le librerie di SVGWeb e aggiunto il tag script nella sezione head, potete incorporare SVG, come se steste usando del normale XHTML. È importante inserire il tag svg all'interno di un elemento script:

<script type="image/svg+xml">
<svg ...>...</svg>
</script>

Se la pagina è servita come XHTML, includete le istruzioni CDATA:

<script type="image/svg+xml"><![CDATA[
<svg ...>...</svg>
]]></script>

Usando SVGWeb non solo siamo sicuri che la grafica SVG sarà visualizzata nell'HTML, ma anche che ciò avverrà su Internet Explorer. Aggiungete la libreria e il tag script, SVGWeb si occuperà del resto. Carica il codice SVG/XML, lo rende accessibile agli script, fa sì che SVG venga visualizzato in modo cross-browser. C'è un ulteriore beneficio. La libreria SVGWeb, come la maggior parte delle librerie SVG cross-browser, richiede che Javascript sia attivato sul browser dell'utente. Inoltre, l'uso di una libreria come SVGWeb richiede più banda, che va ad aggiungersi a quella richiesta dall'utilizzo del componente Flash della libreria.

Sto mostrando l'uso di SVGWeb con codice SVG incorporato direttamente nella pagina, ma la libreria funziona pure con l'elemento object.

A prescindere dal fatto che vogliate usare l'elemento object o incorporare SVG nella pagina, se volete che l'immagine scali rispetto al contenuto della pagina, dovrete fare in modo di posizionare assolutamente il contenuto SVG. Se volete che la grafica SVG scali rispetto alle dimensioni dell'intera pagina, anche se il contenuto della pagina si estende oltre il viewport del browser, aggiungete SVG ad un elemento esterno che contenga anche tutto il resto della pagina. Assicuratevi che i contenuti della pagina e l'altro contenitore siano posizionati in modo relativo per far sì che la grafica SVG sia dimensionata correttamente. Gli esempi visti dimostrano entrambe le tecniche. L'esempio 3 scala fino ad adattarsi all'intera pagina. L'esempio 4 scala solo rispetto alla finestra del browser.

La questione della scalabilità

In precedenza abbiamo dimostrato come aprire il file SVG assegnato all'elemento object direttamente nel browser. Notate che la grafica è molto più estesa rispetto a come appare sotto forma di icona sul sito di Jeff Schiller. Ciò avviene per due fattori, l'attributo SVG viewBox e la dimensione del contenitore in cui la grafica viene aperta.

L'elemento svg nel file di Jeff Schiller ha un attributo viewBox equivalente alla dimensione della grafica:

viewBox="0 0 740 850"

L'attributo viewBox assicura che la grafica delimitata dal box specificato nelle impostazioni di viewBox si estenda fino a riempire il contenitore. All'attributo si assegna un valore, le dimensioni del box, partendo da una coppia x y, e poi con la larghezza e l'altezza. Dunque, x è il primo valore, y il secondo, il terzo rappresenta la larghezza, il quarto l'altezza. Quando Jeff apre l'SVG in un elemento object con larghezza e altezza specifiche, la grafica appare con quelle dimensioni. Quando si apre nella finestra di un browser, la grafica appare molto più ampia.

Un altro attributo SVG definisce come la grafica scala: preserveAspectRatio. L'SVG di Schiller non imposta questo attributo, così preserveAspectRatio è impostato sul default: scala cioè proporzionalmente. Potete vedere tutto ciò in azione sul sito web di Emacs in Mac OS X. Su questo sito, se ridimensionate la finestra del browser in senso verticale, l'imamagine scala anche orizzontalmente. Così sembra sempre proporzionale. La stessa cosa accade se ridimensionate la finestra orizzontalmente.

Tuttavia, se aprite il sito di Frugal Algorithm e ridimensionate la finestra del browser, vedrete che la grafica può apparire distorta se la finestra viene ridimensionata orizzontalmente (figura 3) o verticalmente (figura 4) o in entrambi i sensi. Io imposto il valore di preserveAspectRatio su none perché voglio che la mia grafica riempia lo spazio che ad essa è assegnato, a prescindere da quanto sia la dimensione di questo spazio.

Quest'ultimo approccio può essere quello efficace per fornire un'immagine di sfondo per una pagina web, ma può essere complicato da usare. Un'altra cosa che faccio, poi, è quella di posizionare l'elemento come fisso, in modo che sia sempre visualizzato.

Un'immagine di sfondo che vada a coprire, adattandovisi, l'intera pagina può essere ancora più interessante. Ho imparato che una semplice grafica con un forte senso diagonale, dimensionato per riempire il 100% della pagina in larghezza e altezza, può essere un ottimo sfondo che sembra adattarsi alle dimensioni della pagina, come mostrato nella figura 5 e nell'esempio 5.

Per tornare all'uso che fa Jeff Schiller di SVG, egli usa un elemento SVG di sfondo per fornire un bordo blu che circonda il contenuto del suo sito. Date un'occhiata al codice SVG nella pagina e vedrete che sta usando più elementi SVG per ottenere l'effetto. La linea verticale è definita con una larghezza di 100px che può estendersi fino al 100%; quella orizzontale ha un'altezza di 100px che può anch'essa estendersi al 100%. Gli angoli arrotondati sono gradienti definiti altrove:

<svg id="leftedge" version="1.1" width="100%"
height="100%"
xmlns="http://www.w3.org/2000/svg">
<rect width="100px" height="100%"
fill="url(#leftgrad)" />
</svg>
<svg id="rightedge" version="1.1" width="100%"
height="100%"
xmlns="http://www.w3.org/2000/svg">
<rect width="100px" height="100%"
fill="url(#rightgrad)" /> </svg>
<svg id="header" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100px" fill="url(#topgrad)" />
<rect width="100px" height="100px"
fill="url(#gradcornerTL)" />
<rect x="100%" width="100px" height="100px"
fill="url(#gradcornerTR)"
transform="translate(-100,0)" /> </svg>

Notate che il gradiente è definito altrove. Questa è un'altra cosa interessante di SVG: possiamo definire gradienti e pattern in un posto e usarli in altri posti. Ho usato questo approccio con il mio vecchio gradiente per il photo picker, per riempire certe zone intorno ai commenti con un gradiente basato sui colori delle foto.

A questo punto, non rimane che trattare la creazione e il reperimento di file SVG. Sarà l'argomento dell'ultima parte dell'articolo.

Creare immagini SVG

Potete trovare sul web molte immagini SVG pronte per l'uso e tra poco segnalerò delle buone risorse. Tuttavia, potete facilmente creare da voi immagini SVG, sia usando uno strumento che magari già possedete (come Adobe Illustrator), sia usando programmi popolari, gratuiti e open source dedicati alla grafica vettoriale come Inkscape. La figura 6 mostra proprio Inkscape aperto e con un'immagine bitmap pronta per essere convertita in SVG.

Un altro editor SVG è SVG-edit, anch'esso gratuito e basato su Javascript. Dal momento che è basato su Javascript, potete incorporarlo in qualunque pagina web. Se non volete installare un tool particolare o incorporarlo in una pagina web, potete anche usare l'editor di grafica vettoriale Raven, disponibile sul sito di Aviary.

Se avete già a disposizione una semplice JPEG o un'altra immagine bitmap, potete convertirla in SVG. A seconda di quale porzione dell'immagine volete catturare, potreste alla fine trovarmi in mano con qualcosa che è anche superiore all'originale, o almeno con una versione della grafica molto interessante e utile ai vostri scopi.

Uno strumento che potete usare per la conversione è Vector Magic, disponibile sia come tool online sia come programma stand-alone da eseguire sul desktop del vostro PC. Vector Magic fornisce varie opzioni per controllare l'output finale e fa quasi sempre un lavoro eccellente, specie con immagini più complesse. Potete provare Vector Magic senza dovervi iscrivere al sito per verificare da voi gli effetti della conversione. Il sito WP Clipart offre numerose immagini che si prestano bene alla vettorializzazione, potete iniziare da lì per sperimentare.

Come si accennava, è possibile anche usare Inkscape per convertire facilmente immagini bitmap in SVG. Basta compiere questi passi:

1. Aprite l'immagine da convertire in Inkscape.
2. Selezionate l'immagine cliccando prima sul menu Edit (Modifica) e scegliendo Select All (Seleziona tutto).
3. Selezionate dal menu Path (Tracciato) la voce Trace Bitmap (Vettorializza bitmap). Si aprirà la finestra con le opzioni di tracciamento che vedete nella figura 7.
4. Userete soprattutto l'opzione Multiple Scans (Scansioni multiple) e quella relativa al colore. Potete lasciare su 8 il valore relativo al numero di scansioni per iniziare. Lasciate come sono le altre opzioni. Se volete rimuovere il colore di sfondo potete farlo attraverso l'opzione Remove background (Rimuovi sfondo).
5. Per convertire l'immagine bitmap in vettoriale cliccate sul pulsante Update (Aggiorna) sotto l'area dell'anteprima (figura 8).
6. Se vi piace il risultato, cliccate su OK. Altrimenti, lavorate sulle varie opzioni fin quando non otterrete il risultato che volete.
7. Chiudete il box di dialogo e tornate all'editor principale.
8. Vorrete a questo punto eliminare la bitmap originale. Selezionate il livello che contiene la bitmap, selezionate dal menu Edit (Modifica) la voce Delete (Elimina). Quello che rimane è la vostra immagine vettoriale (figura 9).
9. A questo punto, potete selezionare i tracciati o altre porzioni per modificarli, rimuoverli o aggiungere nuove parti.
10. Quando sarete soddisfatti dell'aspetto della vostra grafica, esportatela in SVG. Selezionate il menu File, e quindi l'opzione Save as (Salva con nome). Nella finestra di dialogo che si apre assicuratevi di selezionare l'opzione Plain SVG.

Per verificare voi stessi quanto bene Inkscape converta le immagini bitmap, ho creato una serie di immagini SVG a partire da clipart liberamente disponibili in rete: un logo di pubblico dominio (versione JPEG, versione SVG), una tazza di caffè (versione PNG, versione SVG), fiori (versione PNG, versione SVG), matite colorate (versione PNG, versione SVG), un simbolo di Halloween (versione PNG, versione SVG).

Le ultime due immagini hanno richiesto l'aggiunta di altri tracciati per ottenere un risultato soddisfacente. In genere, più complessa è l'immagine di partenza, più tracciati si devono catturare per rendere al maglio le variazioni di colore dell'immagine.

Una volta che avrete a disposizione la vostra immagine SVG, il disegno potrà essere statico o interattivo/animato grazie all'uso di Javascript, con cui si può animare qualunque aspetto di una grafica SVG. Potete anche usare le tecniche di animazione dichiarative previste dal linguaggio SVG, ma le animazioni in genere andranno bene per cose come i grafici piuttosto per per il design di una pagina.

Usare grafica vettoriale trovata sul web nel vostro design

Il web è pieno di grafica vettoriale in altri formati come EPS o .AI (Adobe Illustrator). Come per SVG, molte di queste immagini si possono usare liberamente, almeno per usi non commerciali. Se il formato non è già SVG, basta una rapida ricerca su Google per trovare risorse e tecniche utili a convertire da questi formati a SVG. Inkscape mantiene da tempo una lista di strumenti di conversione. Inoltre, Adobe Illustrator può anche esportare grafica vettoriale in formato SVG.

La Open Source Clipart Library è un ottimo sito su cui scoprire immagini in formato SVG e tanti tipi di immagini liberamente utilizzabili. Una volta che avrete un file grafico, potete modificarlo per adattarlo alle vostre esigenze, potrete combinare molte immagini in una sola, etc. Se siete alle prime armi, usate pure Inkscape per modificare il file SVG. Altrimenti potreste mettere mano direttamente al codice con un editor XML.

Ottimizzare e migliorare SVG

Per essere sicuri che un file SVG sia ottimizzato per un uso sul web, eseguite l'utility Scour per eliminare problemi e spazi bianchi estranei dopo che avete lo copiato, convertito e/o modificato. Scour è un semplice script in Python creato da Jeff Schiller. Può essere eseguito dalla linea di comando oppure come un 'estensione per Inkscape.

La cosa importante da ricordare quando create un file SVg o ne cercate uno sul web è che non dovete preoccuparvi delle dimensioni: un'immagine SVG appare sempre di buona qualità, sia che sia grande sia che sia piccola. Inoltre, non dovete preoccuparvi se l'immagine sia esattamente come la volete, dal momento che SVG è estremamente malleabile. È proprio questa sua malleabilità, associata alla sua capacità di scalare al meglio, che lo rende uno strumento nuovo e divertente per il web design.

Per dimostrarvi cosa potete fare con un file SVG esistente, facciamo ancora una volta una visita sul sito Emacs for OS X. Questa volta, invece di concentrarci sull'immagine in primo piano, partirò dall'SVG che crea lo sfondo gradiente. Ho separato questo SVG in un file:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
preserveAspectRatio="none" viewBox="0 0 100 100"
style="width:100%; height:100%; position:fixed; top:0;
left:0; z-index:1">
<linearGradient id="background_gradient_black"
x1="0%" y1="10" x2="0%" y2="90"
gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#000"
stop-opacity="1" />
<stop offset="45%" stop-color="#444"
stop-opacity="1" />
<stop offset="55%" stop-color="#444"
stop-opacity="1" />
<stop offset="100%" stop-color="#000"
stop-opacity="1" />
</linearGradient>
<rect x="0" y="0" width="100" height="100"
fill="url(#background_gradient_black)" />
</svg>

Questo SVG usa un gradiente. I gradienti sono implementati sotto forma di punti di stop: ogni stop specifica il punto in cui il gradiente risulta completamente finito. Il motore di rendering del browser fa sì che un colore da uno stop si mescoli gradualmente nel colore definito dallo stop successivo.

Mi piace il gradiente, ma vorrei un po' più di colore. Per esempio, mi piacerebbe che il gradiente avesse un po' di giallo e un po' di rosso. Vado così ad aggiustare le cose nel file SVG:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
preserveAspectRatio="none" viewBox="0 0 100 100"
style="width:100%; height:100%; position:fixed; top:0;
left:0; z-index:1">
<linearGradient id="background_gradient_black"
x1="0%" y1="10" x2="0%" y2="90"
gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#000" stop-opacity="1" />
<stop offset="35%" stop-color="#200" stop-opacity="1" />
<stop offset="65%" stop-color="#600" stop-opacity="1" />
<stop offset="100%" stop-color="#ff0" stop-opacity="1" />
</linearGradient>
<rect x="0" y="0" width="100" height="100"
fill="url(#background_gradient_black)" />
</svg>

Per finire, ho preso la silhouette SVG che uso su Frugal Algorithm e ho combinato il tutto, come mostrato nella figura 9. Dal momento che SVG è un formato vettoriale, combinare diverse immagini e modificare il risultato è estremamente semplice, molto più di quanto non sia con immagini bitmap.

Questa possibilità di combinare molteplici immagini vettoriali e di modificare il risultato è solo uno degli aspetti divertenti di SVG. Come abbiamo visto, SVG può anche essere implementato in modo cross-browser ed è relativamente semplice da creare.

È comunque la scalabilità di SVG il fattore che apre una nuove dimensione per i web designer. Non siamo più limitati a larghezze fisse in un ambiente che è per sua natura flessibile.