Introduzione alla grafica vettoriale con SVG
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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Ottimizzazione dei block template in Angular 17
Creare una libreria CSS universale: Clip-path
Gestione dei nomi con le regole @layer in CSS
Sfruttare al massimo i topic space di Event Grid MQTT
Usare il colore CSS per migliorare lo stile della pagina
Implementare l'infinite scroll con QuickGrid in Blazor Server
.NET Conference Italia 2024
Utilizzare Tailwind CSS all'interno di React: installazione
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Utilizzare politiche di resiliency con Azure Container App
Gestione degli stili CSS con le regole @layer
Eseguire query per recuperare il padre di un record che sfrutta il tipo HierarchyID in Entity Framework
Top Ten Articoli
- Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Le novità di Blazor in .NET 6.0
di Morgan Pizzini - Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Le novità di ASP.NET Core 5
di Marco De Sanctis
Articoli via e-mail
Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!
In primo piano
I più letti di oggi
In evidenza
- Eseguire script pre e post esecuzione di un workflow di GitHub
- Creare una libreria CSS universale: Cards
- Migliorare l'organizzazione delle risorse con Azure Policy
- Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
- Leggere la posta usando il protocollo IMAP tramite la libreria MailKit
- Eseguire una ricerca avanzata per recuperare le issue di GitHub
- Creare una libreria CSS universale: Clip-path
- Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database