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

Aggiungere SVG alle Pagine Web#section1

Ci sono molti modi per aggiungere SVG ad una pagina web, sebbene solo alcuni offrano compatibilità cross-browser.
Il primo metodo consiste nell’usare l’elemento object e fare riferimento ad un file SVG esterno. Questo approccio è attualmente il metodo più usato per aggiungere SVG ad una pagina distribuita come HTML.
Per aggiungere SVG usando l’elemento object, scrivete del markup come il seguente, che ho copiato dal sito di Jeff Schiller (citato nella Parte I):

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

Settate il type allo SVG MIME type: “image/svg+xml”. Fornite la larghezza (width) e l’altezza (height) (potete usare uno stylesheet), e settate l’attributo src al percorso del file SVG. In questo esempio, Jeff usa la versione gzipped di SVG, per risparmiare molta più banda (ulteriori dettagli sulla creazione di file SVG verranno dati più avanti). Per vedere l’esempio grafico, aprite il file SVG in Firefox, Opera, Safari o Chrome.

L’Esempio 1 mostra un oggetto SVG aggiunto ad una pagina web tramite l’elemento object.

Attualmente, l’utilizzo dell’elemento object è l’unico approccio nativo che funziona in HTML. Mano a mano che il supporto per HTML5 aumenta, sempre più browsers supporteranno SVG incorporato direttamente in HTML.

Un altro vantaggio di questo approccio è che potete usare files SVG esistenti e non dovete toccare lo XML.

Tuttavia, uno svantaggio nell’uso dell’elemento object è che allungare ed allargare l’elemento object fino a coprire un’intera pagina può essere problematico, a seconda del browser. Ad esempio, Safari/Webkit attualmente non crea un background trasparente per l’elemento object.

Gli svantaggi dell’usare object ci portano ad un secondo modo per includere SVG nel design di una pagina: i CSS. Con i CSS potete usare un file SVG al posto di un JPEG o di un PNG nei settings della background-image:

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

L’Esempio 2 mostra l’approccio con i CSS per aggiungere SVG come elemento di background. Questa sarebbe una buona opzione, senonché Firefox attualmente non supporta SVG nei CSS. Fintanto che sarà così, questa non sarà una valida opzione.

Potete anche usare SVG in un elemento image, ma questo ha ancora meno supporto che SVG nei CSS.

L’ultimo approccio per aggiungere SVG ad una pagina web è quello che io uso maggiormente. Semplicemente, incorporate SVG direttamente nella pagina, usando l’elemento SVG. Potete farlo in due modi: potete inviare le vostre pagine web come application/xhtml+xml, funzionante in Chrome, Firefox, Safari, Opera e vari altri browser (ma non IE), come mostrato nell’Esempio 3; oppure potete incorporare l’elemento SVG nell’HTML, inviando la pagina come HTML, cosa permessa in HTML5, come mostrato nell’Esempio 4. Notate tuttavia che SVG incorporato in HTML funziona solo con Firefox 3.6 al momento in cui scrivo questo articolo. Inoltre, notate che il validatore HTML5 genera un errore quando incorporate SVG in HTML5 – non perché lo SVG sia un errore, ma perché soltanto un browser al momento supporta questa nuova funzionalità.

Inserire l’SVG nel XHTML è tanto semplice quanto copiare ed incollare un elemento SVG da un file. Tipicamente un file potrebbe avere un inizio, come il seguente:

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

<?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 che dovrete copiare è il contenuto del file tra i tag SVG di apertura e chiusura, inclusi i tag stessi. Assicuratevi di non dimenticare il tag SVG di chiusura.

Potete copiare l’oggetto SVG ovunque nella pagina, ma raccomando di copiarlo in un elemento div verso la fine della pagina, come mostrato nell’Esempio 3. Potete anche posizionarlo come immagine di sfondo usando i CSS ed assicurandovi che sia dietro a tutti gli altri elementi della pagina usando la proprietà z-index.

Utilizzate la stessa procedura per inserire SVG in un documento HTML. Tuttavia, come citato prima, l’unico browser che supporta SVG in HTML è al momento Firefox 3.6. Se avete intenzione di inserire SVG in HTML, raccomando di usare una libreria come SVGWeb. Non solo potete inserire SVG in HTML con SVGWeb, ma il risultato dovrebbe venir visualizzato anche in IE, a condizione che il plug-in per Flash sia installato.

Usare SVGWeb#section2

Usare SVGWeb è molto semplice – basta scaricare il file zippato, che include le demo e il sorgente, ed aggiungere la libreria JavaScript alla pagina. Assicuratevi solamente che sia posizionata prima di qualunque altra libreria JavaScript:

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

SVGWeb consiste di diverse librerie, quindi dovrete o assicurarvi che le altre librerie siano nello stesso percorso della libreria svg.js primaria oppure dovrete fornire l’attributo data customizzabile di HTML5, data-path. Inoltre, assicuratevi di caricare tutti i contenuti della directory SVGWeb src in cui SVGWeb sarà usata sul vostro sito web.

Una volta caricate le librerie SVGWeb e aggiunti i tag script, incorporate SVG come fareste usando XHTML. E’ importante racchiudere il tag SVG con un elemento script:

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

Se la pagina è inviata come XHTML, inserite un’impostazione CDATA:

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

L’uso di SVGWeb non solo assicura che SVG venga visualizzata in HTML, ma anche che venga visualizzata in IE. Voi aggiungete la libreria e il tag script che lo contiene e SVGWeb si prende cura del resto. Carica l’oggetto SVG/XML, lo rende accessibile per lo scripting ed assicura che SVG venga visualizzato indipendentemente dal browser.

Tuttavia, c’è un piccolo appunto da fare. La libreria SVGWeb, come la maggior parte delle librerie SVG cross-browser, richiede che JavaScript sia attivato. Inoltre, la libreria SVGWeb aumenta l’uso di banda e quando IE è usato per accedere alla pagina, viene usata ulteriore banda per il componente Flash della libreria.

Sto mostrando l’uso di SVGWeb con SVG inline, ma SVGWeb funziona anche con l’elemento object.

A prescindere dal fatto che usiate un elemento object o incorporiate direttamente SVG, se volete che l’immagine si ridimensioni in accordo al contenuto della pagina, dovete usare un posizionamento assoluto per l’oggetto SVG o per object. Se volete che SVG si ridimensioni alla dimensione dell’intera pagina, anche se il contenuto della pagina si estende oltre alla parte visualizzata con la finestra del browser, aggiungete l’oggetto SVG ad un contenitore più esterno che comprenda anche il contenuto della pagina. Assicuratevi che il contenuto della pagina e l’altro container siano posizionati relativamente per assicurarvi che l’oggetto SVG cambi proporzioni correttamente. Gli esempi appena citati mostrano entrambe le tecniche: l’Esempio 3 si ridimensiona per riempire l’intera pagina. L’Esempio 4 si ridimensiona solo per la finestra del browser.

Quella cosa chiamata scalabilità#section3

Poco fa, abbiamo mostrato come aprire un SVG elencato nell’esempio con l’elemento object direttamente nel vostro browser. Notate che l’oggetto grafico è molto più largo di come appare in veste di icona nella pagina di Jeff. Ciò è dovuto a due motivi: l’attributo viewBox di SVG e la dimensione del contenitore nel quale è aperto l’oggetto grafico.

L’elemento SVG di Jeff ha un attributo viewBox pari alla dimensione del documento dell’oggetto grafico:

viewBox="0 0 740 850"

L’attributo viewBox assicura che l’oggetto grafico obbligato alle dimensioni del box fissate nei setting della viewBox si allarghi fino ad occupare il contenitore. Viene assegnato un valore all’attributo, le dimensioni del box in cui è contenuto, a partire da una coppia x y, e poi la larghezza e l’altezza – x è il primo valore, y il secondo, la larghezza è il terzo e l’altezza è il quarto. Quando Jeff ha aperto l’oggetto SVG in un elemento object con una data altezza e larghezza, la grafica sembrava avere proprio quelle dimensioni. Quando è aperta in una finestra di un browser, la grafica sembra essere molto più larga.

Un altro attributo SVG definisce come la grafica si ridimensiona: preserveAspectRatio. L’oggetto SVG di Jeff non fissa specificamente questo attributo, così il preserveAspectRatio di SVG è settato di default e deve ridimensionarsi proporzionalmente.

Potete vedere questa proprietà in azione sul sito Emacs in Mac OS X. In questo sito, se ridimensionate verticalmente la finestra del browser, l’immagine si ridimensiona sia orizzontalmente sia verticalmente, per assicurare che la grafica rimanga proporzionata. Lo stesso accade se la finestra del browser viene ridimensionata orizzontalmente, oppure in entrambe le direzioni.

Tuttavia se aprite Frugal Algorithm e ridimensionate la finestra del browser, vedrete che la grafica può distorcersi, si stringe orizzontalmente se la finestra è ridimensionata orizzontalmente (Figura 3), o verticalmente (Figura 4), o entrambe. Infatti, ho settato il valore di preserveAspectRatio a “none”, perché voglio che la mia immagine riempia lo spazio che le è assegnato, indipendentemente dalla dimensione dello spazio. Non sto tentando di preservare l’aspect ratio (rapporto d’aspetto).

Fig 3. Il sito Frugal Algorithm visualizzato in una finestra stretta

Fig 4. Il sito Frugal Algorithm visualizzato in una finestra larga

L’ultimo approccio può essere un modo efficace per un’immagine di sfondo di una pagina web, ma può essere impegnativo da usare. Ad esempio, ho imparato che una grafica con una larghezza 5 volte la sua altezza è una immagine per il bordo inferiore che appare bella indipendentemente dalla dimensione del browser. Ho anche settato l’elemento SVG perché il suo posizionamento sia fissato, così da essere sempre visualizzato.

Un’immagine di background che si adatti all’intera pagina web può essere più impegnativa. Ho imparato che una singola immagine con un forte senso di diagonalità, ridimensionata in modo tale da riempire al 100% l’altezza e la larghezza della pagina può essere una grafica di background divertente ed efficace che sembra sia creata su misura per ogni dimensione di pagina, come mostrato in Figura 5 e dimostrato anche dall’Esempio 5.

Fig 5. SVG Feed site with paintbrush background image

Per tornare all’uso che fa Jeff di SVG, egli utilizza un oggetto SVG come elemento di sfondo per creare un bordo blu che circonda il contenuto del suo sito. Tuttavia, se guardate l’oggetto SVG nella pagina, noterete che usa più elementi SVG per creare tale effetto. La linea verticale è fissata nel codice a 100 pixel di larghezza che può allargarsi al 100%; quella orizzontale ha un’altezza di 100 pixel e può allungarsi al 100%. Gli angoli arrotondati sono a tutti gli effetti un gradiente, definito 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 usato per riempire i rettangoli è definito altrove. Questo è un altro interessante aspetto di SVG all’interno di una pagina web: potete definire dei patterns e dei gradienti in un posto ed usarli in molti posti diversi. Io ho usato questo approccio con il mio vecchio photo picker gradient (gradiente creato a partire da un colore prelevato in una foto), per riempire il contorno dei commenti (capstones) con un gradiente basato sui colori della foto.

La specifica di SVG 1.1 copre altre opzioni che potete usare per gestire il rapporto d’aspetto (aspect ratio) della vostra immagine SVG.

Creare SVG#section4

Potete trovare degli SVG pronti all’uso sul web e in seguito in questa sezione elencherò delle buone risorse per SVG. Comunque, potete facilmente creare il vostro SVG, o usando uno strumento che già avete, come Adobe Illustrator oppure usando un tool come Inkscape, che è uno strumento per grafica vettoriale disponibile gratuitamente, famoso e open source. La Figura 6 mostra Inkscape aperto, con una bitmap pronta per essere convertita in SVG.
Un altro editor per SVG è SVG-edit anch’esso gratuito, basato su JavaScript. E poiché è basato su JavaScript, potete incorporare il tool in qualunque pagina web, fornendo così la possibilità di creare SVG ad altri. Se non volete installare un tool o inserirlo in una pagina web, potete anche usare l’editor vettoriale Raven, sul sito web Aviary.

Se avete già un semplice JPEG on un’altra grafica bitmap, potete convertire la bitmap in SVG. A seconda di quanta grafica volete catturare, potreste addirittura finire con qualcosa che a tutti gli effetti è superiore all’originale, o perlomeno un’interessante versione dell’originale.

Un tool che potete utilizzare per convertire bitmaps in SVG è Vector Magic, che esiste sia nella variante online sia in quella desktop. Vector Magic fornisce varie opzioni per controllare l’output e fa un lavoro eccellente particolarmente con le immagini più complesse. Potete provare Vector Magic senza abbonarvi per vedere l’effetto della trasformazione. WP Clipart ha molte immagini disponibili gratuitamente che rendono bene in maniera vettoriale.

Potete anche usare Inkscape per convertire facilmente bitmap in SVG, come mostrano i passi seguenti:

1. Aprite l’immagine in Inkscape.
2. Una volta aperta, selezionate l’immagine cliccando sul menu Edit e poi Select All.
3. Selezionate il menu Path, poi selezionate Trace Bitmap. Questa azione fa aprire la finestra di dialogo Trace Bitmap, come mostrato in Figura 7.
4. Molto probabilmente vorrete usare Multiple Scans e l’opzione Colors. Inizialmente, potete lasciare il numero di scansioni a otto. Accettate le opzioni Smooth e Stack Scan. Se volete rimuovere il colore di sfondo, selezionate l’opzione Remove background.
5. Cliccate sul pulsante Update per convertire la bitmap in vettore, azione che viene riflessa nella finestra di anteprima (preview window), mostrata in Figura 8.
6. Se il risultato vi soddisfa, cliccate sul pulsante OK. Altrimenti, modificate i settings fino a che non ottenete il risultato desiderato.
7. Chiudete la finestra di dialogo e tornate all’editor.
8. Potreste voler cancellare la bitmap originale. Selezionate il layer che contiene la bitmap, scegliete Edit e poi Delete. Ciò che rimane è il vostro vettore convertito, come mostrato in Figura 9.
9. A questo punto, potete selezionare i percorsi o i pezzi dello SVG da alterare e rimuovere o aggiungere nuovi pezzi.
10. Una volta che sarete soddisfatti della vostra grafica, esportatela come SVG. Selezionate il menu File, e poi Save As. Nella finestra di dialogo che si apre, assicuratevi di selezionare l’opzione Plain SVG in basso a destra. Suggerimento: salvando in formato Inkscape verrà aggiunto del markup all’immagine che tipicamente non è necessario se dovete usare l’immagine direttamente nel web.

Per farvi verificare direttamente la qualità di conversione da bitmap di Inkscape, ho creato le seguenti immagini SVG usando le clip art di dominio pubblico che ho trovato sul web: il logo di public domain (JPEG, SVG), una tazza da caffé (PNG, SVG), fiori primaverili (PNG, SVG), pastelli colorati (PNG, SVG), e simboli di Halloween (PNG, SVG). Le ultime due hanno richiesto più path finché non sono stata soddisfatta dell’immagine. Tipicamente, quanto più è compless un’immagine tanti più paths saranno necessari per catturare tutte le variazioni di colore nell’immagine.

Una volta che avete il vostro SVG, i vostri disegni potranno essere statici oppure potrete usare JavaScript per animare ogni aspetto dello SVG. Potete anche usare le tecniche di animazione dichiarativa implementate in SVG, sebbene sarebbe meglio riservare l’animazione ai diagrammi piuttosto che usarla per il design di una pagina.

Utilizzare le grafiche vettoriali trovate nei vostri progetti#section5

Il web è ricco di grafiche vettoriali in altri formati quali EPS o Adobe Illustrator (.ai). Come SVG, molti file di grafica vettoriale si possono usare liberamente, perlomeno nei siti personali. Se il formato non è già un SVG, una rapida ricerca in Google mostrerà diverse tecniche e risorse che potrete usare per convertire tale formato in SVG. Inkscape cura anche una lista dei tool di conversione. Inoltre, Adobe Illustrator può anche esportare grafiche vettoriali come SVG.
La Open Source Clip Art Library è un ottimo posto per scoprire SVG esistenti e altri differenti tipi di grafiche di pubblico dominio. Una volta che avete il file grafico, potete modificarlo per soddisfare i vostri bisogni, o combinare più grafiche in una. Se siete nuovi a SVG, usate Inkscape per modificare l’immagine, altrimenti potreste essere capaci di modificare direttamente lo SVG, usando un editor XML. Una ricerca in Google con le parole “vector silhouettes” ha dato come risultato molti dei files sorgente delle silhouttes dei miei siti.

Ottimizzare e potenziare SVG#section6

Per essere sicuri che un SVG sia ottimizzato per l’uso sul web, fate partire l’utility Scour su di esso per eliminare le inefficienze e gli spazi bianchi superflui dopo che avrete copiato, convertito e modificato il vostro file SVG. Scour è un semplice script Python creato da Jeff Schiller. Funziona da riga di comando o può essere lanciato anche come estensione di Inkscape.

La cosa importante da ricordare è che quando si creano o si cercano degli SVG da usare nel proprio design web non dovete preoccuparvi delle dimensioni: un’immagine in formato SVG è bella sia che sia piccola sia che sia grande. Inoltre, non dovete nemmeno preoccuparvi che l’immagine sia esattamente ciò che volete poiché SVG è estremamente malleabile. La combinazione della sua scalabilità e della sua malleabilità rendono SVG un nuovo e divertente strumento di progettazione web.
Per dimostrare ciò che potete fare con un file SVG esistente, visitiamo nuovamente il sito EMACS for OS X. Questa volta, invece che concentrarci sull’immagine in primo piano, accederò all’oggetto SVG che fornisce il gradiente di sfondo. 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 in stops, ognuno dei quali specifica l’offset in cui lo stop del gradiente è completamente finito. Il motore che implementa l’immagine si assicura che il colore da uno stop si mescoli gradualmente nel colore derivante dallo stop successivo.

Mi piace il gradiente, ma vorrei un po’ più di colore. Ad esempio, mi piacerebbe incorporare un po’ di giallo nel gradiente e un po’ di rosso ed aggiustare gli stop di conseguenza:

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

Da ultimo, ho preso la silhoutte SVG che uso per il mio sito Frugal Algorithm e l’ho aggiunto alla stessa pagina web del mio gradiente di sfondo appena modificato, come mostrato in Figura 9. Poiché SVG è basato sui vettori, fondere insieme più immagini e modificarne il risultato è estremamente semplice, molto di più che con le bitmap.

Riuscire a combinare facilmente più grafiche vettoriali e modificarne il risultato è solo uno degli aspetti divertenti di SVG. Come abbiamo visto in questo articolo, SVG può anche essere “cross-browser friendly” e relativamente semplice da creare.

Tuttavia, è la scalabilità di SVG che aggiunge una nuova dimensione al design del nostro sito: non siamo più obbligati ad avere larghezze ed altezze fissate in un ambiente di dimensioni flessibili.