Grafica vettoriale:
significato, caratteristiche ed esempi

La grafica vettoriale rappresenta le immagini digitali attraverso punti, linee, curve e forme descritti matematicamente. Serve a creare loghi e altri elementi di comunicazione visiva modificabili che possono essere ingranditi o ridotti mantenendo i contorni definiti, per il web e la stampa.

Come funziona la grafica vettoriale?

Pensiamo a un compasso: fissiamo la punta sul foglio e scegliamo quanto aprirlo.

Per descrivere un cerchio il programma può conservare gli stessi riferimenti: dove si trova il centro e quanto dista dal bordo, cioè il raggio. Aggiunge poi il colore interno e le caratteristiche del contorno. Da questi dati ricava la figura da mostrare sullo schermo.

Punti, tracciati e curve di Bézier

Per costruire profili più complessi, come quello di una foglia, si combinano segmenti rettilinei o curvi in un tracciato vettoriale.

Gli estremi dei segmenti sono punti di ancoraggio, detti anche nodi. Nei programmi di grafica, le curve di Bézier si modellano tramite i punti di ancoraggio e le relative maniglie di direzione, che ne controllano andamento e curvatura.

Alla geometria si aggiunge l’aspetto: il riempimento colora l’interno mentre il contorno segue il tracciato. Possiamo così avere un bordo blu e un interno giallo, modificando separatamente i colori e lo spessore del bordo.

Perché le immagini vettoriali si possono ingrandire senza sgranare

Attraverso le descrizioni che abbiamo appena visto, il programma ricostruisce il disegno vettoriale alla dimensione richiesta, ricalcolando le forme. Questa possibilità di cambiare scala mantenendo definiti i contorni si chiama scalabilità.

Sul monitor il disegno viene comunque visualizzato attraverso i pixel che compongono lo schermo, piccoli elementi che riproducono i colori.

A parità di dimensioni, un display con una maggiore densità di pixel può riprodurre contorni più fini: la precisione della descrizione matematica incontra quindi i limiti del dispositivo.

Qual è la differenza tra grafica vettoriale e raster?

Nella grafica raster, detta anche bitmap, si memorizzano invece i colori dei pixel disposti in una griglia. Possiamo immaginarla come un mosaico: ingrandirlo rende più evidenti le tessere senza aggiungere dettagli al soggetto.

Origine e storia della grafica vettoriale

Una tappa decisiva si compì nell’industria automobilistica francese: per produrre la carrozzeria, occorreva tradurre le forme disegnate in istruzioni per le macchine a controllo numerico (che iniziarono ad essere introdotte negli stabilimenti intorno agli anni ’60) indicando i movimenti che gli utensili dovevano eseguire. La descrizione matematica permetteva di conservare la geometria del progetto durante il passaggio dal disegno alla produzione.

Perché si chiama “vettoriale”

La parola “vettoriale” deriva da vettore, dal latino vector, «colui che trasporta». Il matematico William Rowan Hamilton usò il termine in una comunicazione presentata l’11 novembre 1844 all’Accademia Reale Irlandese.

Un vettore può rappresentare uno spostamento: una freccia indica quanto ci si sposta e in quale direzione. L’espressione inglese vector graphics richiama questa descrizione geometrica impiegata per collocare punti e costruire forme.

Le origini: disegno tecnico e curve di Bézier

Per rispondere alle esigenze della produzione automobilistica, nel 1959 il matematico Paul de Casteljau sviluppò alla Citroën un metodo per descrivere matematicamente curve e superfici.

Dal 1960, l’ingegnere Pierre Bézier affrontò indipendentemente lo stesso problema alla Renault. Il nome di Bézier si affermò perché Renault autorizzò la pubblicazione delle ricerche, mentre il lavoro di de Casteljau rimase inizialmente riservato.

Intanto, al Massachusetts Institute of Technology (MIT), il ricercatore Ivan Sutherland studiava come dialogare con il computer, disegnando.

Nella tesi del gennaio 1963 presentò Sketchpad: una penna ottica, puntata direttamente sullo schermo, permetteva di modificare le figure. Spostando il vertice di un poligono, anche i lati collegati si muovevano: il computer conservava le relazioni tra gli elementi del disegno.

Da MacDraw a Illustrator e FreeHand

Con MacDraw (1984) gli utenti Macintosh potevano costruire schemi e planimetrie mantenendo separati gli oggetti del disegno. Era possibile spostare o ridimensionare una figura senza dover rifare le altre: il progetto veniva corretto e ristampato, conservando il resto della composizione.

La stampa poneva un’altra esigenza: riprodurre la stessa pagina con macchine diverse.

Adobe introdusse nel 1984 PostScript, un linguaggio che descriveva testi e immagini indipendentemente dalla stampante. Le curve studiate per le carrozzerie trovarono così un’altra applicazione nei contorni delle lettere e delle illustrazioni.

Ogni dispositivo compatibile ricostruiva la pagina alla propria risoluzione di stampa, cioè con il numero di punti che poteva riprodurre per unità di lunghezza, per esempio lungo un centimetro. Con la stampante LaserWriter di Apple, nel 1985, questa tecnologia contribuì alla diffusione del desktop publishing, la preparazione di pubblicazioni al computer.

Con Adobe Illustrator, pubblicato nel marzo 1987, il grafico poteva modellare le curve sullo schermo mentre il programma generava le istruzioni PostScript per la stampa.

Un anno dopo, nel 1988 arrivò FreeHand, sviluppato da Altsys e commercializzato da Aldus. Il programma passò successivamente a Macromedia, acquisita da Adobe nel 2005; il suo sviluppo fu poi interrotto. Permetteva anche di modificare le figure in anteprima, con i riempimenti già visibili: il grafico ne valutava l’aspetto mentre interveniva sulle forme. Ricordo ancora i primi brividi di entusiasmo quando, nel 2000, esploravo le numerose possibilità di espressione creativa di FreeHand 9.

Dalla grafica per la stampa al web con SVG

La diffusione del World Wide Web pose una nuova esigenza: adattare i disegni a schermi diversi e condividerli fra programmi di produttori differenti.

Il 4 settembre 2001, SVG 1.0, sigla di Scalable Vector Graphics (“grafica vettoriale scalabile”), fu pubblicato come raccomandazione del W3C, il World Wide Web Consortium, che sviluppa standard per il web.

Nei file SVG le forme sono descritte con regole aperte e condivise. Oggi questi file possono essere interpretati dai programmi di navigazione chiamati browser, che mostrano il disegno senza richiedere il software con cui è stato creato.

I vantaggi e i limiti della grafica vettoriale

La possibilità di intervenire sulla struttura del disegno facilita le modifiche. La convenienza del vettoriale dipende però anche dal soggetto: la sua complessità incide sul lavoro necessario per rappresentarlo e sulla quantità di informazioni da conservare.

Modificabilità e riuso degli elementi grafici

Se cambia il colore aziendale, si possono aggiornare gli elementi interessati senza ricostruire la composizione. Riutilizzare gli stessi oggetti nei diversi materiali di comunicazione aiuta a mantenere coerente l’identità visiva del marchio, cioè l’insieme delle scelte grafiche che lo rende riconoscibile.

Il coordinato NASA rende visibile questa esigenza: il marchio deve restare riconoscibile passando da una pubblicazione a un’insegna o a una divisa. Il manuale grafico del gennaio 1976 ne regolava la riproduzione attraverso procedimenti fotografici e griglie per i grandi formati.

Oggi, nel lavoro digitale, un originale vettoriale facilita la preparazione dello stesso disegno per supporti diversi.

Peso dei file e compatibilità

Il peso, cioè lo spazio occupato dal file, dipende soprattutto dalla quantità di informazioni conservate.

Un disegno semplice può richiedere poco spazio anche se stampato molto grande; migliaia di tracciati o immagini raster incorporate possono invece renderlo più pesante di un file raster equivalente.

Anche la compatibilità conta. Una forma semitrasparente lascia vedere quella sottostante; se il formato scelto non gestisce le trasparenze, il programma può conservarne l’aspetto suddividendo le aree sovrapposte in nuove forme e parti composte da pixel.

Questa conversione può ridurre la possibilità di modificare separatamente gli oggetti originali anche quando l’immagine appare identica.

Quanto può essere dettagliata un’immagine vettoriale?

Le forme geometriche possono descrivere anche superfici dall’aspetto realistico. Con le trame sfumate il disegnatore distribuisce punti colorati all’interno di una forma. Il programma calcola passaggi graduali fra quei colori: una zona chiara può così sfumare in una più scura, suggerendo il volume di un oggetto.

Per ricostruire una fotografia, però, occorrerebbe descrivere moltissime variazioni di luce e colore attraverso forme e sfumature. Il lavoro può diventare molto complesso: il raster conserva queste variazioni nei pixel ed è quindi generalmente più adatto al fotoritocco.

Quali sono i principali formati vettoriali?

Un file vettoriale conserva le informazioni geometriche del disegno. Il formato vettoriale stabilisce come registrarle: alcuni formati servono soprattutto a proseguire il lavoro nel programma d’origine, altri facilitano la pubblicazione sul web o lo scambio fra applicazioni.

Un PDF o un SVG è sempre interamente vettoriale?

PDF e SVG possono contenere insieme elementi vettoriali e immagini raster: una fotografia inserita in un SVG conserva i propri pixel. La sola estensione, la sigla dopo il punto nel nome del file, come .svg, non garantisce quindi che ogni elemento sia vettoriale.

PNG, Portable Network Graphics, e JPEG, dal nome del Joint Photographic Experts Group che ha definito lo standard, sono invece formati raster. Un PNG con sfondo trasparente resta quindi un’immagine composta da pixel.

Cosa significa vettorializzare un’immagine

Vettorializzare un’immagine significa ricostruire le forme di un’immagine raster attraverso tracciati con un ricalco manuale o automatico.

Nel secondo caso il software interpreta i contorni e può introdurre imprecisioni o punti superflui. Rinominare il file cambiandone l’estensione non esegue questa trasformazione.

Esportando un disegno in PNG, il software ne produce una copia con un numero definito di pixel: gli oggetti dell’originale diventano parti di un’unica immagine raster. Per modificarli ancora separatamente, con i loro tracciati, occorre conservare il progetto vettoriale.

Quali programmi si usano per la grafica vettoriale?

I software di grafica vettoriale, detti anche editor vettoriali, permettono di creare e modificare gli oggetti del disegno.

Fra questi troviamo Adobe Illustrator, CorelDRAW e Affinity, oltre a Inkscape, gratuito e open source: il suo codice sorgente, cioè le istruzioni del programma, è accessibile e modificabile secondo la licenza.

Anche Adobe Photoshop, usato per il fotoritocco, dispone di forme e tracciati vettoriali, pur lavorando principalmente con immagini raster.

Per visualizzare un file SVG può bastare un browser; per un PDF, un programma di lettura compatibile come Acrobat reader.

Vedere il disegno e modificarne gli oggetti sono operazioni diverse: per spostare una forma conservandone le proprietà serve un editor che interpreti le informazioni contenute nel file.

Esempi di grafica vettoriale

Nel design della comunicazione, il vettoriale trova impiego sia negli elementi funzionali, come i simboli che orientano la navigazione, sia nell’illustrazione d’autore.

Loghi e materiali per la stampa

Il logo identifica visivamente un marchio su supporti diversi. Un logo vettoriale può essere preparato per un biglietto da visita e riutilizzato sull’insegna o sulle confezioni dei prodotti. Il disegnatore ne adatta le dimensioni mantenendo le proporzioni tra gli elementi.

La riconoscibilità dipende però anche dai dettagli: riducendo molto un logo, questi possono diventare difficili da distinguere pur conservando contorni definiti. Una versione semplificata permette allora di adattare il marchio agli spazi più piccoli.

Caratteri tipografici e lettering

Questa adattabilità riguarda anche font e caratteri tipografici. Nella tipografia digitale un font è un file che descrive l’aspetto dei caratteri e permette al computer di riprodurli.

Nei font TrueType, i profili delle lettere sono descritti da segmenti e curve di Bézier, che il sistema riproduce alla dimensione richiesta.

Gli stessi strumenti geometrici possono essere usati nel lettering, il disegno di lettere per una composizione specifica.

Un esempio è il logotipo, un marchio costituito da una scritta le cui lettere possono essere disegnate appositamente.

Icone, mappe e animazioni per il web

Nelle schermate di siti e applicazioni le icone vettoriali possono rappresentare comandi, come la lente d’ingrandimento che indica la ricerca.

In una mappa schematica della metropolitana, invece, linee e simboli aiutano a distinguere percorsi e fermate.

Sul web, SVG permette anche animazioni: un indicatore può cambiare forma per segnalare che un’operazione è in corso.

Illustrazioni vettoriali: il realismo di Yukio Miyamoto

L’arte vettoriale, o vector art, comprende anche immagini dall’aspetto realistico. Nell’illustrazione di un registratore Nagra, Yukio Miyamoto riprodusse le superfici metalliche e i riflessi con tracciati e sfumature di Illustrator.

Nel descrivere il lavoro, precisò di non aver utilizzato immagini bitmap: anche i particolari che sembrano fotografici furono disegnati in vettoriale.