La grafica vettoriale è un metodo per comunicare una serie di forme, coordinate e percorsi al relativo contesto di rendering. Sono un insieme di istruzioni su come disegnare un'immagine. Quando l'immagine viene ridimensionata, l'insieme di punti e linee che rappresenta vengono ridisegnati in scala. Una curva liscia tra due punti verrà ridisegnata in modo altrettanto fluido a qualsiasi dimensione, in modo simile al modo in cui un bordo definito da CSS in un elemento HTML viene ridisegnato quando l'elemento viene ridimensionato nell'area visibile.
Scalable Vector Graphics (SVG) è un linguaggio di markup basato su XML sviluppato dal W3C. È un formato di immagine vettoriale progettato per il Web moderno.
Qualsiasi software di progettazione dedicato all'editing di artwork vettoriali ti consentirà di esportare un'immagine come SVG. Tuttavia, poiché si tratta di un linguaggio di markup standardizzato e leggibile, il file SVG può anche essere creato e modificato con qualsiasi software di editing di testo, indipendentemente dal software utilizzato per crearlo, anche se ciò diventa rapidamente irrealistico per immagini di qualsiasi complessità effettiva. Il file SVG può avere uno stile CSS oppure contenere JavaScript che crea comportamenti e interazioni nelle immagini stesse.
Al di là dell'evidente richiamo per designer e sviluppatori, il formato SVG è anche un formato incredibilmente potente in termini di esperienza utente finale. Le informazioni descrittive contenute in un'origine SVG sono spesso molto compatte rispetto alle informazioni basate sulla griglia di pixel più prescrittive dei formati di immagini raster, nel caso di forme semplici, per semplificare in qualche modo la differenza tra dire al browser "disegna una linea rossa di 1 pixel tra 1 x 1 e 1 x 5" e "1 x 1 è un pixel rosso. 1 x 2 è un pixel rosso. 1 x 3 è un pixel rosso. 1 x 4 è un pixel rosso. 1 x 5 è un pixel rosso." Il rovescio del lavoro è che la natura descrittiva di un file SVG richiede una maggiore interpretazione da parte del browser. Per questo motivo, i file SVG complessi possono essere più impegnativi da visualizzare. Allo stesso modo, un'immagine molto complessa potrebbe significare un insieme dettagliato di istruzioni e grandi dimensioni di trasferimento.
Potrebbe essere necessario eseguire alcuni tentativi prima di poter riconoscere immediatamente l'origine dell'immagine candidata come migliore fornita da SVG anziché come un formato raster convenzionale. Tuttavia, esistono alcune linee guida: gli elementi dell'interfaccia come le icone sono quasi sempre serviti correttamente dal formato SVG. Un'opera d'arte con linee nitide, colori a tinta unita e forme chiaramente definite è probabilmente una valida candidata per il formato SVG.
Il formato SVG è un argomento enorme: un intero linguaggio di markup concepito per coesistere con l'HTML, con opzioni di stile e funzionalità uniche. Per un'introduzione più dettagliata a SVG, consulta il tutorial su MDN SVG.