SVG
SVG è un acronimo che significa Scalable Vector Graphic e indica una specifica modalità di definire elementi di natura grafica attraverso una sintassi XML, ecco un esempio:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="300px" viewbox="0 0 300 300"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Una barchetta in SVG</title>
<desc>La stessa barchetta della lezione sui canvas ora in SVG</desc>
<path d="M40,170 h220 A150,150 0 0,1 40,170 h110 v-130 v130 h-110 z"
fill="black" stroke="black" stroke-width="1"/>
<rect x="150" y="40" width="60" height="30"
fill="black" stroke="black" stroke-width="1"/>
</svg>La maggior parte dei browser in circolazione interpreta correttamente lo standard SVG, se proviamo a visualizzare questa pagina in Chrome otterremo questo risultato (figura 1):
Nonostante il risultato sia a prima vista identico rispetto alla barchetta disegnata all’interno della lezione sull’elemento canvas, si può notare come a livello di codice ci sia una enorme differenza: mentre sul canvas è necessario insistere con istruzioni JavaScript che pilotano la creazione del disegno, qui ci troviamo di fronte ad un linguaggio XML fatto per descrivere l’immagine. Ma non è finita: da un lato (canvas) stiamo lavorando su di una matrice di pixel, che quindi non può essere ridimensionata senza subire perdite di qualità; dall’altro, con SVG, operiamo con grafica vettoriale, che preserva in modo assoluto lo stesso risultato a prescindere dalle operazioni di trasformazione applicate ad essa.
MathML
Anche MathML è un acronimo: Mathematical Markup Language; il fine di questa sintassi è quello di rendere possibile la visualizzazione a schermo di formule complesse, senza ricorrere al classico espediente dell’utilizzo di immagini create a partire da screenshot di applicazioni scientifiche. Anche in questo caso stiamo parlando di sintassi XML-like. A seguire un esempio della famosa equazione di Einstein secondo queste specifiche:
<?xml version="1.0" encoding="UTF-8"?>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<semantics>
<mrow>
<mi>E</mi>
<mi mathvariant="normal">=</mi>
<msup>
<mi mathvariant="italic">mc</mi>
<mn>2</mn>
</msup>
</mrow>
<annotation>E=mc^2</annotation>
</semantics>
</math>Per testare la sintassi del nostro esempio è necessario munirsi della versione nightly (sperimentale) del browser WebKit, tra i pochi a supportare queste specifiche. Questo è il risultato (figura 2):
Novità in HTML5
Ed ecco la novità: le specifiche HTML5 prevedono l’integrazione di entrambi questi markup senza nessuna definizione aggiuntiva (a differenza della precedente integrazione con XHTML). Sarà quindi possibile scrivere:
<!doctype html>
<html>
<title>Big Buck Bunny, il trailer</title>
<body>
<svg>
<!-- elementi SVG -->
</svg>
<math>
<!-- elementi MathML -->
</math>
</body>
</html>E c’è di più: le due sintassi in questione potranno direttamente beneficiare dell’intero ecosistema HTML5 attorno a loro. Questo significa che una espressione MathML può, in questo contesto, variare a seguito della ricezione di alcuni dati tramite Ajax, oppure che una rappresentazione SVG può essere pilotata da alcuni eventi JavaScript attivati attraverso una form.
Conclusioni
Con queste due nuove frecce al suo arco, le specifiche HTML5 acquistano un nuovo livello di potenza. Forse non capiterà troppo spesso di implementare sintassi MathML per sistemi applicativi ma sicuramente lo stesso non si può dire per SVG. Anche il supporto a queste due specifiche è diverso, la Scalable Vector Graphic è pressoché presente su tutte le più recenti versioni dei browser, mentre il supporto per il markup per definire espressioni matematiche comincia ora ad affacciarsi nelle prime beta, come ad esempio Firefox 4 o la versione nightly di WebKit. In ogni caso esiste una interessante libreria JavaScript, MathJax, capace di interpretare linguaggio MathML e generare una corretta rappresentazione grafica sulla maggior parte dei browser in commercio.
