Das SVG Element

Die Abkürzung SVG steht für Scalable Vector Graphics und ermöglicht die Einbindung von Grafiken mithilfe von XML. Da wir mit der Syntax von HTML5 vertraut sind, ist die Erstellung von Grafiken mit diesem Element kinderleicht.

  • Html
  • Ergebnis
<svg width="400" height="110"> <rect width="300" height="100" style="fill: red;"> </svg>

Im obigen Beispiel definieren wir ein <svg></svg> Element in der Größe 300x100. Mit dem leeren Element <svg> definieren wir ein rotes Rechteck in den Größen 300x100.

Das gesamte Spektrum des <svg></svg> Elements hier abzubilden, würde den Rahmen sprengen und wird in einem separaten Tutorial besprochen.

Das Canvas Element

Wesentlich weiter verbreitet und öfter genutzt wird das <canvas></canvas> Element. Der entscheidende Unterschied zum <svg></svg> Element besteht darin, dass wir die Grafiken mithilfe von Javascript erstellen müssen. Allerdings haben wir damit auch eine viel größere Auswahl an Möglichkeiten und können sogar 3D-Grafiken mithilfe der WebGL API erstellen.

  • Html
  • Javascript
  • Ergebnis
<html> <head><title>Canvas Element</title></head> <body> <canvas id="canvas_id" width="600" height="200"></canvas> <script> //Javascript Code </script> </body> </html>
var Canvas = document.getElementById("canvas_id"); var Context = Canvas.getContext("2d"); Context.beginPath(); Context.moveTo(100, 150); Context.lineTo(450, 50); Context.stroke();

Das obige Beispiel definiert ein <canvas></canvas> Element in den Größen 600x200 und malt einen diagonalen Strich hinein. Der Code dafür ist in Javascript geschrieben und wird hier nur in kürze zusammengefasst:

Ein jedes <canvas></canvas> Element hat ein sogenannten Context mithilfe dessen es beschrieben werden kann. Dafür sind die ersten beiden Zeilen des Javascript-Codes zuständig. Das Objekt context beinhaltet viele Funktionen, darunter:

  • beginPath() : Um den Browser darauf vorzubereiten, dass ein Strich gezogen werden soll.
  • moveTo() : Um den Startpunkt des Striches zu definieren.
  • lineTo() : Um den Endpunkt des Striches zu definieren.
  • stroke() : Um den Strich mit seinen Start- und Endpunkten zu ziehen.

Das gesamte Spektrum des <canvas></canvas> Elements hier abzubilden wäre zu viel des Guten, deswegen gibt es dafür ein separates Tutorial.

Benötigt werden dafür Kenntnisse in Javascript.