Indice. Introduzione PARTE PRIMA PRENDERE CONFIDENZA CON SVG 1

Transcript

1 V Indice Introduzione XIII PARTE PRIMA PRENDERE CONFIDENZA CON SVG 1 Capitolo 1 Il set di strumenti principali di SVG Creare e modificare SVG Editor di testi 3 XML Writer Package di grafica vettoriale 6 Jasc WebDraw 6 Adobe Illustrator 9 CorelDraw 9 Mayura Draw 10 Macromedia Freehand 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 Struttura di un immagine (documento) SVG I preliminari di un documento SVG L elemento <svg> Elementi SVG annidati L elemento <g> 25 indice_ok.p65 5

2 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> Il modello del pittore Sistemi di coordinate SVG 36 Definire un nuovo sistema di coordinate 37 L attributo viewbox 38 Adattare le dimensioni Font 45 WebFonts 45 Font SVG 46 PARTE SECONDA INIZIARE A LAVORARE CON SVG 4 7 Capitolo 3 Creare elementi grafici statici Blocchi fondamentali L elemento <rect> Un semplice quadrato L elemento <line> L elemento <circle> L elemento <ellipse> Unire ellissi L elemento <polyline> L elemento <polygon> 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 Fondamenti sul testo Testo in SVG 80 Internazionalizzazione 82 Confronto tra testo in SVG e in grafiche bitmap 83 Confronto tra testo SVG e HTML/XHTML L elemento <text> 84 Stile del testo SVG 84 Disposizione di testo SVG 85 indice_ok.p65 6

3 VII Regolazione dell aspetto del testo 89 Spaziatura 93 Spaziatura tra lettere L elemento <tspan> L elemento <tref> Visualizzazione di testo su un percorso 102 Capitolo 5 Creazione di barre di navigazione Barre di navigazione Collegare pagine Web utilizzando SVG 106 L elemento <a> 106 Collegamenti mailto 110 XLink Aggiungere effetti di mouseover Semplici barre di navigazione Barre di navigazione testuali Barre di navigazione con etichette Utilizzare elementi <svg> per aiutare il posizionamento 131 Capitolo 6 Creare gradienti SVG Cosa sono i gradienti? 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 L elemento <radialgradient> I gradienti SVG Elementi <stop> multipli I gradienti SVG all opera I motivi SVG 159 Capitolo 7 Utilizzo di filtri SVG Perché utilizzare i filtri Utilizzo di filtri SVG La gamma di filtri SVG Esempi di utilizzo di filtri SVG 170 Gaussian Blur 170 Turbulence, statico 171 indice_ok.p65 7

4 VIII Filtri combinati sul testo 177 Creazione di forme di testo filtrate 180 Capitolo 8 Animazione SVG e SMIL Animazioni fondamentali SVG come grammatica di animazione Attributi fondamentali di un animazione Applicare animazioni SVG a elementi SVG statici Animazioni più complesse SVG, SMIL Animation e SMIL L elemento <animate> 194 Animare movimenti 195 Animare dimensioni L elemento <set> 197 Animare la visibilità 198 Animare URI 201 Concatenare animazioni 203 Determinare tempi multipli per iniziare un animazione L elemento <animatemotion> 211 Animazione su un percorso 211 Far scorrere il testo utilizzando <animatemotion> L elemento <animatecolor> L elemento <animatetransform> Rotazione usando <animatetransform> 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 Creazione di logo 237 Logo statici 237 Logo animati 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

5 IX Capitolo 10 Incorporare SVG in pagine HTML o XHTML SVG e HTML Utilizzo dell elemento <embed> Aggiungere barre di scorrimento alle pagine Web SVG Utilizzo dell elemento <object> 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 Definizione di interattivo Eventi SVG 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 Zoom, panoramica e scorrimento delle immagini SVG 335 Ingrandimento 335 Panoramica 336 Scorrimento 336 Capitolo 12 Creare un semplice sito Web SVG Creare un intera pagina Web con SVG 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

6 X Può essere utilizzato in presentazioni multimediali 343 Può essere utilizzato per stampe di alta qualità Chi può utilizzare SVG come strumento di authoring Web? 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 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 Cascading Style Sheet 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 Esempio di design: SVG e CSS 379 Capitolo 14 Quando le cose non funzionano Ridurre al minimo gli errori Evitare i problemi utilizzando buone pratiche di programmazione 385 Utilizzare un editor che conosce XML 386 Realizzare componenti visivi 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 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

7 XI PARTE TERZA UNO SGUARDO AL FUTURO 403 Capitolo 15 Pianificare e realizzare componenti SVG Componenti visivi definiti Concepire XML e componenti visivi 405 Entità XML 406 Tipi di componenti visivi SVG 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 Utilizzare componenti che fanno risparmiare tempo e lavoro 409 Risparmiare tempo di debug Creare un componente plug-in e renderlo mobile Realizzazione di un catalogo di componenti visivi 413 Strutturare un catalogo 413 Backup 413 Capitolo 16 Sviluppare le proprie capacità SVG Combinare le proprie capacità SVG interattivo SVG ed ECMAScript Una mentalità SVG 416 Creare e utilizzare componenti visivi 417 Incorporare SVG in XML 417 Comprendere SVG e internazionalizzazione Percorsi di ritaglio 422 Capitolo 17 Il futuro di SVG 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 SVG e Macromedia Flash Il futuro di SVG 433 I fattori che influenzano il futuro di SVG 434 indice_ok.p65 11

8 XII Utilizzare SVG con l HTML o l XHTML 434 Utilizzare SVG con le immagini bitmap SVG come strumento di authoring Web Creare SVG in modo dinamico 436 SVG, animazione SMIL e SMIL 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