HTML and CSS Reference
In-Depth Information
10
Grafici con Canvas e SVG
Nei capitoli precedenti abbiamo affrontato sostanzialmente caratteristiche legate al markup
e all'indicazione tramite tag delle tipologie di contenuti; abbiamo visto come, mediante stili
e CSS, possiamo personalizzarne l'aspetto in molteplici modi per dare forma al layout che
desideriamo per il nostro sito internet, e come JavaScript aggiunga l'interattività.
Tutto questo, però, può non bastare, perché il testo e il CSS possono non riuscire a for-
nire informazioni e allo stesso tempo dare un look piacevole o significativo. Per colmare
questa mancanza si ricorre spesso all'uso di immagini in formato JPEG o PNG ma, con
HTML5 , sono state introdotte due nuove tecnologie che ci permettono di realizzare elemen-
ti grafici sia con un approccio vettoriale, tramite SVG , sia con un approccio orientato alle
bitmap, tramite canvas .
L'introduzione di ulteriori elementi di markup si è resa quindi necessaria per eliminare
i difetti delle immagini compresse. Con SVG possiamo infatti ottenere immagini che non
perdono mai di qualità, mentre con il canvas disponiamo di una superficie di disegno dove
lavorare liberamente attraverso scripting, godendo di ottime prestazioni.
In questo capitolo daremo quindi un'infarinatura su queste due tecnologie, applicandole
a esempi pratici, così da capire quali possano essere la loro utilità e gli ambiti di applicazio-
ne.
Grafica vettoriale con SVG
Oltre alle immagini bitmap, rappresentate principalmente dai formati compressi come JPEG,
GIF e PNG, ci sono le immagini vettoriali, la cui caratteristica principale è di non essere for-
mate da un insieme di pixel, bensì da informazioni che ne determinano l'aspetto, una volta
effettuato il rendering.
 
 
 
Search WWH ::




Custom Search