Nel corso dei precedenti capitoli abbiamo affrontato tutti gli aspetti principali di SVG. In questi ultimi capitoli vedremo come utilizzare gli argomenti e le tecniche viste per realizzare due oggetti sicuramente utili nell'ambito del Web Editing: un banner ed un menu interattivo per il vostro sito.
Banner
Un banner è una piccola immagine inserita all'interno di una pagina HTML utilizzata per "invitare" il visitatore a visitare un sito.
In SVG un banner può essere realizzato in questo modo:
<svg width="500" height="100" viewBox="0 0 500 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="barra">
<rect x="-50" y="0" width="30" height="100">
<animate attributeName="x" attributeType="XML" begin="0s" dur="5s" repeatCount="indefinite" from="-50" to="500"/>
</rect>
<rect x="500" y="0" width="30" height="100">
<animate attributeName="x" attributeType="XML" begin="0s" dur="5s" repeatCount="indefinite" from="500" to="-50"/>
</rect>
</clipPath>
<filter id="ombra">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="passo1"/>
<feOffset in="passo1" dx="5" dy="5" result="passo2"/>
<feMerge>
<feMergeNode in="passo2"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<a xlink:href="http://nomedelsito">
<rect x="0" y="0" width="500" height="100" stroke="blue" stroke-width="2" fill="white"/>
<text x="250" y="60" style="text-anchor:middle;font-size:40;font-family:arial;fill:blue;" filter="url(#ombra)">Nome del Sito
<animate begin="0s" dur="6s" repeatCount="indefinite" attributeName="font-size" values="40;20;10;20;40;60;80;60;40;20;10;20;80;40"/></text>
<g clip-path="url(#barra)" clip-rule="evenodd">
<rect x="0" y="0" width="500" height="100" fill="blue"/>
<text x="250" y="60" style="text-anchor:middle;font-size:40;font-family:arial;fill:white" filter="url(#ombra)">Nome del Sito
<animate begin="0s" dur="6s" repeatCount="indefinite" attributeName="font-size" values="40;20;10;20;40;60;80;60;40;20;10;20;80;40"/></text>
</g>
</a>
</svg>
Link banner: banner.svg
Visto che si tratta di un banner tutti gli elmenti grafici sono contenuti all'interno di un elemento <a>, in modo che cliccando su qualsiasi punto del banner venga attivato il link al sito che vogliamo pubblicizzare.
L'immagine contiene due elementi principali: un rettangolo ed una scritta.
Il rettangolo costituisce lo sfondo della nostra immagine, mentre la scritta, a cui abbiamo applicato un filtro grafico per creare un effetto di ombreggiatura, mostra il nome del sito.
Per attirare l'attenzione del visitatori solitamente i banner contengono delle animazione e quindi anche nel nostro abbiamo inserito della animazioni.
La prima animazione riguarda proprio la scritta ed in questo caso viene variato il valore della dimensione del carattere della scritta, facendolo aumentare e diminuire ripetutamente in modo da creare un effetto di "scritta elastica".
All'interno del'immagine abbiamo poi definito un gruppo di elementi a cui abbiamo applicato un clipping animato.
La regione di clipping è formata da due rettangoli verticali che sono animati in modo da spostarsi rispettivamente da destra a sinistra e da sinitra verso destra, creando un effetto di scansione dell'immagine.
Gli elementi contenuti all'interno di questo gruppo sono gli stessi già inseriti nell'immagine ma con colori differenti. In questo modo questi nuovi elementi si andranno a sovraporre perfettamente ai precedenti ma, essendo definiti all'interno di una regione di clipping, verrà visualizzata solamente la parte contenuta entro i rettangoli in movimento e quindi non copriranno del tutto gli elementi colorati in maniera differente.
Questo piccolo trucco fa si che al passaggio dei rettangoli sulla scritta, la parte contenuta al suo interno sembri cambiare colore visto che vengono mostrate la scritta e lo sfondo contenuti nel gruppo a cui abbiamo applicato il clippping.
Ovviamente cliccando sul banner otterrete un messaggio di errore visto che il link utilizzato è inesistente. Potete quindi personalizzare il banner inserendo l'URI del vostro sito nel tag <a> e scrivendone il nome nella scritta animata.
