In questo capitolo ci apprestiamo a tirare le conclusioni del discorso, iniziato nel capitolo precedente, riguardante la definizione dello stile di un elemento.
SVG è un linguaggio basato su XML e come tale può avvalersi del meccanismo dei CSS (Cascading Style Sheets) per la definizione dello stile, proprio come avviene in HTML e XHTML.
In SVG possiamo definire lo stile di un elemento, seguendo la sintassi CSS, all'interno dell'elemento <style>.
Vediamo quindi l'uso dei CSS, considerando il seguente esempio:
<svg viewbox="0 0 300 300">
<style type="text/css">
<![CDATA[
rect {stroke:black;fill:red;stroke-width:5}
]]>
</style>
<rect x="10" y="10" width="200" height="100"/>
</svg>
Utilizzando la sintassi CSS abbiamo definito lo stile di visualizzazione del tag <rect> all'interno dell'elemento <style>. Tale definizione vale per tutti gli elementi rect contenuti nella nostra immagine SVG e questo è senz'altro molto utile nel caso di immagini complesse (quindi con molti elementi grafici) perché ci evita di dover definire lo stile di ogni singolo elemento.
Nell'esempio precedente tutti i rettangoli erano rappresentati come rossi con bordo nero.
Qualora avessimo la necessità di definire uno stile diverso per un particolare elemento, ad esempio disegnare tutti i rettangoli rossi tranne uno blu, in CSS dovremmo scrivere:
<svg viewbox="0 0 300 300">
<style type="text/css">
<![CDATA[
rect {stroke:black;fill:red;stroke-width:5}
rect.coloreblu {stroke:black;fill:blue;stroke-width:5}
]]>
</style>
<rect x="10" y="10" width="50" height="100"/>
<rect class="coloreblue" x="110" y="10" width="50" height="100"/>
</svg>
In questo caso il secondo rettangolo non sarà colorato di rosso ma di blu in quanto gli verrà applicato il secondo stile definito all'interno dell'elemento <style> e non quello di default per i <rect>.
Quindi attraverso l'uso dell'attributo class noi possiamo scegliere quale stile applicare al nostro elemento scegliento tra gli stili che abbiamo definito all'interno dell'elemento <style>.
Gli stili possono essere anche definiti in un file esterno al nostro file SVG in modo da avere una separazione tra il contenuto dell'immagine SVG e la definizione delle proprietà della sua rappresentazione.
Considerando l'esempio precedente noi dobbiamo creare un file con estensione .css (ad esempio miostile.css) contenente le definizioni degli stili secondo la sintassi CSS:
rect {stroke:black;fill:red;stroke-width:5}
rect.coloreblu {stroke:black;fill:blue;stroke-width:5}
Questo file può succesivamente essere incluso all'interno del nostro file SVG inserendo la seguente riga all'inizio del file SVG:
<?xml-stylesheet href="miostile.css" type="text/css"?>
In questo modo saremo in grado di utilizzare gli stili definiti all'interno del file CSS come se l'avessimo dichiarati all'interno dell'elemento <style>.
