Was ist der Unterschied zwischen Canvas und SVG?

Canvas ist eine Raster-API zum Zeichnen von Grafiken in Echtzeit mit JavaScript. Es zeichnet Pixel auf die Leinwand.

SVG (Skalierbare Vektorgrafik) ist ein XML-Format zur Beschreibung von zweidimensionalen Vektorgrafiken. Es beschreibt Formen, Linien, Text usw.

Hauptunterschiede:

• Grundlage: Canvas — Pixel, SVG — Vektoren (mathematische Beschreibungen).
• Zeichnungsmethode: Canvas — imperativ (Zeichenbefehle), SVG — deklarativ (Elementbeschreibungen).
• Skalierung: Canvas skaliert mit Qualitätsverlust (Raster), SVG skaliert ohne Qualitätsverlust (Vektor).
• Leistung: Canvas eignet sich besser für dynamische Grafiken, Animationen, Spiele. SVG ist besser für statische, komplexe Grafiken, Diagramme.
• Zugänglichkeit: SVG-Elemente sind über das DOM zugänglich, können mit CSS und JavaScript modifiziert werden. Canvas zeichnet auf Pixelbasis, einzelne Elemente sind nicht zugänglich.
• Interaktivität: Interaktivität in SVG ist auf Elementebene integriert. Bei Canvas muss man Maus-/Touch-Events verfolgen und feststellen, auf welche Pixel sie treffen.
• Format: Canvas ist ein <canvas>-Element und eine JavaScript-API. SVG ist ein eigenständiges XML-Format, das direkt in HTML eingebettet oder als Datei (.svg) verwendet werden kann.

Beispiel für die Erstellung eines Kreises:

// Canvas
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();

<!-- SVG -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>