Grafiken in HTML

HTML bietet die Möglichkeit, sowohl Vektor- als auch Rastergrafiken direkt im Browser zu erstellen. Zwei Hauptmethoden stehen zur Verfügung: <canvas> und <svg>. Sie erfüllen unterschiedliche Zwecke und verwenden unterschiedliche technische Ansätze.

<canvas>-Element

Das <canvas>-Element stellt eine leere Zeichenfläche bereit, auf der Sie mit JavaScript Linien, Formen, Bilder oder Animationen zeichnen können. Die gesamte Darstellung erfolgt programmatisch und wird nicht im DOM gespeichert.

<svg>-Element

SVG (Scalable Vector Graphics) basiert auf XML, wobei Elemente wie <rect> oder <circle> Teil des DOM sind. SVG lässt sich einfach skalieren, mit CSS gestalten und mit JavaScript interaktiv machen.

Canvas vs. SVG

Verwenden Sie <canvas> für schnelle, kontinuierliche Aktualisierungen (z. B. Spiele, Echtzeit-Visualisierungen) und <svg> für statische, interaktive oder vektorbasierte Grafiken. SVG skaliert besser und ist einfacher mit CSS zu gestalten.

Praktische Anwendungsfälle

<svg> wird häufig für Symbole, Logos und Diagramme verwendet. <canvas> eignet sich hervorragend für Spiele, Animationen oder komplexe Datenvisualisierungen. Die Wahl hängt vom jeweiligen Anwendungsfall ab.