Prima di iniziare a descrivere in dettaglio gli elementi grafici di SVG, è utile spendere alcune parole su come questi elementi vengono posizionati all'interno dell'area di disegno, chiamata SVG Canvas (tela SVG).
SVG mette a disposizione una tela virtualmente infinita, ma a livello pratico noi abbiamo a disposizione una zona rettangolare di dimensione finita entro la quale disegnare la nostra immagine.
Viewport
La regione rettangolare prende il nome di SVG Viewport e la sua grandezza viene definita andando ad assegnare opportuni valori agli attributi width e height del tag <svg>.
Nel caso dell'esempio del capitolo precedente noi abbiamo definito una viewport di grandezza 300x200 pixel entro la quale disegnare i nostri elementi grafici.
<svg width="300" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">L'unità di misura delle grandezze espresse in SVG è il pixel, quindi ad esempio il valore 300 dell'attributo width viene interpretato come 300 pixel. In SVG comunque si possono usare diverse unità di misura a seconda delle proprie necessità e gli identificativi delle unità di misura supportate sono: em, ex, px, pt, pc, cm, mm e %.
Quindi se avessimo voluto creare una viewport larga 30 cm ed alta 20 cm avremmo dovuto scrivere:
<svg width="30cm" height="20cm"> oppure <svg width="300mm" height="200mm">Una volta definita la grandezza della nostra immagine SVG, adesso vediamo come posizionare gli elementi grafici all'interno della tela SVG nella posizione desiderata.
Il sistema di coordinate
Gli elementi grafici vengono posizionati all'interno dello spazio di disegno specificandone le coordinate x e y rispetto al sistema di coordinate dell'immagine SVG. Nella figura è rappresentato il sistema di coordinate dell'immagine SVG del nostro esempio.
Sistema di coordinate dell'immagine SVG
L'immagine ha una dimensione di 300x200 pixel e l'origine del sistema di coordinate è nell'angolo in alto a sinistra. Quindi:
- Il punto rosso A identifica l'origine del nostro sistema di riferimento ed ha coordinate x=0, y=0.
- Il punto blu B identifica invece l'estremo superiore destro della nostra immagine ed ha coordinate
x=300, y=0. - Il punto verde C indica l'estremo inferiore sinistro e le sue coordinate sono
x=0, y=200 - Il punto nero D indica l'estremo inferiore desto della nostra immagine e le sue coordinate sono
x=300, y=200.
Facciamo ora qualche esempio di posizionamento per chiarire ancor meglio e per questo introduciamo l'elemento <rect> che rappresenta un rettangolo. Analizzeremo questo tag con più cura nel corso della guida. Intanto lo utilizziamo per disegnare un piccolo quadrato rosso di dimensione 10 pixel proprio al centro della nostra immagine.
Ecco cosa aggiungeremo al nostro file SVG:
<rect x="145" y="95" width="10" height="10" style="fill:red"/>Abbiamo disegnato un rettangolo di larghezza e di altezza 10 pixel (un quadrato) con l'estremo sinistro superiore posizionato alle coordinate x=145, y=95. Questo fa sì che il nostro quadrato venga disegnato nel centro della nostra viewport di dimensione 300x200 pixel.
viewBox
SVG permette di personalizzare il sistema di coordinate della nostra tela SVG mediante l'utilizzo dell'attributo viewBox del tag <svg>. Grazie all'uso di questo attributo possiamo assegnare il valore degli estremi superiore ed inferiore della nostra rettangolare dove stiamo disegnando.
Per vedere come funziona l'attributo viewBox, modifichiamo l'esempio precedente con:
<svg width="300" height="200" viewBox="0 0 1000 500">Adesso il nuovo sistema di riferimento è quello mostrato in figura:
Nuovo sistema di riferimento
- Il punto rosso A, ovvero l'origine del nostro sistema di riferimento, avrà sempre coordinate
(x,y)=(0, 0) - Il punto blu B, che rappresenta l'estremo superiore destro, adesso avrà coordiante
(x,y)=(1000, 0). - L'estremo inferiore sinistro (il punto verde C) adesso avrà coordinate
(x,y)=(0, 500) - L'estremo inferiore destro (il punto nero D) avrà coordinate
(x,y)=(1000, 500).
Da questo esempio appare chiaro come si possa utilizzando l'attributo viewBox modificare il valore delle coordinate degli estremi della nostra immagine.
Se volessimo adesso disegnare nuovamente un quadrato nel centro della nostra immagine dovremmo scrivere:
<rect x="495" y="245" width="10" height="10" style="fill:red"/>Può capitare a volte che un'immagine a cui noi abbiamo assegnato una certa grandezza (ad esempio 300x200 pixel) venga visualizzata all'interno di una pagina web con uno spazio differente (ad esempio 200x200 pixel). In questo caso l'immagine viene scalata in modo da essere visualizzata nella nuova viewport e questo può alterarne la corretta visualizzazione.
Per controllare lo scale (ridimensionamento) dell'immagine esiste l'attributo preserveAspectratio del tag <svg>. I possibili valori sono: none, xMinYMin, xMidYMin, xMaxYMin, xMinYMid, XMidYMid, xMaxYMid, xMinYMax, xMidYMax, xMaxYMax.
Ad esempio scrivendo:
<svg width="300" height="200" viewBox="0 0 300 200" preserveAspectratio="xMinYMin">si fa in modo che l'immagine sia scalata in maniera uniforme e che il valore più piccolo della x della y della viewBox vengano allineati al valore più piccolo della x e della y della viewport. In questo modo l'estremo superiore sinistro della nostra immagine coinciderà sempre con l'estremo superiore sinistro dello spazio di visualizzazione.
