Webdesign

Vektorgrafik im Webbrowser: SVG, Canvas und Co.

29. Juli 2008
von

Nachdem sich das auf XML basierende SVG im Web nicht richtig durchsetzen konnte, ist mit dem in HTML 5 eingeführten Canvas-Element ein neuer Versuch gestartet worden um Vektor-Grafiken direkt durch den Browser erstellen und anzeigen zu lassen. Wie man SVG und Canvas Grafiken erstellt und wie nun auch mit dem immer noch am häufigsten anzutreffenden Browser diese Technologie nutzbar gemacht wird, soll hier beschrieben werden.

SVG
SVG ist gescheitert und nun schon wieder ein neuer Versuch 2D-Grafiken im Webbrowser zu implementieren? das wird sich wohl mancher fragen. Das ist jedoch zu kurz gedacht. Während SVG-Grafiken in der XML-Markup-Sprache mit Hilfe von Elementen wie <rect>, <circle> oder <text> in HTML-ähnlicher Form angelegt werden, stellt das in HTML 5 eingeführte <canvas>-Element lediglich das Papier für Zeichenoperationen mit Hilfe von JavaScript-Code bereit. XML-Liebhaber werden SVG, JavaScript-Programmierer eher das Canvas-Element nutzen. Beide Ansätze haben ihre Stärken und Schwächen.

Wie würde man zum Beispiel ein Schachbrett mit 64 Feldern erstellen? Mit Hilfe von SVG wäre das ziemlich umständlich, auf 64-Zeilen SVG-Code würde man 64-mal das rect-Element verwenden und die Farbwerte und XY-Koordinaten variieren. Dazu kämen dann noch 16 text-Elemente für die Beschriftung.

Der SVG-Code für ein Schachbrett: chessboard-svg.html und das funktionierende SVG-Beispiel: chessboard-svg.svg. Sie brauchen einen SVG-fähigen Browser, um sich die Datei ansehen zu können. Der Internet Explorer, auch in der neuesten Version, gehört leider nicht dazu. Sie brauchen für diesen Browser ein separates Plugin.

Wenn Sie neue Dateien erstellen oder kleinere Modifikationen am Aussehen des Schachbrettes machen wollen, zum Beispiel der Feldgröße, werden Sie bei diesem einfachen Beispiel feststellen, dass es ohne die Verwendung eines Programms, welches Grafiken als SVG-Dateien speichern kann, oder die Verwendung einer Programmiersprache zur Erzeugung des SVG-Codes zeitraubend und umständlich ist, die Datei von Hand zu ändern. Dies zeigt, dass SVG ohne Programmierkenntnisse nur begrenzt verwendbar ist.

Canvas
Das Canvas- oder Leinwand-Element wurde von Apple mit seinem neuen Betriebssystem OSX für die Darstellung von Dashboards-Widgets eingeführt und später auch in die Spezifikation von HTML 5 eingeführt. Das Canvas-Element benötigt von Anfang an eine Programmiersprache: JavaScript. Im HTML-Code wird ein <canvas>-Element eingebettet und mit einem id sowie height- und width-Attributen versehen. Im JavaScript-Code wird dann das Canvas-Element ausgelesen und daraus ein Context-Objekt erstellt. Über dieses Context-Objekt werden alle weiteren Zeichenoperationen ausgeführt. Hier ein paraktisches Beispiel aus dem Mozilla Canvas-Tutorial.

Screenshot

 <html> <head> <script type="application/x-javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d");

 ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html>

Browserstatus
Problematisch sowohl bei der Verwendung von SVG als auch des Canvas ist, dass diese vom Internet Explorer (auch in seiner neuesten Version) nicht unterstützt werden. Im Gegensatz dazu setzen Opera, die Mozilla-Browser und der Mac-OSX-Browser Safari beide Grafik-Modelle in einem brauchbaren Maße um. Die Funktionalität für SVG-Grafiken kann durch das oben erwähnte Plugin von Adobe auch im Internet Explorer nachgerüstet werden. Nach einem Boom der Plugins in den 90er Jahren ist deren Benutzung heutzutage allerdings verpönt. Anwender sind nicht bereit ein mehrere Megabyte großes Plugin zu installieren, nur um sich eine Webseite mit einer SVG-Grafik ansehen zu können. Der Internet Explorer besitzt jedoch eine eigene 2D-Grafik-Implementierung, die VML-Markup-Sprache. Diese Tatsache hat findige Programmierer wie Emil Eklund (Canvas) und Mark Finkle (SVG) veranlasst, eine Portierung eines Teils dieser Grafik-Modelle in den Internet Explorer vorzunehmen. Dabei werden die SVG- beziehungsweise Canvas-Anweisungen in VML-Markup übersetzt. Mit Hilfe dieser Erweiterungen lassen sich so beide Grafiktypen auch im Internet Explorer anzeigen. Für die Darstellung von Canvas-Elementen fügen wir dazu in den Kopf-Breich der HTML-Datei einen IE-spezifischen Kommentar ein, der zum Laden der Canvas-Implementierung nur beim Internet Explorer führt:

 <!--[if IE]><script type="text/javascript"  src="excanvas/excanvas.js"></script><![endif]-->

Statt eines mehrere Megabyte großen Plugins wird nun eine nur etwa 20kb grosse JavaScript-Datei geladen. Die Beispiele des Google-Code-Projektes ExplorerCanvas zeigen, daß eine wesentliche Untermenge der Canvas-Befehle unterstützt wird. Wir wollen im weiteren diese Bibliothek nutzen um unsere Canvas-Beispiele auch für den Internet Explorer umzusetzen.

Ein Canvas-Schachbrett

Screenshot

Hier der Canvas-Code für unser Schachbrett:

 <html> <head> <!--[if IE]><script type="text/javascript"  src="excanvas/excanvas.js"></script><![endif]--> <script type="text/javascript"> function draw() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var width= 200; var heigth = width; var start = width/8; var letterX = start+10; var letterY = start-15 ; var numberX = start-30; var numberY = width+start-10; var colors = new Array ("white","#990000"); var letters = new Array("A","B","C","D","E","F","G","H"); var cnt = 0 ; var i = 0 ; for (var x = start ; x <= width ; x+=start,letterX+=start,numberY-=start) { for (var y = start ; y <= width ; y+=start) { var colIdx = cnt % 2; cnt += 1 ; var color = colors[colIdx]; ctx.fillStyle = color; ctx.fillRect(x,y, x+start, y+start);

 } cnt -= 1; } ctx.strokeRect(start,start,start*8,start*8); } </script> </head> <body onload="draw()"> <canvas id="canvas" width="225" height="225"></canvas> </body> </html>

Beispiel

Canvas-Texte
Dem aufmerksamen Leser wird nicht entgangen sein, dass die Darstellung der Feld-Buchstaben fehlt. In der Spezifikation für das Canvas-Element ist leider keine Text-Darstellung vorgesehen. Im Internet kursieren jedoch eine Reihe von Bibliotheken, welche dieses Manko beheben. Hervorzuheben ist dabei die CanvasText-Bibliothek von Jim Studt, die ebenfalls Rotation und Skalierung des Textes unterstützt. Wir verwenden im folgenden diese Bibliothek für die Beschriftung unseres Schachbrettes. Dazu muss im Kopf der HTML-Datei die JavaScript-Datei

 canvastext.js

geladen werden und unser Canvas-Objekt mittels

 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // enable text functions; CanvasTextFunctions.enable(ctx);

für das Zeichnen von Text vorbereitet werden. Danach kann auf dem Canvas-Element zum Beispiel mit der Funktion

      ctx.drawText(font,fontsize,x,y,text)

Text dargestellt werden. Hier das verbesserte Canvas-Schachbrett mit Text:

Screenshot

HTML-JavaScript-Source und Beispiel.

Es soll an dieser Stelle nicht unerwähnt bleiben, dass die Mozilla-Entwickler im Firefox 3 eine eigene Canvas-Text-Implementierung eingebaut haben. Wenn man aber die Benutzer anderer Browser auf seinen Webseiten nicht ausschliessen möchte, empfiehlt sich derzeit noch die Verwendung der Bibliothek von Jim Studt.

wz-jsgraphics
Eine interessante Alternative zu den hier vorgestellten SVG- und Canvas-Ansätzen stellt die unter einer Open-Source stehende wz-jsgraphics-Bibliothek von Walter Zorn dar. Zorn benutzt zum Zeichnen eingefärbte absolut positionierte DIV-Elemente und erreicht für kleinere Grafiken dabei ganz beachtliche Geschwindigkeiten. Diese unterstützen dabei neben den verschiedenen Grafik-Operationen wie dem Zeichnen von Linien oder Polygonen auch das Einbinden von Bildern und Texten. Wenn man nach jsgraphics im Internet sucht, wird man eine ganze Reihe weiterer verwandter Ansätze finden.

Diagramme zeichnen
Eine wichtige Anwendungsmöglichkeit für 2D-Grafiken sind Diagramme zur Visualisierung von Tabellen. Anstatt serverseitig eine Grafik-Bibliothek zu installieren, werden die neuen 2D-Fähigkeiten der Webbrowser genutzt, um die Diagramme darzustellen. Plotkit ist ein Beispiel für eine reichhaltige Grafik-Bibliothek, welche sowohl SVG- als auch Canvas basierte Diagramme erstellen kann. Einige schöne Beispiele dazu zeigt die Demo-Seite des Projektes. Da Plotkit die oben erwähnte Explorer-Canvas Implementierung von Emil Eklund benutzt, lassen sich so browserübergreifend Diagramme darstellen.

Screenshot

Die Canvas Zukunft
Das HTML 5 und das Canvas-Objekt keine Spezifikationen für den Papierkorb sind, verdeutlicht das kürzlich veröffentlichte Browser-Projekt von Google. Mit dieser weitreichenden Umsetzung von HTML 5 ist Google nun in den Browser-Wettkampf eingestiegen. Die reichhaltigen Möglichkeiten der Canvas-API mit Bild-Rotationen, Scalierungen, Transformationen und Animationen sowie die direkte Integration in den Webbrowser mittels JavaScript lassen für Canvas-Grafiken eine große Zukunft erwarten. Wenn Google auf diesem Gebiet vorangeht, werden die anderen nicht zurückbleiben können. Wie unser Artikel zeigt, sind aber ungeachtet aller zukünftigen Entwicklungen, durch die oben vorgestellten Erweiterungen für den Internet Explorer, schon jetzt vielfältige browserübergreifende Anwendungsmöglichkeiten für den Canvas-Programmierer gegeben. ™

Der gesamt JavaScript- und HTML-Code kann heruntergeladen werden. Hinweise und Vorschläge zum Artikel bitte an Email.

Erstveröffentlichung 29.07.2008

Dr. Detlef Groth, von Beruf Biochemiker und IT-Konsultant, arbeitet als Bioinformatiker und Autor in Potsdam und Umgebung.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!