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
Sfruttare lo streaming di una chiamata Http da Blazor
Gestire liste di tipi semplici con Entity Framework Core
Usare le collection expression per inizializzare una lista di oggetti in C#
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Usare il versioning con i controller di ASP.NET Core Web API
Miglioramenti agli screen reader e al contrasto in Angular
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Implementare il throttling in ASP.NET Core
Usare un KeyedService di default in ASP.NET Core 8
Reactive form tipizzati con modellazione del FormBuilder in Angular
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Evitare la command injection in un workflow di GitHub
Top Ten Articoli
- Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - 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 - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Utilizzare scene 3D in Windows Presentation Foundation
di Marco Leoncini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - 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
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Disabilitare automaticamente un workflow di GitHub (parte 2)
- Ottimizzazione dei block template in Angular 17
- Utilizzare il trigger SQL con le Azure Function
- Paginare i risultati con QuickGrid in Blazor
- Come EF 8 ha ottimizzato le query che usano il metodo Contains
- Evitare (o ridurre) il repo-jacking sulle GitHub Actions
- Definire stili a livello di libreria in Angular