Vi sono diverse modalità di assegnazione degli stili, la prima delle quali non prevede il ricorso alle proprietà CSS, ma ad attributi SVG. Un quadrato di 100px di lato, ad esempio, può essere definito come segue:
<rect
width="100"
height="100"
x="10"
y="10"
class="square"
fill="#cd3512"
fill-opacity="1"
stroke="#000000"
stroke-width="4"
stroke-opacity="1" />All'interno della gerarchia CSS, gli attributi grafici SVG sono collocati al livello più basso, subito al di sotto dei fogli di stile esterni. I fogli di stile interni al documento e le dichiarazioni inline hanno, invece, un livello gerarchico (cascade) superiore.
Gli attributi grafici degli SVG si collocano ad un livello basso della gerarchia dei fogli di stile
Lo stesso quadrato dell'esempio precedente può essere definito graficamente grazie a dichiarazioni CSS. Come anticipato, una prima modalità di assegnazione degli stili prevede il ricorso all'attributo style:
<rect
width="100"
height="100"
x="120"
y="10"
style="fill:#cd3512;fill-opacity:1;stroke:#000000;stroke-width:4;stroke-opacity:1" />Qui le proprietà CSS corrispondono esattamente agli attributi dell'elemento SVG.
E tuttavia non vi è sempre corrispondenza tra attributi SVG e proprietà CSS: non esistono, ad esempio, proprietà che consentano di definire la posizione (attributi x e y) e le dimensioni (width e height) degli elementi.
Esattamente come avviene per i documenti HTML, anche nei documenti SVG i selettori CSS permettono di puntare agli elementi con classi o id. Lo stesso quadrato dell'esempio precedente, infatti, può essere generato dal codice che segue:
<style>
<![CDATA[
.square{
fill: #cd3512;
fill-opacity: 1;
stroke: #000000;
stroke-width: 4;
stroke-opacity: 1;
}
]]>
</style>
<rect
width="100"
height="100"
x="230"
y="10"
class="square" />Come già detto nella prima parte della guida, l'elemento img non permette di assegnare stili agli oggetti SVG tramite selettori CSS. Tutti gli altri elementi – ossia object, embed e iframe – vengono, invece, visualizzati correttamente.
L'elemento img non permette di assegnare stili agli oggetti SVG tramite selettori CSS
Si faccia attenzione a collocare le dichiarazioni CSS nello stesso documento in cui vengono definiti gli elementi SVG, e non nel documento HTML in cui questi ultimi vengono inclusi. Se si dovesse preferire includere i fogli di stile nel documento HTML, allora diventa necessario inserire oggetti gli SVG in modalità inline nel documento principale.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 template</title>
<style>
.square{
fill: #cd3512;
fill-opacity: 1;
stroke: #000000;
stroke-width: 4;
stroke-opacity: 1;
}
</style>
</head>
<body>
<!-- in un documento HTML5 la proprietà xmlns non è necessaria -->
<svg width="600px" height="200px">
<rect width="100" height="100" x="230" y="20" class="square" />
</svg>
</body>
</html>Gli oggetti possono essere raggruppati all'interno di un elemento g, in modo che condividano le stesse proprietà grafiche:
<g style="fill: #cd3512; fill-opacity: 1; stroke: #000000; stroke-width: 4; stroke-opacity: 1">
<rect
width="100"
height="100"
x="120"
y="10" />
<circle
cx="60"
cy="60"
r="50" />
</g>Il risultato è mostrato nell'immagine che segue.
Le proprietà
Le proprietà CSS degli oggetti SVG sono sostanzialmente diverse dalle proprietà degli elementi HTML e vengono raggruppate, in base alla funzione, in:
- Proprietà visive, che definiscono l'aspetto prettamente grafico di un elemento: colore di sfondo, colore e spessore delle linee, stili delle linee;
- Proprietà del testo, come tipo, stile e dimensione del carattere;
- Proprietà che influenzano la resa grafica, come l'area di ritaglio, le maschere o i filtri.
La documentazione del W3C fornisce l'elenco completo delle proprietà SVG1 ed SVG2, suddivise per tipologia (font, testo, proprietà visive, ecc.).
I selettori
Per puntare agli SVG, oltre ai selettori di elementi, di classe e di id, si possono utilizzare la maggior parte dei selettori CSS, come le pseudo-classi dinamiche :hover, :active e :focus e tutte le pseudo-classi disponibili in CSS2.
Nell'esempio che segue, si sfrutta la pseudo-classe :hover per cambiare i colori di un cerchio al passaggio del mouse:
<style>
circle{
fill: #cd3512;
stroke: #000000;
stroke-width: 4;
}
circle:hover{
fill: #FF0000;
stroke: #0000FF;
}
</style>
<circle
cx="60"
cy="60"
r="50" />Ma non è tutto. SVG può sfruttare le funzionalità più recenti di CSS3, come le animazioni, le transizioni e le trasformazioni.