HTML5-Canvas oder SVG?

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Mit der Einführung von HTML5 ab 2004 wurde auch die JavaScript-basierte Zeichenmethode Canvas eingeführt. Bereits seit 2001 gibt es das vektorbasierte SVG-Format, welches allerdings erst in den letzten Jahren parallel zu HTML5 ein wirklicher Erfolg wurde. Beide Formate haben ihre Vor- und Nachteile. Aber welches ist wann besser geeignet? Wo liegen die Vor- und Nachteile?

JavaScript gegen XML-Syntax

Der größte Unterschied zwischen HTML5-Canvas und SVG ist die der Auszeichnung beziehungsweise Programmierung. Per HTML5 wird letztlich nur ein einziges Element („<canvas>“) ausgezeichnet. Der komplette Inhalt der Leinwand wird per JavaScript realisiert.

Entsprechende Methoden ermöglichen es, Formen wie Rechtecke, Kreise und auch komplexe Polygone und Bögen zu zeichnen sowie miteinander zu kombinieren. Für das Aussehen – Füllfarbe sowie Konturenstärke und -farbe – wird ebenfalls JavaScript verwendet.

var leinwand = document.getElementById("leinwand");
var zeichnung = leinwand.getContext("2d");
zeichnung.moveTo(0, 0);
zeichnung.lineTo(200, 200);
zeichnung.lineWidth = 2;
zeichnung.strokeStyle = "red";
zeichnung.stroke();

Im Beispiel wird eine Linie von der Position „0, 0“ zur Position „200, 200“ gezeichnet und rot eingefärbt.

Per SVG würde dieselbe Linie über ein entsprechendes SVG-Element ausgezeichnet.

<line x1="0" y1="0" x2="200" y2="200" stroke-width="2" stroke="red" />

Obwohl das Ergebnis in beiden Fällen identisch ist, erkennt man, dass die SVG-Variante deutlich kürzer ausfällt und aufgrund der XML-Syntax für die Meisten vermutlich deutlich intuitiver auszuzeichnen ist.

Ein weiterer Vorteil im SVG-Format besteht darin, dass die Gestaltung auch per CSS erfolgen kann. Hier lassen sich einzelne Formen per ID oder Klasse einheitlich gestalten.

Bei der Auszeichnung liegt das SVG-Format also vorne. Es ist platzsparender und hat eine einfachere Syntax. Wer zudem grundsätzlich alle Inhalte auch ohne JavaScript anbieten möchte, hat mit HTML5-Canvas ohnehin schlechte Karten.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Pixel gegen Vektoren

Ein weiterer großer Unterschied besteht in der Darstellung der Formate. Während HTML5-Canvas ein pixelbasiertes Format (es wird jeweils ein PNG-Bild im Browser erzeugt) ist, ist das SVG-Format vektorbasiert.

Natürlich kannst du auch per HTML5-Canvas entsprechend Grafiken für hochauflösende Displays erstellen. Aber spätestens beim Hereinzoomen werden Canvas-Zeichnungen pixelig, während SVG-Zeichnungen ihre Schärfe beibehalten.

Auch hier hat das SVG-Format die Nase vorn – zumal du auch innerhalb eines SVG-Dokumentes Bitmaps einbinden kannst.

Interaktionen und Effekte

Da das SVG-Format auch CSS unterstützt, stehen einem alle Möglichkeiten von Stylesheets zur Verfügung. Neben der einfachen Gestaltung lassen sich auch interaktive Effekte einbeziehen.

So kannst du zum Beispiel Hover-Effekte auf einzelne SVG-Formen anwenden, um diese beim Herüberfahren mit der Maus hervorzuheben, farblich zu verändern oder zu vergrößern. Auch Animationen dank der „transition“-Eigenschaft sind auf diese Weise möglich.

Da das SVG-Format auch Verlinkungen erlaubt, kannst du Formen mit einem Verweis versehen und somit aus einzelnen Formen Links erstellen.

Darüber hinaus besteht auch die Möglichkeit, SVG-Elemente per JavaScript anzusprechen und zu manipulieren.

document.getElementsByTagName("rect")[0].setAttribute("width", "200");

Im Beispiel wird ein SVG-Rechteck per JavaScript manipuliert.

Geschwindigkeit

Ein letzter großer Unterschied zwischen HTML5-Canvas und SVG besteht in der Geschwindigkeit, was das Rendern und somit die Darstellung der Zeichnungen im Browser betrifft. Hier hat pauschal erst einmal kein Format die Nase vorn.

Gerade bei weniger komplexen Zeichnungen kannst du den Geschwindigkeitsunterschied vernachlässigen. Aber bei komplexen beziehungsweise großen Zeichnungen werden Unterschiede deutlich.

So wird bei zunehmender Anzahl von Objekten – sowohl einfache Formen als auch komplexe Pfade – das SVG-Format langsamer. Es braucht länger um die Zeichnung zu rendern und somit darzustellen. Das Canvas-Format schneidet hier deutlich besser ab. Je mehr Objekte eine Zeichnung hat, desto performanter verhält sich HTML5-Canvas gegenüber SVG.

Anders sieht es aus, wenn man die Größe der Fläche berücksichtigt. Das SVG-Format kommt mit großen Flächen deutlich besser zurecht und rendert Elemente darauf wesentlich schneller als das Canvas-Format.

Wer also großformatige Zeichnungen einsetzen will, die vielleicht sogar seitenfüllend sind, sollte auf das SVG-Format setzen. Wer hingegen besonders komplexe Elemente rendern muss – beispielsweise komplexe Diagramme –, sollte eher das Canvas-Format nutzen.

Pixelmanipulation

Da es sich nur bei HTML5-Canvas um ein pixelbasiertes Format handelt, kommt Pixelmanipulation beim SVG ohnehin selten in Frage. Allerdings gibt es auch beim SVG-Format die Möglichkeit, mit verschiedenen Filtern zum Beispiel die Farbe eines eingebundenen Bitmaps zu manipulieren.

Aber an sich bietet sich vor allem HTML5-Canvas zur Pixelmanipulation an. Denn das pixelbasierte Format macht es recht einfach möglich, jedes einzelne Pixel eines Bilder über eine entsprechende Funktion zu verändern.

Auf diese Weise lassen sich nicht nur statische Manipulationen realisieren, sondern auch animierte Effekte. Selbst die Echtzeitmanipulation von Videos ist mit HTML5-Canvas möglich.

So lässt sich die Farbe in einem Video – zum Beispiel per Greenscreen-Verfahren – dynamisch durch eine andere Farbe oder Hintergrundgrafik ersetzen. Dazu kannst du per JavaScript auf die Frames eines Videos zugreifen und in diesen beispielsweise eine Farbe durch ein anderes Bild ersetzen.

Fazit

Die genannten Beispiele zeigen, dass sowohl HTML5-Canvas als auch das SVG-Format jeweils ihre Vor- und Nachteile haben. Bei der Kombination verschiedener hier vorgestellter Möglichkeiten muss man sicher auch immer im Einzelfall abwägen, welches Format die bessere Wahl ist.

Aber grundsätzlich lässt sich Folgendes sagen: Wenn es um statische Zeichnungen geht, bei denen es vor allem auf Skalierbarkeit und die Darstellung auf großer Fläche ankommt, ist das SVG-Format die richtige Wahl.

Bei komplexen Darstellungen, die permanent neu berechnet werden müssen – Echtzeitdaten einer Wetterkarte oder ein Video zum Beispiel –, ist HTML5-Canvas performanter und daher vorzuziehen.

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar
wpDiscuz