Includere i CSS per SVG

Le immagini SVG possono essere create con un semplice editor di testo, proprio come i documenti HTML. E questa non è la sola analogia tra SVG e HTML: in entrambi i casi possiamo modificare le caratteristiche grafiche degli elementi attraverso i fogli di stile.

L’analogia va comunque specificata. Infatti, il rapporto tra HTML e CSS è chiaro e definito, ed è il rapporto tra struttura e presentazione della pagina. Nel caso di SVG, invece, il rapporto non è netto, dato che la funzione del linguaggio vettoriale è quello di creare elementi grafici, che normalmente vengono stilizzati attraverso gli attributi degli elementi. Eppure, dall’interzione delle due tecnologie, possono nascere opportunità inaspettate.

Fogli di stile inline

Esattamente come avviene per i documenti HTML, anche per SVG i fogli di stile possono essere esterni o interni al documento. All’interno del documento, in modalità inline, le proprietà CSS vengono dichiarate tramite l’attributo style:

<circle
	cx="60" cy="60" r="50"
	style="fill: #cd3512; fill-opacity: 1; stroke: #000000; stroke-width: 4; stroke-opacity: 1" />

Fogli di stile interni

Sempre all’interno del documento SVG, le proprietà possono essere dichiarate all’interno dell’elemento style:

<style>
<![CDATA[
.circle {
	fill: #cd3512;
	fill-opacity: 1;
	stroke: #000000;
	stroke-width: 4;
	stroke-opacity: 1;
}
]]>
</style>

NOTA: Il W3C raccomanda di inserire sempre il costrutto CDATA, dato che le dichiarazioni CSS possono contenere caratteri come >, che possono generare conflitti con il parser SVG.

Fogli di stile esterni

Infine, gli stili possono essere dichiarati in un file .css esterno. In questo caso, il foglio di stile va incluso nel file SVG tramite l’istruzione xml-stylesheet, da collocare prima dell’elemento svg:

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 1000 500">