Wat is het verschil tussen de elementen canvas en SVG?

canvas — rasterafbeelding, wordt in realtime getekend met behulp van de JS API. Wordt pixel voor pixel bestuurd. Gebruikt voor games, grafieken, datavisualisatie.

SVG — vectorafbeelding, beschreven in XML. Schaalbaar zonder kwaliteitsverlies. Wordt bestuurd door objecten (lijnen, krommen). Gebruikt voor logo's, pictogrammen, illustraties. Perfect voor responsief ontwerp.

Vergelijking Canvas en SVG:

Kenmerk	Canvas	SVG
Grafiektype	Raster (pixels)	Vector (gebaseerd op XML)
Tekening	Met JavaScript API	Beschreven in XML, gerenderd door browser
Besturing	Controleert individuele pixels	Controleert objecten (lijnen, vormen, etc.)
Schaalbaarheid	Verliest kwaliteit bij vergroten	Schaalbaar zonder kwaliteitsverlies
Interactiviteit	Extra logica nodig voor klikken	Ingebouwd op objectniveau (via DOM)
Prestaties	Beter voor complexe, dynamische scènes	Beter voor statische of minder complexe scènes
Toegankelijkheid	Moeilijk te garanderen	Ingebouwd (via attributen en DOM)
Toepassingen	Spellen, complexe animaties, datavisualisatie	Logo's, pictogrammen, illustraties, grafieken