Parte prima - Prendere confidenza con SVG

Capitolo 1 - Il set di strumenti principali di SVG
1.1 Creare e modificare SVG 3
1.2 Editor di testi 3
XML Writer 4
1.3 Package di grafica vettoriale 6
Jasc WebDraw 6
Adobe Illustrator 9
CorelDraw 9
Mayura Draw 10
Macromedia Freehand 10
1.4 Visualizzatori SVG 10
Adobe SVG Viewer 11
CSIRO SVG Viewer 12
Visualizzatore X-Smiles 12
Batik 13
CSIRO SVG Viewer per computer palmari 13
IBM SVGView 14
Amaya 14
Capitolo 2 - Panoramica sul documento SVG
2.1 Struttura di un’immagine (documento) SVG 17
2.2 I preliminari di un documento SVG 18
2.3 L’elemento
2.4 Elementi SVG annidati 23
2.5 L’elemento < g > 25
2.6 Alcuni elementi SVG fondamentali 27
L’elemento < desc > 27
L’elemento < title > 28
L’elemento < defs > 29
L’elemento < symbol > 30
L’elemento < use > 30
L’elemento < image > 33
L’elemento < switch > 34
2.7 Il modello del pittore 34
2.8 Sistemi di coordinate SVG 36
Definire un nuovo sistema di coordinate 37
L’attributo viewBox 38
Adattare le dimensioni 41
2.9 Font 45
WebFonts 45
Font SVG 46

Capitolo 3 - Creare elementi grafici statici
3.1 Blocchi fondamentali 49
3.2 L’elemento < rect > 50
3.3 Un semplice quadrato 52
3.4 L’elemento < line > 56
3.5 L’elemento < circle > 63
3.6 L’elemento < ellipse > 64
3.7 Unire ellissi 65
3.8 L’elemento < polyline > 68
3.9 L’elemento < polygon > 69
3.10 L’elemento < path > 70
Creare forme aperte utilizzando linee rette 71
Creare forme chiuse utilizzando linee rette 73
Creare archi 74
Creare una curva quadratica di Bézier 74
Creare curve cubiche di Bézier 76
Capitolo 4 - Utilizzare il testo in SVG
4.1 Fondamenti sul testo 79
4.2 Testo in SVG 80
Internazionalizzazione 82
Confronto tra testo in SVG e in grafiche bitmap 83
Confronto tra testo SVG e HTML/XHTML 83
4.3 L’elemento < text > 84
Stile del testo SVG 84
Disposizione di testo SVG 85
Regolazione dell’aspetto del testo 89
Spaziatura 93
Spaziatura tra lettere 95
4.4 L’elemento < tspan > 96
4.5 L’elemento < tref > 101
4.6 Visualizzazione di testo su un percorso 102
Capitolo 5 - Creazione di barre di navigazione
5.1 Barre di navigazione 105
5.2 Collegare pagine Web utilizzando SVG 106
L’elemento < a > 106
Collegamenti mailto 110
XLink 112
5.3 Aggiungere effetti di mouseover 114
5.4 Semplici barre di navigazione 119
5.5 Barre di navigazione testuali 119
5.6 Barre di navigazione con etichette 123
5.7 Utilizzare elementi < svg > per aiutare
il posizionamento 131
Capitolo 6 - Creare gradienti SVG
6.1 Cosa sono i gradienti? 133
6.2 L’elemento < linearGradient > 134
Creare un banner utilizzando un gradiente lineare 135
Utilizzare gradienti lineari nel testo 137
Creare un gradiente verticale 140
Ruotare un gradiente 140
Applicare un gradiente a un contorno 143
Modificare l’opacità in un gradiente 144
Ripetere i gradienti 145
Acquisire controllo sui gradienti 149
6.3 L’elemento < radialGradient > 151
6.4 I gradienti SVG 154
6.5 Elementi < stop > multipli 155
6.6 I gradienti SVG all’opera 155
6.7 I motivi SVG 159
Capitolo 7 - Utilizzo di filtri SVG
7.1 Perché utilizzare i filtri 161
7.2 Utilizzo di filtri SVG 162
7.3 La gamma di filtri SVG 169
7.4 Esempi di utilizzo di filtri SVG 170
Gaussian Blur 170
Turbulence, statico 171
Filtri combinati sul testo 177
Creazione di forme di testo filtrate 180
Capitolo 8 - Animazione SVG e SMIL
8.1 Animazioni fondamentali 183
8.2 SVG come grammatica di animazione 184
8.3 Attributi fondamentali di un’animazione 184
8.4 Applicare animazioni SVG
a elementi SVG statici 186
8.5 Animazioni più complesse 187
8.6 SVG, SMIL Animation e SMIL 2.0 193
8.7 L’elemento < animate > 194
Animare movimenti 195
Animare dimensioni 196
8.8 L’elemento < set > 197
Animare la visibilità 198
Animare URI 201
Concatenare animazioni 203
Determinare tempi multipli per iniziare
un’animazione 207
8.9 L’elemento < animateMotion > 211
Animazione su un percorso 211
Far scorrere il testo utilizzando < animateMotion > 215
8.10 L’elemento 217
8.11 L’elemento 218
8.12 Rotazione usando < animateTransform > 218
8.13 Semplici animazioni di esempio 222
Animare gradienti 222
Animare su un gradiente 224
Animare testo 226
Animare testo che scorre orizzontalmente 229
Modificare il colore del testo 230
Modificare l’opacità del testo 231
Animare l’opacità in un gradiente 232
Capitolo 9 - Creazione di logo e banner pubblicitari
9.1 Creazione di logo 237
Logo statici 237
Logo animati 244
9.2 Creazione di banner e di altri tipi di pubblicità in SVG 267
Una pubblicità con testo rotante 267
Un banner pubblicitario con testo scorrevole 275
Capitolo 10 - Incorporare SVG in pagine HTML o XHTML
10.1 SVG e HTML 283
10.2 Utilizzo dell’elemento 284
10.3 Aggiungere barre di scorrimento alle pagine Web SVG 287
10.4 Utilizzo dell’elemento < object > 290
10.5 Visualizzazione di testo o immagini alternativi 294
Alternative utilizzando il tag < embed > 295
Alternative utilizzando il tag < object > 295
Alternative in XML e SMIL 296
Capitolo 11 - Creare immagini SVG interattive
11.1 Definizione di interattivo 297
11.2 Eventi SVG 297
11.3 Immagini e componenti SVG di esempio con l’impiego dell’interattività 299
Un’immagine mailto 299
Semplici rollover di testo 307
Un rollover di testo più complesso 312
Un menu con un rollover di filtro animato 322
Un menu dinamico 325
Collegamenti con l’impiego di SVG 335
11.4 Zoom, panoramica e scorrimento delle immagini SVG 335
Ingrandimento 335
Panoramica 336
Scorrimento 336
Capitolo 12 - Creare un semplice sito Web SVG
12.1 Creare un’intera pagina Web con SVG 337
12.2 Creare pagine Web con un linguaggio “grafico” 337
Caratteristiche di una tecnologia
di authoring ideale 338
Deve essere basato su XML 339
Può essere creato in modo statico o dinamico 339
Può creare layout di pagine Web 340
Ha capacità grafiche 341
Il suo stile può essere definito utilizzando Cascading Style Sheet 341
Ha possibilità di layout di testo 341
Può essere animato 342
Può utilizzare script 342
Può essere combinato con altre tecnologie XML, comprese XHTML e Xforms 343
Può essere utilizzato in presentazioni multimediali 343
Può essere utilizzato per stampe di alta qualità 343
12.3 Chi può utilizzare SVG come strumento di authoring Web? 344
12.4 Creazione di pagine Web SVG 345
Creare il layout di pagine Web SVG 345
Gestire pagine Web SVG quasi ridimensionabili 351
Navigare in pagine Web SVG 354
Zoom in pagine Web SVG 354
Spostarsi su pagine Web SVG 355
Scorrimento di SVG 355
12.5 Alcuni layout di pagina di esempio 356
Un layout a “tre frame” 356
Comprimere i menu 356
Menu animati 357
Capitolo 13 - Progettare SVG per l'uso con CSS
13.1 Cascading Style Sheet 363
13.2 Pianificare testo e grafiche 364
Utilizzare basi di stile 364
Utilizzare attributi di classe 370
Utilizzare attributi id 373
Comprendere l’ambito di Cascading Style Sheet 376
13.3 Esempio di design: SVG e CSS 379
Capitolo 14 - Quando le cose non funzionano
14.1 Ridurre al minimo gli errori 385
14.2 Evitare i problemi utilizzando buone pratiche di programmazione 385
Utilizzare un editor che conosce XML 386
Realizzare componenti visivi 386
14.3 Gestione dei sintomi di errori comuni 387
Non viene visualizzato nulla 387
Vengono visualizzate solo alcune parti dell’immagine 390
Prima funzionava e ora non funziona 391
Non si anima 392
Spazi killer 393
Il punto e virgola misterioso 394
14.4 Diagnosi e risoluzione di problemi 397
Il messaggio “Junk after document element” 397
Il messaggio “No element found” 397
Collegamenti che non funzionano 397
Commenti 398

Capitolo 15 - Pianificare e realizzare componenti SVG
15.1 Componenti visivi definiti 405
15.2 Concepire XML e componenti visivi 405
Entità XML 406
Tipi di componenti visivi SVG 407
15.3 Comprendere l’elemento < svg > e i componenti visivi 408
L’elemento < use > 408
L’elemento < defs > 408
Usi multipli di un componente 409
Uso in più documenti 409
15.4 Utilizzare componenti che fanno risparmiare tempo e lavoro 409
Risparmiare tempo di debug 409
15.5 Creare un componente plug-in e renderlo mobile 410
15.6 Realizzazione di un catalogo di componenti visivi 413
Strutturare un catalogo 413
Backup 413
Capitolo 16 - Sviluppare le proprie capacità SVG
16.1 Combinare le proprie capacità 415
16.2 SVG interattivo 415
16.3 SVG ed ECMAScript 416
16.4 Una mentalità SVG 416
Creare e utilizzare componenti visivi 417
Incorporare SVG in XML 417
Comprendere SVG e internazionalizzazione 419
16.5 Percorsi di ritaglio 422
Capitolo 17 - Il futuro di SVG
17.1 Dove si colloca SVG in una strategia di grafica Web? 429
Per le immagini statiche 430
Per le immagini animate 431
Applet Java 431
Per le immagini interattive 431
Per l’authoring Web 432
17.2 SVG e Macromedia Flash 432
17.3 Il futuro di SVG 433
I fattori che influenzano il futuro di SVG 434
Utilizzare SVG con l’HTML o l’XHTML 434
Utilizzare SVG con le immagini bitmap 435
17.4 SVG come strumento di authoring Web 435
17.5 Creare SVG in modo dinamico 436
SVG, animazione SMIL e SMIL 2.0 436
Utilizzare SVG con XForms 436
Utilizzare SVG con XSL-FO 436

Appendice A - Risorse SVG e XML online
A.1 SVG al W3C 441
A.2 Visualizzatori SVG 442
A.3 Strumenti SVG 442
A.4 Tutorial e demo SVG 443
A.5 Riferimenti SVG 445
A.6 SVG lato server 445
A.7 Risorse XML 445
Appendice B - Glossario SVG

Appendice C - Cosa c'è sul sito Web

C.1 SVGSpider 451
C.2 File sorgente 451
C.3 Feedback 451