Dal 2001 il consorzio W3C ha messo a disposizione uno standard di nome SVG, acronimo di Scalable Vector Graphics, il cui intento è permettere la definizione di immagini vettoriali attraverso un linguaggio di markup basato su XML.
L'uso delle immagini vettoriali si contrappone a quelle bitmap per via di importanti vantaggi:
- Permette una definizione infinta perché le immagini sono descritte invece di essere rappresentate da punti;
- Essendo basato su markup la figura può essere indicizzata e contenere metadati.
Questo formato è in genere rappresentato dai file .svg e viene trattato principalmente da strumenti di disegno come Adobe Illustrator o CorelDraw. Con l'avvento di HTML5 è stato però introdotto anche la possibilità di incorporare tali file all'interno di una pagina HTML e un nuovo apposito tag svg.
Questo permette di inserire facilmente piccole figure o di interagirvi tramite DOM e linguaggi di scripting, dando soprattutto una spinta ai browser per far sì che implementino questo standard ormai presente da molti anni. Le ultime versioni dei browser sono infatti pressoché allineate alla versione 1.1.
Di seguito ecco quindi un esempio di SVG all'interno di una pagina HTML5 per la visualizzazione di un grafico a torta.
<!DOCTYPE HTML> <html> <head> <title>Esempio</title> </head> <body> <svg width="500" height="450"> <path fill="blue" d="M 310,402 L 213,214 L 326,35 C 454,111 468,319 310,402 z " /> <path fill="red" d="M 3,208 L 213,214 L 326,35 C 202,-46 8,30 3,208 z "/> <path fill="yellow" d="M 3,208 L 213,214 L 311,400 C 177,467 3,380 3,208 z" /> </svg> </body> </html>
Come si può vedere il markup SVG si integra con la struttura DOM di una normale pagina HTML e produce il risultato visibile nella figura.

Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Recuperare automaticamente un utente e aggiungerlo ad un gruppo di Azure DevOps
Ridurre il reflow ottimizzando il CSS
Integrare SQL Server in un progetto .NET Aspire
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Recuperare l'ultima versione di una release di GitHub
Ottimizzare le pull con Artifact Cache di Azure Container Registry
Migliorare i tempi di risposta di GPT tramite lo streaming endpoint in ASP.NET Core
Conoscere il rendering Server o WebAssembly a runtime in Blazor
Gestire progetti NPM in .NET Aspire
Recuperare gli audit log in Azure DevOps
Creare una libreria CSS universale: Immagini
Persistere la ChatHistory di Semantic Kernel in ASP.NET Core Web API per GPT
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- Impersonation di utente per l'esecuzione di codice in una pagina ASP.NET
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!