Corso SVG

L'obiettivo del tutorial HTML SVG è aiutarti a iniziare rapidamente e utilizzare SVG, e in futuro puoi anche utilizzare questo tutorial come riferimento rapido. Qui cercheremo di fornire più esempi di SVG possibili e coprire una vasta gamma di argomenti, in modo da poterti padroneggiare rapidamente l'uso di SVG

Introduzione a SVG

SVG è l'acronimo di Scalable Vector Graphics. È un formato grafico in cui le forme sono specificate tramite XML. Poi il visualizzatore SVG presenta l'XML. Oggi, la maggior parte dei browser web può visualizzare SVG, proprio come possono visualizzare PNG, GIF e JPG.
Gli utenti di Internet Explorer 8 (e versioni precedenti) potrebbero dover installare Adobe SVG Viewer per visualizzare SVG nel browser. IE 9 +, Chrome e Firefox supportano nativamente SVG.
SVG è utilizzato per grafica vettoriale bidimensionale
Se non sei sicuro che SVG sia adatto a te o al tuo progetto, puoi rapidamente esplorare la pagina degli esempi SVG per comprendere rapidamente le funzionalità di SVG.

Editor SVG online - È possibile modificare SVG online, e SVG può essere convertito in codice sorgente SVG

Esempi completi SVG　 - Esempi di base di SVG, che possono aiutarti a familiarizzare con SVG rapidamente

Manuale di riferimento SVG - Raccolta degli elementi comuni utilizzati in SVG e delle loro proprietà e metodi di utilizzo

SVG è utilizzato per grafica vettoriale

Come formato di grafica vettoriale, SVG è particolarmente utile per i tipi di grafici vettoriali, ad esempio:

1. Grafici bidimensionali nel sistema di coordinate XY

2. Grafici a colonne, grafici a torta ecc.

3. Icone e loghi estensibili per web, tablet e applicazioni mobili e webapp

4. Disegni e progetti architettonici

5. Ecc.

Come formato di grafica vettoriale, le forme da visualizzare sono memorizzate come strutture vettoriali o simili. In altre parole, come numeri. Non in pixel.

“Scalabile” significa che lo spettatore può ingrandire o ridurre l'immagine SVG senza perdere qualità. È possibile farlo perché i grafici sono definiti in modo digitale e non in pixel. Ingrandire o ridurre l'immagine SVG significa semplicemente moltiplicare o dividere i numeri che definiscono la forma SVG.

Nonostante sia possibile incorporare grafici bitmap all'interno di immagini SVG, SVG non è la scelta ideale per immagini bitmap come foto, film ecc. È un metodo conveniente per disegnare forme o testi su immagini bitmap.

SVG è particolarmente adatto per la generazione di immagini/grafici/diagrammi

SVG è un formato XML (formato testuale), facile da generare da Servlet, JSP, ASP.NET, PHP e altre tecnologie web applicative. Questo lo rende particolarmente adatto per grafici e diagrammi generati al computer. È interessante notare che di solito è necessario generare il tipo di grafico più adatto per SVG (grafici, diagrammi, ecc.) all'interno dell'applicazione web. Questo rende SVG ancora più adatto per la generazione di grafici e diagrammi.

Scrivere uno script SVG

Puoi modificare l'immagine SVG generata dal browser utilizzando JavaScript. Questo ti permette di utilizzare SVG per dimostrazioni più dinamiche, persino per piccoli giochi.

Informazioni su questo tutorial

L'obiettivo di questo tutorial è aiutarti a entrare rapidamente nel mondo dell'SVG e a utilizzarlo come riferimento rapido in futuro. Cercheremo di coprire il maggior numero possibile di SVG, ma non intendiamo coprire ogni singolo punto della specifica SVG. Una volta che avrai una buona comprensione delle basi, potrai facilmente consultare la specifica SVG per argomenti più avanzati o casi speciali.