Corso di Laurea in Informatica Specialistica
Esame di Informatica Grafica
Prof.ssa Laura Caponetti
A.A. 2003/2004

ANIMAZIONI  IN  SVG.

(Scalable Vector Graphics)

Realizzato da: Luigi Faienza

Introduzione

Elementi Grafici SVG

Animazioni SVG

Codice Banner SVG Commentato

Banner SVG

Riferimenti

 

 

INTRODUZIONE

SVG è un formato di grafica vettoriale, prodotto dal W3C (World Wide Web Consortium) consorzio noprofit che si occupa degli standard WEB.

A differenza della grafica raster, tipica dei formati bitmap, in cui l'immagine viene codificata come un insieme di pixel, la grafica vettoriale descrive il proprio contenuto per mezzo di figure e curve combinate fra loro.

Il sorgente di un file SVG è puro testo XMLTM, ed è quindi componibile modularmente con qualsiasi altra applicazione XML.

Tale grammatica descrive le informazioni per mezzo di una struttura dati realizzata ad albero, in cui è possibile identificare nodi padri e nodi figli, partendo da una radice, fino ad arrivare alle foglie. Ogni elemento è racchiuso da tag, e descritto da attributi; un'immagine SVG può essere generata dinamicamente a partire dai dati contenuti in database XML.

Gestisce contemporaneamente vettori, immagini raster, animazione e testo. Come linguaggio XML può essere processato con i tradizionali tool XML come parser, validatori, editor, e browser (SVG è già supportato dalle attuali versioni di MS Internet Explorer e Netscape, anche se è necessario un apposito plug-in).

Sulle pagine W3C di Graphics Activity, Chris Lilley discute alcuni vantaggi di grafica scalabile a vettori, rispetto a una grafica bitmap. Le immagini bitmap sono dipendenti dalla dimensioni: appaiono diverse se visualizzate da diversi dispositivi di diversa capacità di risoluzione; l'immagine visualizzata a schermo e quella stampata possono differire l'una dall'altra. Il formato bitmap non è affatto scalabile: la risoluzione dell'immagine rimane costante e, all'aumentare delle dimensioni di visualizzazione, l'immagine viene distorta. Il formato vettoriale non usa una mappa di pixel, bensì una lista di comandi che disegnano le varie parti della figura; è questo che gli consente un'elevata scalabilità.

I due fattori principali che determineranno il successo o il fallimento di SVG sono:

• La distribuzione di un elevato numero di player (su un numero sufficiente di piattaforme)

• La difficoltà insita nella creazione di un documento SVG.

Altra caratteristica di SVG è quella di essere costituito da semplice testo, che, come tale, può essere indicizzato, selezionato, ricercato ed estratto, conferendo massima flessibilità di accesso ai contenuti. Si, SVG è "accessibile", nel senso che in SVG tutto può essere collocato e identificato all'interno di un contesto.

SVG è stilizzabile con l'uso dei CSS (Cascade Style Sheets); si tratta di fogli di stile a cui si può far riferimento per la formattazione degli elementi della pagina. A ciascuno di questi si attribuiscono delle caratteristiche (specificate nello stylesheet) di modo che, per modificarne l'aspetto, non si dovrà accedere al codice sorgente del documento, bensì basterà sostituire semplicemente il solo foglio di stile. Questa possibilità è utile sia al costruttore della pagina, che all'utente finale (che può adattare la visualizzazione del documento alle proprie esigenze).

SVG, consente la gestione di eventi, che, innescati da una qualsiasi azione e/o condizione, possono essere catturati e gestiti per eseguire le più svariate operazioni (la pressione del tasto del mouse sull'immagine può provocare, ad esempio, la comparsa di un campo di form).

Questo, unito all'utilizzo di DOM (Document Object Model), consente di poter utilizzare, ad esempio, JavaScript (linguaggio di scripting per altro già molto utilizzato nella realizzazione di pagine WEB) per accedere e manipolare a runtime tutti i componenti di una pagina SVG.

I documenti SVG possono, poi, essere inclusi in documenti scritti in altri linguaggi XML, e possono a loro volta includere frammenti scritti in altri linguaggi XML. Mixare diversi linguaggi di markup incrementa l'accessibilità del documento, che può essere quindi strutturato in varie parti, ciascuna descritta dal linguaggio più adatto. Ad esempio, un documento MathML può utilizzare SVG sia per visualizzare le equazioni descritte, sia per proporne il grafico.

In definitiva la chiave del futuro successo di SVG sta nei seguenti punti:

• File immagini (mediamente) più piccoli e tempi di download più brevi rispetto a quelli bitmap;

• Indipendenza dalla risoluzione e dal dispositivo utilizzato;

• Adattabilità a dispositivi con banda bassa e memoria limitata;

• Paning e Zooming (per visualizzare a diversi livelli di dettaglio);

• Completa compatibilità con XHTML: SVG può essere integrato all'interno di pagine WEB;

• Possibilità di catturare "eventi" e gestirli tramite qualunque linguaggio di scripting;

• Indicizzabilità del testo inserito nell'immagine, che quindi può essere oggetto di query;

• Possibilità di animazioni e trasformazioni complesse dell'immagine;

• Generazione dell'immagine anche a partire dai dati contenuti in un database (e non

necessariamente memorizzati in modo statico su un file);

• Utilizzo di CSS (Cascading Style Sheets) per modificare la rappresentazione dell'immagine;

• Supporto dello standard RGB e, mediante l'uso di CSS, anche di una specifica di colori

alternativa grazie all’utilizzo dei profili ICC (International Color Consortium);

Non meno importante: SVG è un Standard Aperto (Open Standard) . Gli standard proprietari tendono a favorire una specifica casa produttrice, creando così problemi di interoperabilità. Aggregandosi ad uno standard aperto, i produttori possono garantire l'intercambiabilità della grafica non solo fra applicazioni, ma anche fra piattaforme diverse. (cfr.Tipi di Software).