V Indice Introduzione XIII PARTE PRIMA PRENDERE CONFIDENZA CON SVG 1 Capitolo 1 Il set di strumenti principali di SVG 3 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 17 2.1 Struttura di un immagine (documento) SVG 17 2.2 I preliminari di un documento SVG 18 2.3 L elemento <svg> 21 2.4 Elementi SVG annidati 23 2.5 L elemento <g> 25 indice_ok.p65 5
VI 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 PARTE SECONDA INIZIARE A LAVORARE CON SVG 4 7 Capitolo 3 Creare elementi grafici statici 49 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 79 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 indice_ok.p65 6
VII 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 105 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 133 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 161 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 indice_ok.p65 7
VIII Filtri combinati sul testo 177 Creazione di forme di testo filtrate 180 Capitolo 8 Animazione SVG e SMIL 183 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 <animatecolor> 217 8.11 L elemento <animatetransform> 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 237 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 indice_ok.p65 8
IX Capitolo 10 Incorporare SVG in pagine HTML o XHTML 283 10.1 SVG e HTML 283 10.2 Utilizzo dell elemento <embed> 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 297 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 337 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 indice_ok.p65 9
X 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 363 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 385 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 indice_ok.p65 10
XI PARTE TERZA UNO SGUARDO AL FUTURO 403 Capitolo 15 Pianificare e realizzare componenti SVG 405 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 415 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 429 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 indice_ok.p65 11
XII 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 PARTE QUARTA APPENDICI 439 Appendice A Risorse SVG e XML online 441 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 447 Appendice C Cosa c è sul sito Web451 C.1 SVGSpider 451 C.2 File sorgente 451 C.3 Feedback 451 Indice analitico 453 indice_ok.p65 12