Le immagini SVG

La gestione di immagini basata sulla manipolazione dell'elemento <img> è molto semplice ma limitata. Con qualche trucco e un po' di CSS possiamo creare degli effetti grafici sulle immagini, ma dobbiamo basarci sempre su grafica pre-esistente: in altre parole, non possiamo disegnare.

Un approccio alternativo che ci consente di colmare questa lacuna è l'utilizzo di SVG (Scalar Vector Graphics), uno standard W3C che definisce un linguaggio di markup per la creazione di grafica bidimensionale.

Iniziamo ad esaminare questo formato con un semplice esempio per inserire un'immagine SVG in una pagina HTML:

<svg>
	<circle id="cerchio"
            cx="100" cy="100" r="50"
		    style="stroke: #000000; fill: #00ff00;" />
</svg>

Questo codice definisce un cerchio il cui centro è posizionato alle coordinate specificate tramite gli attributi cx e cy e la dimensione del raggio è indicata dall'attributo r. Lo stile definisce i dettagli grafici del cerchio come, nel nostro caso, il colore del bordo (stroke) e dell'area interna (fill).

Il risultato è mostrato dalla seguente figura:

Oltre al CSS standard, SVG utilizza un'estensione specifica come previsto dalla raccomandazione W3C.

Senza pretendere di essere esaustivi su SVG, possiamo sottolineare è che possiamo gestire gli elementi SVG come facciamo con gli elementi standard del DOM di una pagina HTML. Ad esempio, tramite il seguente codice JavaScript aumentiamo le dimensioni del cerchio e cambiamo il suo colore:

var cerchio = document.getElementById("cerchio");
cerchio.setAttribute("r", 150);
cerchio.style.fill = "#ff0000";

Possiamo anche spingerci oltre e provare ad animare il nostro cerchio facendolo muovere all'interno della nostra pagina HTML. Prevediamo quindi due pulsanti: uno per avviare l'animazione e uno per fermarla. Il seguente codice JavaScript provvederà a gestire l'animazione:

var timerId;
function startAnimation() {
	if(timerId == null) {
		timerId = setInterval(animate, 20);
	}
}
function stopAnimation() {
	if(timerId != null){
		clearInterval(timerId);
            timerId = null;
	}
}
function animate() {
	var cerchio = document.getElementById("cerchio");
	var x = cerchio.getAttribute("cx");
	var newX = 2 + parseInt(x);
	if(newX > window.innerWidth) {
		newX = 20;
	}
	cerchio.setAttribute("cx", newX);
}

Si tratta in pratica di spostare verso destra la coordinata x del centro del cerchio ad intervalli di tempo regolari tramite un timer. Quando viene raggiunta l'estremità destra della pagina, il cerchio riappare a sinistra e continua il suo cammino.