Was ist der Unterschied zwischen den Elementen Canvas und SVG?

canvas — Rasterbild, das in Echtzeit mit der JS-API gezeichnet wird. Wird pixelgenau gesteuert. Wird für Spiele, Grafiken, Datenanimationen verwendet.

SVG — Vektorbilder, die in XML beschrieben werden. Skalieren ohne Qualitätsverlust. Werden mit Objekten (Linien, Kurven) gesteuert. Wird für Logos, Symbole, Illustrationen verwendet. Ideal für responsive Design.

Vergleich Canvas und SVG:

Eigenschaft	Canvas	SVG
Grafiktyp	Raster (Pixel)	Vektor (basierend auf XML)
Zeichnung	Mit JavaScript API	In XML beschrieben, vom Browser gerendert
Steuerung	Steuert einzelne Pixel	Steuert Objekte (Linien, Formen etc.)
Skalierung	Verliert bei Vergrößerung Qualität	Skalierbar ohne Qualitätsverlust
Interaktivität	Zusätzliche Logik für Klicks notwendig	Eingebaut auf Objektebene (über DOM)
Leistung	Besser für komplexe, dynamische Szenen	Besser für statische oder weniger komplexe Szenen
Zugänglichkeit	Schwer zu gewährleisten	Eingebaut (über Attribute und DOM)
Anwendungen	Spiele, komplexe Animationen, Datenvisualisierung	Logos, Symbole, Illustrationen, Diagramme