Grafici con Canvas e SVG - HTML5 con CSS e JavaScript - page 208

Ora che sappiamo come dichiarare e scrivere un SVG, vediamo quali sono gli elementi
più comuni che possiamo usare. Sebbene sia più produttivo impiegare strumenti di disegno
e, per certi versi, potremmo ignorarne le specifiche, è utile conoscere (almeno in termini
generici) cosa serve per generare immagini che non siano statiche, ma che possano essere
dinamiche.
Infatti, attraverso elaborazioni server con strumenti come ASP.NET , PHP o Java, pos-
siamo generare del markup SVG secondo informazioni ottenute da servizi o da database,
come già oggi facciamo con l'HTML.
Cominciamo quindi dal capire quali sono le primitive di disegno che possiamo utiliz-
zare.

Disegnare con gli shape

Gli shape sono le primitive di disegno con le quali possiamo rappresentare una figura e,
molto spesso, richiedono una combinazione tra di loro per arrivare a generare un'immagine
che possa diventare abbastanza realistica da avvicinarsi a una bitmap. Ricordiamoci, co-
munque, che non è certamente l'intento di SVG quello di poter rappresentare una fotogra-
fia.

Abbiamo già conosciuto il tag rect , che mediante le proprietà x , y , width e height
permette di indicare la posizione dell'angolo sinistro e le dimensioni del rettangolo. Le uni-
tà di misura supportate da SVG sono le medesime di CSS e HTML5, perciò un valore “5”
significa 5 pixel, ma possiamo specificare molteplici unità di misura: pt , pc , mm , cm , in
e % .
SVG supporta gli elementi di disegno classici, come ellissi, cerchi o poligoni. Nella ta-
bella 10.1 abbiamo riportato i principali tag, con alcune note sull'utilizzo degli attributi.

Elemento Descrizione Attributi

x , y , width e height
per dimensionare;
rx e ry per arrotondare i
vertici.

Disegna un rettangolo, eventualmente con
i vertici arrotondati.

<rect>

cx e cy per indicare il
centro;
r per indicare il raggio.

Disegna un cerchio.

<circle>

cx e cy per indicare il
centro;

<ellipse> Disegna un ellisse.