HTML 5 Canvas vs. SVG

Canvas und SVG erlauben es, Grafiken im Browser zu erstellen, aber sie sind grundlegend unterschiedlich.

SVG

SVG ist eine Sprache zur Beschreibung von 2D-Grafiken, die XML verwendet.

SVG basiert auf XML, was bedeutet, dass jeder Element im SVG-DOM verfügbar ist. Sie können JavaScript-Ereignisverarbeiter für ein Element hinzufügen.

In SVG wird jede gezeichnete Grafik als Objekt betrachtet. Wenn sich die Attribute eines SVG-Objekts ändern, kann der Browser die Grafik automatisch neu darstellen.

Canvas

Canvas zeichnet 2D-Grafiken über JavaScript.

Canvas wird zeixelig gerendert.

In der Canvas wird eine einmal gezeichnete Grafik nicht weiter vom Browser beachtet. Wenn sich ihre Position ändert, muss die gesamte Szene neu gezeichnet werden, einschließlich aller möglicherweise von der Grafik überdeckten Objekte.

Vergleich von Canvas und SVG

Die nachstehende Tabelle zeigt einige Unterschiede zwischen Canvas und SVG.

Canvas

  • Abhängig von der Auflösung
  • Ereignisverarbeiter nicht unterstützt
  • Schwache Textrenderungsfähigkeit
  • Kann Ergebnisse in den Formaten .png oder .jpg speichern
  • Am besten geeignet für Spiele, bei denen viele Objekte häufig neu gezeichnet werden

SVG

  • Abhängig von der Auflösung
  • Unterstützt Ereignisverarbeiter
  • Am besten geeignet für Anwendungen mit großen Renderebenen, wie z.B. Google Maps
  • Hohe Komplexität verlangsamt die Rendergeschwindigkeit (jede Anwendung, die den DOM übermäßig verwendet, ist nicht schnell)
  • Nicht geeignet für Spieleanwendungen