SVG (Scalable Vector Graphics) è un linguaggio di grafica vettoriale bidimesionale basato su XML sviluppato dal consorzio W3C e giunto il 15 Gennaio 2003 alla versione 1.1.
Recentemente sono state sviluppate due ulteriori specifiche di SVG, chiamate SVG Mobile Profiles, ideate espressamente per il mondo dei dispositivi mobili (palmari e telefoni cellulari).
Vediamo di elencare brevemente quelle che sono le caratteristiche principali di SVG:
- È testuale: questo implica che è possibile creare e modificare un file SVG con un semplicissimo editor di testo; inoltre si ha la possibilità di comprimere un file testuale in maniera molto efficiente favorendo così l'utilizzo di SVG in ambito Web;
- È vettoriale: questo implica che, a differenza di quello che avviene nel caso di un formato grafico raster (Jpeg o Gif), è possibile scalare e zoommare a piacimento l'immagine SVG senza avere una perdita di qualità dell'immagine stessa;
- È "open": non è un formato proprietario, le specifiche ed i lavori del Working Group che si occupa di SVG sono liberamente consultabili sul sito del W3C
- È un'applicazione XML: questo permette di utilizzare, per lo sviluppo di applicazioni che manipolano file SVG, i numerosi strumenti di sviluppo già esistenti per XML;
- È interattivo: attraverso un linguaggio di scripting è possibile rendere l'immagine SVG interattiva, ossia fare in modo che sia sensibile a certi eventi (come il click del mouse) e che compia determinate azioni in risposta a tali eventi;
- È dinamico: infatti è possibile creare delle animazioni attraverso l'uso del linguaggio di animazione SMIL (Synchronized Multimedia Integration Language) anch'esso sviluppato dal W3C.
Gli strumenti per utilizzare SVG
Prima di iniziare a parlare in dettaglio del linguaggio, vediamo quali sono gli strumenti che dovrete procurarvi per poter creare e visualizzare un'immagine SVG.
Come detto in precedenza, un file SVG è formato da testo e quindi per creare un file si può tranquillamente utilizzare un editor di testo (come il Notepad del Windows). Questa è la soluzione più semplice anche se un po' scomoda, specialmente se avete intenzione di creare immagini SVG molto complesse. Una soluzione sicuramente più comoda è quella di utilizzare un software di grafica che sia in grado di salvare in SVG. tra i più famosi citiamo come esempio Adobe Illustrator 10 e il prodotto Open Source Sodipodi, ma la lista dei software di grafica che offrono la possibilità di creare file SVG sta aumentando sempre più.
Per quanto riguarda la visualizzazione si hanno a disposizione due possibilità.
- Visualizzare un file SVG all'interno di un web browser mediante l'utilizzo di un plugin. Questo plugin, sviluppato dalla Adobe, è disponibile sia per Internet Explore che per Netscape ed è liberamente scaricabile all'indirizzo: http://www.adobe.com/svg/viewer/install/main.html.
- Utilizzare un'applicazione "stand-alone" ossia un SVG Viewer. Come esempio citiamo il viewer del progetto Batik, sviluppato in Java e quindi disponibile per numerose piattaforme, che può essere scaricato all'indirizzo http://xml.apache.org/batik/.
Per visualizzare e modificare gli esempi che troverete nel corso della guida vi consiglio di utilizzare un web browser dotato di plugin SVG ed il vostro editor di testo preferito.
La struttura della Guida
Nel corso di questa guida vedremo di affrontare tutti gli aspetti principali di SVG mostrando sia la teoria del linguaggio sia lasciando molto spazio ad esempi pratici, cosa che ritengo molto importante per una guida introduttiva.
La struttura principale di questa guida sarà :
- Aspetti Base di SVG: analisi della struttura di un file SVG, informazioni su come "disegnare" e gestire gli elementi grafici in SVG;
- Effetti Grafici in SVG: come rendere spettacolare un'immagine SVG applicando filtri grafici in grado di creare ombre o giochi di luce;
- Interattività in SVG: come rendere un'immagine SVG sensibile alle nostre azioni;
- Animazioni in SVG: come creare animazioni SVG che non hanno nulla da invidiare alle animazioni Flash.
