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 einem 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 mit JavaScript.

Canvas wird zeixelig gerendert.

In Canvas wird eine Grafik einmal gezeichnet und erhält thereafter keine Aufmerksamkeit mehr vom Browser. 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
  • Unterstützt keine Ereignisverarbeiter
  • Schwache Textrendering-Fä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