Canvas gegen SVG: Die richtige Werkzeugauswahl für die Aufgabe

Tutorials
HTML5

HTML5 Canvas und SVG sind beide auf Standards basierende HTML5-Technologien, die Sie verwenden können, um erstaunliche Grafiken und visuelle Erlebnisse zu schaffen. Die Frage, die ich in diesem Artikel stelle, lautet: Sollte es darauf ankommen, welche Sie in Ihrem Projekt verwenden? Mit anderen Worten, gibt es bestimmte Anwendungsfälle, bei denen HTML5 Canvas gegenüber SVG bevorzugt werden sollte?

Zunächst sollten wir einige Worte über HTML5 Canvas und SVG verlieren.

Was ist HTML5 Canvas?

Hier ist, wie die WHATWG-Spezifikation den canvas-Element einführt:

Das canvas-Element bietet Skripten eine auf Auflösungen abhängige Bitmap-Leinwand, die zum Rendern von Diagrammen, Spielgrafiken, Kunst oder anderen visuellen Bildern in Echtzeit verwendet werden kann.

Mit anderen Worten, das <canvas>-Tag stellt eine Oberfläche zur Verfügung, auf der Sie Rasterbilder pixel für pixel mithilfe einer JavaScript-programmierbaren Schnittstelle erstellen und manipulieren können.

Hier ist ein einfacher Code-Beispiel:

Das HTML:

<canvas id="myCanvas" width="800" height="800"></canvas>

Das JavaScript:

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = '#c00';
context.fillRect(10, 10, 100, 100);

Sie können die Methoden und Eigenschaften der HTML5 Canvas API nutzen, indem Sie einen Verweis auf das 2D-Kontextobjekt erhalten. Im obigen Beispiel habe ich ein einfaches rotes Quadrat, 100 x 100 Pixel groß, 10px vom linken und 10px vom oberen Rand der <canvas> Zeichenfläche gezeichnet.

Als auflösungsabhängig sind Bilder, die Sie auf <canvas> erstellen, möglicherweise bei Vergrößerung oder Anzeige auf Retina-Displays qualitativ beeinträchtigt.

Das Zeichnen einfacher Formen ist nur die Spitze des Eisbergs. Die HTML5 Canvas API ermöglicht es Ihnen, Bögen, Pfade, Text, Farbverläufe usw. zu zeichnen. Sie können Ihre Bilder auch pixelweise manipulieren. Das bedeutet, dass Sie in bestimmten Bereichen der Grafik eine Farbe durch eine andere ersetzen können, Sie können Ihre Zeichnungen animieren und sogar ein Video auf das Canvas zeichnen und sein Aussehen verändern.

Was ist SVG?

SVG steht für Scalable Vector Graphics. Nach der Spezifikation:

SVG ist eine Sprache zur Beschreibung von zweidimensionalen Grafiken. Als eigenständiges Format oder bei Mischung mit anderem XML verwendet es die XML-Syntax. Bei Mischung mit HTML5 verwendet es die HTML5-Syntax. …

SVG-Zeichnungen können interaktiv und dynamisch sein. Animationen können entweder deklarativ definiert und ausgelöst werden (d. h. durch Einbetten von SVG-Animationselementen in SVG-Inhalt) oder über Skripting.

SVG ist ein XML-Dateiformat, das zur Erstellung von Vektorgrafiken entwickelt wurde. Da es skalierbar ist, hat es den Vorteil, dass Sie ein Vektorbild vergrößern oder verkleinern können, während es seine Schärfe und hohe Qualität beibehält. (Dies ist mit HTML5 Canvas-generierten Bildern nicht möglich.)

Hier ist derselbe rote Quadrat (zuvor mit HTML5 Canvas erstellt), diesmal mit SVG gezeichnet:

<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 600 600">
  <desc>Red rectangle shape</desc>
  <rect x="10" y="10" width="100" height="100" fill="#c00"  />  
</svg>

Du kannst mit SVG die meisten Dinge tun, die du auch mit Canvas machen kannst — wie das Zeichnen von Formen und Pfaden, Farbverläufen, Mustern, Animationen und so weiter. Allerdings funktionieren diese beiden Technologien grundlegend anders. Im Gegensatz zu einer Canvas-basierten Grafik verfügt SVG über eine DOM, und daher haben sowohl CSS als auch JavaScript Zugriff darauf. Zum Beispiel kannst du das Erscheinungsbild einer SVG-Grafik mit CSS verändern, ihre Knoten mit CSS oder JavaScript animieren und Teile davon genauso wie ein `<div>` auf Maus- oder Tastaturereignisse reagieren lassen. Wie sich in den folgenden Abschnitten klarer zeigen wird, spielt dieser Unterschied eine bedeutende Rolle, wenn du dich zwischen Canvas und SVG für dein nächstes Projekt entscheiden musst.

Unmittelbarer Modus und Beharrlicher Modus

Es ist wichtig, zwischen unmittelbarem Modus und beharrlichem Modus zu unterscheiden. HTML5 Canvas ist ein Beispiel für den ersten, SVG für den letzten.

Unmittelbarer Modus bedeutet, dass der Canvas, sobald deine Zeichnung darauf ist, aufhört, sie zu verfolgen. Mit anderen Worten, du als Entwickler musst die Befehle zum Zeichnen von Objekten herausfinden, das Modell oder die Szene erstellen und pflegen, die das endgültige Ergebnis darstellen soll, und angeben, was aktualisiert werden muss. Die Grafik-API des Browsers übermittelt einfach deine Zeichenbefehle an den Browser, der sie dann ausführt.

SVG verwendet den retinierten Ansatz, bei dem Sie einfach Ihre Zeichnungsanweisungen geben, was Sie auf dem Bildschirm anzeigen möchten, und die Grafik-API des Browsers erstellt ein im Speicher befindliches Modell oder eine Szene des endgültigen Ausgangs und übersetzt es in Zeichenbefehle für Ihren Browser.

Als ein immediates Grafiksystem verfügt Canvas nicht über eine DOM, oder Document Object Model. Mit Canvas zeichnen Sie Ihre Pixel und das System vergisst alles über sie, wodurch der zusätzliche Speicherbedarf zur Aufrechterhaltung eines internen Modells Ihrer Zeichnung reduziert wird. Bei SVG wird jedes Objekt, das Sie zeichnen, dem internen Modell des Browsers hinzugefügt, was Ihr Leben als Entwickler etwas erleichtert, aber zu Kosten in Bezug auf Leistung.

Basierend auf der Unterscheidung zwischen immediater und retinierter Modus sowie anderen spezifischen Merkmalen von Canvas und SVG kann man einige Fälle aufzeigen, in denen die Verwendung einer Technologie gegenüber der anderen Ihren Projektzielen besser dienen könnte.

HTML5 Canvas: Vor- und Nachteile

Die HTML5 Canvas Spezifikation empfiehlt klar, dass Autoren nicht das <canvas> Element verwenden sollten, wenn sie andere geeignetere Mittel zur Verfügung haben.

Zum Beispiel für ein grafisch reiches <header> Element sind die besten Werkzeuge HTML und CSS, nicht <canvas> (und auch nicht SVG, übrigens). Dr. Abstract, Schöpfer und Gründer des Zim JS Canvas Frameworks, bestätigt diese Ansicht, wie er schreibt:

Der DOM und die DOM-Frameworks sind gut darin, Informationen und insbesondere Textinformationen darzustellen. Im Vergleich dazu ist die Canvas-Technik eher wie ein Bild. Text kann auf der Canvas hinzugefügt und angepasst werden, aber der Text kann nicht so einfach ausgewählt oder durchsucht werden wie auf dem DOM. Lange, scrollbare Seiten mit Text oder Text und Bilder sind eine ausgezeichnete Verwendung des DOM. Der DOM eignet sich hervorragend für soziale Medien-Seiten, Foren, Einkaufen und alle Informations-Apps, die wir gewohnt sind. — „Wann eine JavaScript Canvas-Bibliothek oder ein Framework zu verwenden ist“

Das ist also ein klares Beispiel dafür, wann <canvas> nicht verwendet werden sollte. Aber wann ist <canvas> eine gute Option?

Dieser Tweet von Sarah Drasner fasst einige wichtige Vor- und Nachteile der Canvas-Funktionen und -Fähigkeiten zusammen, die uns dabei helfen können, einige Anwendungsfälle für diese leistungsfähige Technologie zu ermitteln:

Das Bild aus dem Tweet können Sie hier betrachten.

Wo HTML5 Canvas großartig sein kann

Alvin Wan hat Canvas und SVG in Bezug auf die Leistung verglichen, sowohl in Bezug auf die Anzahl der gezeichneten Objekte als auch in Bezug auf die Größe der Objekte oder des Canvas selbst. Er stellt seine Ergebnisse wie folgt dar:

Insgesamt ist der Overhead bei der DOM-Rendering spürbar, wenn man Hunderte, wenn nicht Tausende von Objekten gleichzeitig verwaltet; in dieser Situation ist Canvas der klare Sieger. Beide, Canvas und SVG, sind jedoch unabhängig von der Größe der Objekte. Angesichts des endgültigen Resultats bietet Canvas einen klaren Vorteil in Bezug auf die Performance.

Ausgehend von dem, was wir über Canvas wissen, insbesondere seiner ausgezeichneten Leistung bei der Darstellung vieler Objekte, hier einige mögliche Szenarien, in denen es angemessen und sogar vorzuziehen sein könnte gegenüber SVG.

Spiele und Generative Kunst

Für grafikintensive, hochinteraktive Spiele, sowie für generative Kunst, ist Canvas in der Regel die beste Wahl.

Ray Tracing

Ray Tracing ist eine Technik zur Erstellung von 3D-Grafiken.

Ray Tracing kann verwendet werden, um ein Bild durchzuführen, indem der Lichtweg durch Pixel in einer Bildebene verfolgt wird und die Auswirkungen seiner Begegnungen mit virtuellen Objekten simuliert wird. … Die von Ray Tracing erzielten Effekte, … reichen von … die Erstellung realistischer Bilder aus einfachen Vektorgrafiken bis hin zum Anwenden von fotorealistischen Filtern zur Entfernung von Roter-Augen-Effekt. — SVG vs Canvas: wie man wählt, Microsoft Docs.

Wenn du neugierig bist, hier ist eine Raytracer-Anwendung im Einsatz von Mark Webster.

Allerdings, obwohl HTML5 Canvas definitiv besser für die Aufgabe geeignet ist als SVG jemals sein könnte, folgt daraus nicht zwangsläufig, dass Raytracing am besten auf einem <canvas> Element ausgeführt wird. Tatsächlich könnte die Belastung für die CPU ziemlich erheblich sein, bis zu dem Punkt, an dem dein Browser nicht mehr reagiert.

Das Zeichnen einer Vielzahl von Objekten auf einer kleinen Oberfläche

Ein weiteres Beispiel ist eine Situation, in der deine Anwendung eine große Anzahl von Objekten auf einer relativ kleinen Oberfläche zeichnen muss — wie bei nicht-interaktiven Echtzeit-Datenvisualisierungen, wie grafische Darstellungen von Wettermustern.

Das obige Bild stammt aus diesem MSDN Artikel, der Teil meiner Recherche für diesen Beitrag war.

Pixel-Ersetzung in Videos

Wie in diesem HTML5 Doctor Artikel demonstriert, ist ein weiteres Beispiel, in dem Canvas angemessen wäre, bei der Ersetzung der Videohintergrundfarbe durch eine andere Farbe, eine andere Szene oder ein Bild.

Für was ist HTML5 Canvas nicht so gut geeignet

Auf der anderen Seite gibt es eine Reihe von Fällen, in denen Canvas im Vergleich zu SVG möglicherweise nicht die beste Wahl ist.

Skalierbarkeit

Die meisten Szenarien, in denen Skalierbarkeit von Vorteil ist, werden besser mit SVGs als mit Canvas bedient. Hochwertige, komplexe Grafiken wie Gebäude- und Ingenieurzeichnungen, Organigramme, biologische Diagramme usw. sind Beispiele dafür.

Wenn sie mit SVG gezeichnet werden, bleiben beim Vergrößern der Bilder oder beim Drucken alle Details in hoher Qualität erhalten. Sie können diese Dokumente auch aus einer Datenbank generieren, was die XML-Struktur von SVG besonders für diese Aufgabe geeignet macht.

Auch sind diese Grafiken oft interaktiv. Denken Sie an Sitzplatzpläne, wenn Sie online Ihr Flugticket buchen, was sie zu einem guten Anwendungsfall für ein retiniertes Grafiksystem wie SVG macht.

Das heißt, mit Hilfe großartiger Bibliotheken wie CreateJS und Zim (die CreateJS erweitert), können Entwickler relativ schnell Mausereignisse, Trefferprüfungen, Multitouch-Gesten, Drag-and-Drop-Funktionen, Steuerelemente und mehr in ihre Canvas-basierten Kreationen integrieren.

Barrierefreiheit

Obwohl es Schritte gibt, um eine Canvas-Grafik zugänglicher zu machen — und eine gute Canvas-Bibliothek wie Zim kann hier dabei helfen, den Prozess zu beschleunigen — leuchtet Canvas in puncto Barrierefreiheit nicht besonders. Was auf der Canvas-Oberfläche gezeichnet wird, sind nur ein Haufen Pixel, die von Assistenztechnologien oder Suchmaschinen-Bots nicht gelesen oder interpretiert werden können. Dies ist ein weiterer Bereich, in dem SVG vorzuziehen ist: SVG ist einfach XML, was es sowohl für Menschen als auch für Maschinen lesbar macht.

Kein Rückgriff auf JavaScript

Wenn du kein JavaScript in deiner Anwendung verwenden möchtest, dann ist Canvas nicht dein bester Freund. Tatsächlich ist JavaScript die einzige Möglichkeit, mit dem <canvas>-Element zu arbeiten. Im Gegensatz dazu kannst du SVG-Grafiken mit einem Standard-Vektorgrafikprogramm wie Adobe Illustrator oder Inkscape zeichnen und kannst ihre Erscheinung mit reinem CSS steuern sowie ansprechende, subtile Animationen und Mikrointeraktionen durchführen.

Kombination von HTML5 Canvas und SVG für fortgeschrittene Szenarien

Es gibt Fälle, in denen deine Anwendung die Vorteile von beiden Welten durch die Kombination von HTML5 Canvas und SVG nutzen kann. Zum Beispiel könnte ein Canvas-basiertes Spiel Sprites aus SVG-Bildern verwenden, die von einem Vektorgrafikprogramm generiert wurden, um die Skalierbarkeit und die geringere Downloadgröße im Vergleich zu einem PNG-Bild zu nutzen. Oder ein Malprogramm könnte seine Benutzeroberfläche mit SVG entwerfen, wobei ein eingebettetes <canvas>-Element zum Zeichnen verwendet wird.

Schließlich macht eine leistungsfähige Bibliothek wie Paper.js es möglich, Vektorgrafiken auf HTML5 Canvas zu programmieren, wodurch Entwicklern eine bequeme Arbeitsweise mit beiden Technologien ermöglicht wird.

Schlussfolgerung

In diesem Artikel habe ich einige Schlüsselmerkmale sowohl von HTML5 Canvas als auch SVG untersucht, um dir bei der Entscheidung zu helfen, welche Technologie für bestimmte Aufgaben am besten geeignet sein könnte.

Was ist die Antwort?

Chris Coyier stimmt Benjamin De Cock zu, wie letzterer in einem Tweet feststellt:

Dr. Abstract bietet eine lange Liste von Dingen, die am besten mit Canvas erstellt werden, einschließlich interaktiver Logos und Werbung, interaktiver Infografiken, E-Learning-Anwendungen und vieles mehr.

Meiner Meinung nach gibt es keine harten und schnellen Regeln dafür, wann es am besten ist, Canvas anstelle von SVG zu verwenden. Der Unterschied zwischen Immediate und Retained Mode deutet darauf hin, dass HTML5 Canvas bei der Erstellung von Dingen wie grafikintensiven Spielen unbestritten gewinnt, und dass SVG für Dinge wie flache Bilder, Icons und UI-Elemente vorzuziehen ist. Allerdings gibt es dazwischen Raum für HTML5 Canvas, insbesondere wenn man bedenkt, welche mächtigen Canvas-Bibliotheken an den Tisch bringen könnten. Sie machen es nicht nur einfacher, beide Technologien im selben grafischen Werk zu verwenden, sondern machen es auch so, dass einige schwer zu implementierende Funktionen in einem nativen Canvas-basierten Projekt – wie interaktive Steuerelemente und Ereignisse, Reaktionsfähigkeit, Barrierefreiheitsmerkmale und so weiter – jetzt für die meisten Entwickler greifbar sind, was die Tür für die Möglichkeit immer interessanterer Verwendungen von HTML5 Canvas öffnet.

Häufig gestellte Fragen (FAQs) über Canvas vs SVG

Was sind die Hauptunterschiede zwischen Canvas und SVG?

Canvas und SVG sind beide Web-Technologien zur Erstellung von Grafiken, aber sie weisen einige wesentliche Unterschiede auf. Canvas basiert auf einer bitmapbasierten Vorgehensweise, d.h., es arbeitet mit Pixeln. Es eignet sich ideal für die Erstellung komplexer, interaktiver Grafiken wie Spiele oder andere Anwendungen, die dynamische visuelle Effekte erfordern. Sobald jedoch eine Form gezeichnet wurde, kann sie nicht geändert werden, außer durch erneutes Zeichnen. SVG hingegen ist eine vektorbasierte Vorgehensweise. Es arbeitet mit Formen und Pfaden, und jedes Objekt bleibt nach dem Zeichnen manipulierbar. Dies macht SVG ideal für die Erstellung statischer Grafiken, Logos und Icons, die ohne Qualitätsverlust skaliert werden müssen.

Wann sollte ich Canvas anstelle von SVG verwenden?

Canvas ist am besten geeignet, wenn Sie komplexe, interaktive und leistungsfähige Grafiken erstellen müssen. Dies liegt daran, dass Canvas mit Pixeln arbeitet und die direkte Manipulation einzelner Pixel ermöglicht, was es ideal für Echtzeit-Videoverarbeitung oder die Darstellung großer Datensätze macht. Es ist jedoch zu beachten, dass Canvas keine Ereignisbehandler unterstützt, also müssen Sie für Interaktivität selbst implementieren.

Wann ist SVG gegenüber Canvas die bessere Wahl?

SVG ist die bessere Wahl, wenn Sie Grafiken erstellen müssen, die gut skalieren und dabei keine Qualitätsverluste aufweisen, wie z.B. Logos oder Icons. SVG unterstützt auch Ereignisbehandler, was die Erstellung interaktiver Grafiken erleichtert. Darüber hinaus sind SVG-Elemente Teil des DOM, was bedeutet, dass sie genau wie jedes andere HTML-Element mit CSS gestylt und mit JavaScript manipuliert werden können.

Kann ich Canvas und SVG in demselben Projekt verwenden?

Ja, Sie können sowohl Canvas als auch SVG in demselben Projekt verwenden. Tatsächlich kann es manchmal von Vorteil sein, beide zu nutzen, da jeder seine eigenen Stärken und Schwächen hat. Sie könnten beispielsweise Canvas für Teile Ihres Projekts verwenden, die komplexe, interaktive Grafiken erfordern, und SVG für Teile, die skalierbare, statische Grafiken benötigen.

Wie vergleicht sich die Browser-Unterstützung von Canvas und SVG?

Sowohl Canvas als auch SVG verfügen über ausgezeichnete Browser-Unterstützung. Sie werden von allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge. Wenn Sie jedoch ältere Browser unterstützen müssen, ist es wichtig zu bemerken, dass SVG älter ist und daher eine etwas bessere Unterstützung für Legacy-Browser hat.

Wie verarbeiten Canvas und SVG Animationen?

Sowohl Canvas als auch SVG können zum Erstellen von Animationen verwendet werden, aber sie verarbeiten sie unterschiedlich. Mit Canvas müssen Sie manuell den Canvas für jedes Bild der Animation löschen und neu zeichnen. Mit SVG können Sie CSS oder JavaScript verwenden, um SVG-Elemente zu animieren, was einfacher und effizienter sein kann.

Wie beeinflussen Canvas und SVG die Seitenladezeiten?

Der Einfluss auf die Seitenladezeiten hängt von der Komplexität und Größe der erstellten Grafiken ab. Canvas kann für komplexe, interaktive Grafiken schneller sein, da es keinen DOM für jedes Objekt pflegen muss. SVG kann jedoch für einfache, statische Grafiken schneller sein, da es die gesamte Grafik nicht jedes Mal neu zeichnen muss, wenn etwas sich ändert.

Kann ich CSS mit Canvas und SVG verwenden?

SVG-Elemente sind Teil des DOM, sodass Sie sie mit CSS gestalten können, genau wie jedes andere HTML-Element. Das Canvas hingegen ist ein Bitmap und unterstützt keine CSS-Stile. Sie können jedoch CSS verwenden, um das Canvas-Element selbst zu gestalten, z.B. um dessen Hintergrundfarbe oder Rahmen zu setzen.

Wie verarbeiten Canvas und SVG Responsiveness?

SVG ist von Natur aus responsiv, da es ein vektorbasiertes Format ist, sodass es gut skaliert und dabei keine Qualität einbüßt. Canvas hingegen ist von Natur aus nicht responsiv, da es ein bitmapbasiertes Format ist. Sie können jedoch ein Canvas responsiv gestalten, indem Sie JavaScript verwenden, um seine Größe basierend auf der Viewport-Größe anzupassen.

Wie wähle ich zwischen Canvas und SVG für mein Projekt?

Die Wahl zwischen Canvas und SVG hängt von den spezifischen Bedürfnissen Ihres Projekts ab. Berücksichtigen Sie Faktoren wie die Komplexität und Interaktivität der zu erstellenden Grafiken, die Notwendigkeit von Skalierbarkeit und Responsiveness, Browserunterstützung und Ihre Komfortebene mit den Technologien. In einigen Fällen kann es von Vorteil sein, sowohl Canvas als auch SVG im selben Projekt zu verwenden.

Source:
https://www.sitepoint.com/canvas-vs-svg/