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

In pratica, se una linea rossa è in una bitmap un insieme di n pixel, ognuno dei quali for-
mato solitamente da 32bit per i rispettivi quattro canali di colore (alpha, red, blue, green),
in un'immagine vettoriale è presente un'informazione (a seconda della tipologia di file) che
indica una linea di colore rosso che va dalle coordinate x1,y1 a quelle x2,y2 .
Questa sostanziale differenza offre un importante beneficio: possiamo trasformare
l'immagine senza perdita di qualità . Una bitmap, invece, richiede algoritmi più o meno
efficienti per ricostruire i pixel e fornire un'immagine scalata: in genere, queste operazioni
determinano sbavature e perdita di definizione.
In un'immagine vettoriale, quindi, non è la dimensione della figura a determinare il pe-
so del file, ma la complessità della figura e l'efficienza del linguaggio utilizzato. In molti
contesti, infatti, un'immagine vettoriale è più leggera rispetto a una bitmap.
Il formato SVG, acronimo di Scalable Vector Graphics , è stato quindi creato per for-
nire uno standard per la rappresentazione di immagini vettoriali, non solo per l'uso desti-
nato al Web. La prima versione definita dal W3C è del 2001 e non ha subito significativi
cambiamenti, ma piuttosto, come spesso succede con gli standard, un'integrazione della
documentazione per chiarire meglio alcuni comportamenti che i viewer (visualizzatori in
grado di supportare SVG) devono mantenere.
L'attuale versione è la 1.1 Second Edition e al momento della stesura del libro è in
draft la versione 2.0, ma è ancora acerba e non supportata da nessun browser.
Per iniziare, creiamo un file con estensione .svg e inseriamo il markup dell'esempio
10.1 , che rappresenta un rettangolo rosso.
Esempio 10.1
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="200"
height="100">
<rect fill="red" x="10" y="10" width="180" height="80" />
</svg>
Dall'esempio possiamo subito notare alcune caratteristiche:
il documento è basato sulla sintassi XML e ne osserva le regole;
la root di un documento è il tag svg , che determina l'area dell'immagine attraverso
gli attributi width e height ;