Per usare SVG e XHTML insieme, occorre che come prima cosa il nostro documento venga servito come application/xhtml+xml. Qualsiasi altro tipo di contenuto otterrebbe l'effetto di non far visualizzare i contenuti SVG. Fatto questo, occorre che il nostro documento sia validato. A questo proposito, occorre utilizzare una delle DTD proposte dal W3C.
Quello che comunemente si pensa riguardo a SVG e XHTML, ossia il fatto che sia sufficiente usare una qualsiasi DTD XHTML per poter usare SVG, è errato. Occorre infatti usare una DTD che includa SVG nel suo profilo. In caso contrario, tutti gli elementi SVG non verranno riconosciuti e il nostro documento non passerà la validazione. Nello specifico, scegliamo di usare la seguente DTD:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd.">
Questo profilo comprende anche MathML 2.0 oltre che SVG 1.1. Ma occorre prestare ancora attenzione al fatto che all'interno del documento è necessario utilizzare la notazione con prefissi (XML) per poter utilizzare gli elementi SVG:
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="300px" height="200px" version="1.1">
<svg:circle cx="100px" cy="100px" r="50px" fill="#ffcc00" stroke="#000000" stroke-width="5px"/>
</svg:svg>
Come si può notare, tutti gli elementi SVG hanno il prefisso svg:. A questo punto si può utilizzare SVG includendolo nel codice XHTML della pagina.
Questa pagina mostra il nostro esempio. Documento valido ma con un warning. Comunque valido! Possiamo essere soddisfatti del nostro traguardo.
Nota su JavaScript e SVG
SVG può essere manipolato tramite JavaScript. àˆ possibile creare elementi al volo, manipolarne gli attributi e addirittura animarli. Del resto SVG è basato su XML, quindi l'albero del documento è identico a quello di un normale albero HTML. Se si usa jQuery, è possibile utilizzare i suoi metodi per le animazioni sull'elemento svg anche se con risultati non sempre coerenti su tutti i browser. Del resto, SVG dispone già di un suo sistema di animazione a cui si sono ispirati i moduli CSS3 sulle animazioni e trasformazioni.
Ovviamente servendo il nostro documento in un formato derivato direttamente da XML e che quindi ne segue le regole formali, alcuni metodi e proprietà molto popolari si comporteranno in modo diverso. Per esempio, innerHTML necessiterà di essere ben formato, in quanto se contiene marcatura non correttamente annidata il nostro script fallirà quasi sempre senza restituire errori. Inoltre alcune proprietà di stile di SVG, come fill o stroke-width, potrebbero non essere riconosciute dal browser qualora fossero settate dinamicamente tramite JavaScript (per esempio tramite il getter/setter css() di jQuery).
Ricordatevi infine di usare sempre script esterni e qualora doveste decidere di usare script embedded di includerli in sezioni CDATA. Non usate i soli commenti SGML per nascondere uno script embedded: in XML essi dicono al browser di ignorare tutto cià che ne segue.
Bibliografia
Il materiale migliore su SVG è sul sito del W3C. Mi permetto però di consigliare un libro un po'
SVG Essentials che contiene una vasta gamma di esempi che vi permetteranno di acquisire una buona padronanza di SVG, soprattutto riguardo al discorso delle coordinate e delle figure.
