Introduzione alla grafica vettoriale con SVG

di , in HTML5,


Questo articolo è tratto dal capitolo 4 ("Grafica avanzata con SVG e Canvas") del libro HTML5 Espresso, di Daniele Bochicchio, Cristian Civera, Matteo Casati, Riccardo Golia, Stefano Mostarda (Hoepli, 2011)

Acquista subito la tua copia ad un prezzo vantaggioso!

Oltre alle immagini bitmap, rappresentate principalmente dai formati compressi come JPEG, GIF e PNG, da diversi anni ormai si affiancano le immagini vettoriali, la cui caratteristica principale è di non essere formate da un insieme di pixel, bensì da informazioni che ne determinano l’aspetto.

In pratica, se una linea rossa è in una bitmap un insieme di n pixel, ognuno dei quali formati 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 da x1,y1 a x2,y2.

Questa sostanziale differenza offre un importante beneficio: possiamo scalare o trasformare l’immagine senza perderne qualità. Una bitmap invece richiede algoritmi più o meno efficienti per inventare i pixel e fornire un’immagine scalata ma che, in genere, determinano sbavature e perdita di definizione. In un’immagine vettoriale quindi non è la dimensione della figura a determinare il peso del file, ma sono 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 fornire uno standard per la rappresentazione di immagini vettoriali, non solo per l’uso destinato al web. La prima versione raccomandata 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. Cerchiamo quindi di capire qual è l’idea di SVG e quali sono le caratteristiche principali della versione 1.1, implementata dalla maggior parte dei browser.

Un primo esempio di file SVG

Per iniziare, creiamo un file con estensione .svg e inseriamo il markup dell’esempio 4.1, che rappresenta un rettangolo rosso.

Esempio 4.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.
  • Contiene gli elementi di disegno e di testo che rappresentano l’immagine.
  • I tag, in modo molto simile all’HTML, sono auto descrittivi e rendono comprensibile il markup, anche aprendo il file con un editor di testo.

L’uso della sintassi XML fa sì che il documento possa essere trattato con molteplici strumenti anche più evoluti oppure designer dedicati alle immagini vettoriali, come Adobe Illustrator, Corel Draw o Open Office, oppure strumenti in grado di esportare in SVG, come Microsoft Visio.

Sempre grazie alla sintassi XML, un documento SVG gode degli stessi benefici di una pagina HTML, perché può essere indicizzato dai motori di ricerca (cosa che i più diffusi spider già fanno) e dà significato agli elementi, poiché questi possono avere un id, contenuti testuali e metadati.

Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

Introduzione alla grafica vettoriale con SVG 1010 5
| Condividi su: Twitter, Facebook, LinkedIn, Google+

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti