Canvas vs SVG: Auswahl des richtigen Tools für den Job

html5 canvas vs. svg: Welche zu wählen?

HTML5 -Leinwand und SVG basieren beide auf Standard -HTML5 -Technologien, mit denen atemberaubende Grafiken und visuelle Effekte erzeugt werden können. In diesem Artikel wird eine Schlüsselfrage erörtert: Welche Technologie ist im Projekt besser geeignet? Mit anderen Worten, in welchen Fällen sind Sie eher geneigt, HTML5 -Leinwand als SVG zu verwenden?

Lassen Sie uns zunächst kurz HTML5 -Leinwand und SVG einführen.

Schlüsselpunkte

• HTML5 -Leinwand und SVG sind beide HTML5 -Technologien, mit denen grafische und visuelle Erlebnisse erstellt werden. Leinwand stützt sich auf die Auflösung und wird verwendet, um Grafiken, Spielgrafiken, Kunstwerke oder andere visuelle Bilder dynamisch zu rendern. SVG (skalierbare Vektorgrafik) ist ein XML -Dateiformat, das seine Qualität bei der Skalierung beibehält.
• HTML5 -Leinwand und SVG funktionieren ganz anders. Canvas ist ein sofortiges Grafiksystem, das nach dem Ziehen der Pixel verworfen wird. SVG nimmt einen Retentionsmodus an, in dem jedes gezogene Objekt zum internen Modell des Browsers hinzugefügt wird, was für Entwickler einfacher ist, die Leistung jedoch beeinträchtigen kann.
• HTML5-Leinwand ist ideal für grafischintensive, hoch interaktive Spiele, generative Kunst und Szenen, in denen es viele Objekte gibt, die auf kleinen Oberflächen gezogen werden müssen. Wenn sie jedoch auf einem Retina -Display zoomt oder angezeigt werden, kann die Qualität sinken.
• SVG ist für Szenarien vorzuziehen, die Skalierbarkeit erfordern (wie High -Fidelity, komplexe Grafiken wie Architektur- und technische Zeichnungen, biologische Zeichnungen und organisatorische Zeichnungen). SVG ist auch in Bezug auf die Zugänglichkeit besser, da es von Menschen und Maschinen gelesen werden kann.
• HTML5 -Leinwand und SVG können für fortgeschrittene Szenarien kombiniert werden. Beispielsweise kann ein Canvas-basiertes Spiel ein SVG-Bild als Spritz verwenden, oder mit einem Zeichnungsprogramm kann SVG seine Benutzeroberfläche entwerfen und Leinwandelemente zum Zeichnen einbetten.

Was ist HTML5 -Leinwand?

whatWg -Spezifikation führt das Canvas -Element wie folgt ein:

Das Element

Canvas bietet eine auflösungsabhängige Bitmap-Leinwand für das Skript, um Grafiken, Spielgrafiken, Kunstwerke oder andere visuelle Bilder im Fliegen zu rendern.

Mit anderen Worten, das <canvas></canvas> Tag bietet eine Oberfläche, auf der Sie Rasterbilder Pixel mit einer programmierbaren JavaScript -Schnittstelle erstellen und manipulieren können.

Dies ist ein grundlegendes Code -Beispiel:

(Das CodePen -Beispiel sollte hier eingebettet werden, um die grundlegende Leinwandform anzuzeigen)

Aufgrund der Auflösungsabhängigkeit können Bilder, die auf <canvas></canvas> erstellt wurden, die Qualität abbauen, wenn sie in einer Retina -Anzeige zoomt oder angezeigt werden.

einfache Formen zeichnen ist nur die Spitze des Eisbergs. Mit der HTML5 -Canvas -API können Sie Bögen, Pfade, Text, Gradienten und mehr zeichnen. Sie können auch Bilder Pixel mit Pixel bedienen. Dies bedeutet, dass Sie Farben in bestimmten Bereichen der Grafik ersetzen, Ihre Zeichnungen animieren und das Video sogar auf die Leinwand zeichnen und sein Aussehen ändern können.

Was ist SVG?

SVG repräsentiert skalierbare Vektorgrafiken. Nach der Spezifikation:

SVG ist eine Sprache, mit der zweidimensionale Grafiken beschrieben werden. Es verwendet die XML -Syntax, wenn sie als eigenständiges Format verwendet wird oder wenn sie mit anderen XML gemischt werden. Wenn mit HTML5 gemischt wird, wird die HTML5 -Syntax verwendet ...

SVG -Zeichnungen können interaktiv und dynamisch sein. Die Animation kann definiert und mit deklarativen Mitteln (d. H. Durch Einbetten von SVG -Animationselementen in SVG -Inhalte) oder durch Skripte ausgelöst werden.

SVG ist ein XML -Dateiformat, das zum Erstellen von Vektorgrafiken verwendet wird. Die skalierbaren Eigenschaften ermöglichen es, die Vektorbilder zu erhöhen oder zu verringern und gleichzeitig Klarheit und hohe Qualität aufrechtzuerhalten. (Das HTML5 -Leinwand erzeugte Bild kann dies nicht tun).

Folgendes ist das gleiche rote Quadrat, das mit SVG (zuvor unter Verwendung von HTML5 -Leinwand erstellt) gezeichnet ist:

(Das CodePen -Beispiel sollte hier eingebettet werden, um die grundlegende SVG -Form anzuzeigen)

Sie können SVG verwenden, um die meisten Operationen auszuführen, die mit Leinwand ausgeführt werden können, z. B. Formen und Pfade, Gradienten, Muster, Animationen und mehr. Die beiden Technologien arbeiten jedoch grundlegend unterschiedlich. Im Gegensatz zu Canvas-basierten Grafiken verfügt SVG über ein DOM, sodass sowohl CSS als auch JavaScript zugänglich sind. Sie können beispielsweise CSS verwenden, um das Erscheinungsbild eines SVG -Diagramms zu ändern und seine Knoten mit CSS oder JavaScript zu animieren, so dass ein Teil auf Maus- oder Tastaturereignisse wie

reagiert. Wie in den folgenden Abschnitten deutlicher zu sehen ist, spielt dieser Unterschied eine wichtige Rolle, wenn Sie in Ihrem nächsten Projekt zwischen Leinwand und SVG wählen müssen.

Echtzeitmodus und Retentionsmodus

Es ist entscheidend, zwischen dem Echtzeitmodus und dem Retentionsmodus zu unterscheiden. HTML5 -Leinwand ist ein Beispiel für erstere und SVG ist ein Beispiel für das letztere.

Echtzeitmodus bedeutet, dass die Leinwand nach der Verfolgung der Leinwand nach dem Verfolgen der Leinwand. Mit anderen Worten, als Entwickler müssen Sie Befehle formulieren, um Objekte zu zeichnen, das Modell oder das Szenario der endgültigen Ausgabe zu erstellen und zu verwalten und anzugeben, was aktualisiert werden muss. Die Grafik -API des Browsers übermittelt einfach Ihre Zeichnungsbefehle dem Browser, und der Browser führt diese Befehle aus.

SVG verwendet den Retentionsmodus.

Als sofortiges Grafiksystem verfügt Canvas über kein DOM- oder Dokumentobjektmodell. Mit Leinwand zeichnen Sie Pixel und das System vergisst alle und reduziert den zusätzlichen Speicher, der erforderlich ist, um das interne Modell der Zeichnung aufrechtzuerhalten. Bei SVG wird jedes von Ihnen gezogene Objekt zum internen Modell des Browsers hinzugefügt, was Ihr Leben als Entwickler ein wenig einfacher macht, aber bei der Leistung einen Preis zahlt.

basierend auf dem Unterschied zwischen dem Echtzeitmodus und dem Aufbewahrungsmodus sowie anderen spezifischen Merkmalen von Leinwand und SVG können einige Situationen, in denen die Verwendung einer Technologie anstelle einer anderen die Ziele des Projekts besser dient.

HTML5 -Leinwand: Pros and Cons

Die HTML5 -Canvas -Spezifikation empfiehlt ausdrücklich, dass Autoren das

-Element nicht verwenden sollten, wenn andere geeignete Methoden verfügbar sind. <canvas></canvas>

zum Beispiel für grafisch reichhaltige Elemente sind die besten Tools HTML und CSS, nicht

(übrigens ist SVG auch nicht). Diese Ansicht wurde von Dr. Abstract, dem Schöpfer und Gründer von Zim JS Canvas Framework, bestätigt, der schrieb: <canvas></canvas>

DOM- und DOM -Frameworks sind gut darin, Informationen anzuzeigen, insbesondere Textinformationen. Im Gegensatz dazu ist die Leinwand ein Bild. Der Text kann zu der Leinwand hinzugefügt werden und es reagieren lassen, aber der Text kann jedoch nicht so einfach ausgewählt oder gesucht werden wie auf dem DOM. Lange Scroll -Textseiten oder Text- und Bildseiten sind eine hervorragende Verwendung für DOM. DOM eignet sich perfekt für Social -Media -Websites, Foren, Einkäufe und alle Informations -Apps, an die wir verwendet werden. —— "Wann zu JavaScript Canvas Library oder Framework"

verwendet werden

Hier ist also ein klares Beispiel dafür, wenn nicht

verwendet wird. Aber wann ist <canvas></canvas> eine gute Wahl? <canvas></canvas>

(Sarah Drasners Tweet -Screenshot sollte hier eingebettet sein)

Was kann Canvas gut sind?

Alvin wan markierte die Leistung von Leinwand und SVG basierend auf der Anzahl der gezogenen Objekte und der Größe des Objekts oder der Leinwand selbst. Er fasste die Ergebnisse wie folgt zusammen:

Der Overhead of Dom -Rendering ist trotzdem offensichtlicher, wenn es sich um Hunderte oder sogar Tausende von Objekten handelt. Weder die Leinwand noch die SVG werden jedoch von der Objektgröße beeinflusst. Angesichts der endgültigen Statistiken bietet die Leinwand einen klaren Vorteil in Bezug auf die Leistung.

Basierend auf dem, was wir über Leinwand wissen, insbesondere seine hervorragende Leistung beim Zeichnen einer großen Anzahl von Objekten, finden Sie hier einige Szenarien, die möglicherweise geeignet oder sogar besser als SVG sind.

Spiel und generative Kunst

Leinwand ist normalerweise die beste Wahl für grafischintensive, hoch interaktive Spiele und generative Kunst.

Strahlenverfolgung Strahlenverfolgung ist eine Technik zum Erstellen von 3D -Grafiken.

Strahlenverfolgung kann verwendet werden, um ein Bild zu füllen, indem die Strahlpfade der Pixel in der Bildebene verfolgt und seine Begegnung mit einem virtuellen Objekt simulieren ... die Effekte, die durch Strahlenverfolgung erzielt werden ... reichen von ... Realistic erstellen Bilder aus einfachen Vektorgrafiken tragen einen photoähnlichen Filter an, um rote Augen zu entfernen. ——Svg und Canvas: Wählen Sie, Microsoft -Dokumente.

Wenn Sie neugierig sind, ist dies die Ray Tracing -Anwendung, die Mark Webster ausgeführt hat.

Während HTML5 -Leinwand sicherlich besser für diese Aufgabe als SVG geeignet ist, bedeutet dies nicht unbedingt, dass die Ray -Verfolgung am

-Element am besten durchgeführt wird. Tatsächlich kann der Druck auf die CPU so hoch sein, dass der Browser möglicherweise aufhören zu reagieren.

Zeichnen Sie eine große Anzahl von Objekten auf kleinen Oberflächen

Ein weiteres Beispiel ist eine Szene, in der eine Anwendung eine große Anzahl von Objekten auf einer relativ kleinen Oberfläche zeichnen muss-z. B. nicht interaktive Echtzeitdatenvisualisierungen, wie z. B. grafische Darstellungen von Wettermustern.

Pixelersatz in Video

Wie in diesem HTML5 -Arztartikel gezeigt, besteht ein weiteres Beispiel für die Verwendung von Leinwand darin, die Video -Hintergrundfarbe durch eine andere Farbe, eine andere Szene oder ein Bild zu ersetzen.

Was ist HTML5 -Leinwand nicht gut?

hingegen ist in vielen Fällen Leinwand im Vergleich zu SVG möglicherweise nicht die beste Wahl.

Skalierbarkeit

Die meisten Szenarien, in denen Skalierbarkeit ein Vorteil ist, nutzen SVG anstelle von Leinwand besser. High -Treue, komplexe Grafiken wie Architektur- und Ingenieurzeichnungen, organisatorische Zeichnungen, biologische Zeichnungen usw. sind Beispiele für diese Situation.

Wenn Sie mit SVG zeichnen, das Bild vergrößern oder das Bild drucken, wird alle Details beibehalten, um ein sehr hohes Qualitätsniveau zu erzielen. Sie können diese Dokumente auch aus der Datenbank generieren, wodurch das XML -Format von SVG für diese Aufgabe perfekt ist.

Zusätzlich sind diese Grafiken normalerweise interaktiv. Wenn Sie beispielsweise Ihre Tickets online buchen, sollten Sie die Sitzkarte in Betracht ziehen, was es zu einem hervorragenden Anwendungsfall für erhaltene Grafiksysteme wie SVG macht.

dh mit einigen exzellenten Bibliotheken wie CreateJs und Zim (Extended CreateJS) können Entwickler ihre Mausereignisse integrieren, Tests, Multi-Touch-Gesten, Drag & Drop-Funktionen, Steuerungen und relativ schneller in der Erstellung basierend auf der Erstellung in der Erstellung integrieren Leinwand.

Barrierefreiheit

Während Sie einige Schritte unternehmen können, um die Zugänglichkeit von Canvas -Grafiken zu verbessern - eine gute Leinwandbibliothek (z. B. ZIM) kann Ihnen helfen, den Prozess zu beschleunigen -, ist Canvas nicht großartig, wenn es um die Zugänglichkeit geht. Was Sie auf die Oberfläche der Leinwand zeichnen, sind nur eine Reihe von Pixeln, die assistive Technologie oder Suchmaschinenroboter nicht lesen oder interpretieren können. Dies ist ein weiterer bevorzugter Bereich für SVG: SVG ist nur XML, mit dem sowohl Menschen als auch Maschinen es lesen können.

nicht abhängig von JavaScript

Wenn Sie JavaScript in Ihrer Anwendung nicht verwenden möchten, ist Canvas nicht die beste Wahl. In der Tat besteht die einzige Möglichkeit,

Elemente zu verwenden, um JavaScript zu verwenden. Stattdessen können Sie SVG-Grafiken unter Verwendung von Standard-Vektor-Bearbeitungsprogrammen wie Adobe Illustrator oder Inkscape zeichnen und reine CSS verwenden, um sein Aussehen zu steuern und überzeugende, subtile Animationen und Mikrointeraktionen durchzuführen. <canvas></canvas>

Kombinieren Sie HTML5 -Leinwand und SVG für erweiterte Szenarien

In einigen Fällen kann Ihre Bewerbung das Beste aus beiden Welten erhalten, indem Sie HTML5 -Leinwand und SVG kombinieren. Beispielsweise können Canvas-basierte Spiele SVG-Bilder verwenden, die von Vektorbearbeitungsprogrammen als Sprites generiert werden, um ihre Skalierbarkeit und eine kleinere Download-Größe im Vergleich zu PNG-Bildern zu nutzen. Alternativ kann ein Zeichnungsprogramm seine Benutzeroberfläche mit SVG und <canvas></canvas> -Elementen zum Zeichnen einstellen.

Schließlich können Sie mit einer leistungsstarken Bibliothek wie Paper.js Vektorgrafikskripte über die HTML5 -Leinwand schreiben, um den Entwicklern eine bequeme Möglichkeit zu geben, beide Technologien gleichzeitig zu verwenden.

Schlussfolgerung

In diesem Artikel untersuche ich einige der wichtigsten Funktionen von HTML5 -Leinwand und SVG, damit Sie feststellen können, welche Technologie für eine bestimmte Aufgabe am besten geeignet ist.

Was ist die Antwort?

Chris Coyier stimmt mit Benjamin de Cock überein, der getwittert hat:

Eine äußerst grundlegende Möglichkeit, diese Frage zu beantworten, besteht darin, "Leinwand zu verwenden, wenn Sie SVG nicht verwenden können" (wobei "nicht" bedeuten kann, Tausende von Objekten zu beleben, jedes Pixel einzeln zu manipulieren usw.). Mit anderen Worten, SVG sollte Ihre Standardauswahl sein und Canvas ist Ihr Sicherungsplan.

- Benjamin de Cock (@BDC) 2. Oktober 2019

Dr. Abstract bietet eine Liste vieler der besten Dinge, die Sie mit Leinwand erstellen können, einschließlich interaktiver Logos und Werbung, interaktiver Infografiken, E-Learning-Anwendungen und vielem mehr.

Meiner Meinung nach gibt es keine harten und schnellen Regeln darüber, wann es am besten ist, Leinwand anstelle von SVG zu verwenden. Der Unterschied zwischen dem Echtzeitmodus und dem Retentionsmodus zeigt, dass HTML5-Leinwand der unbestrittene Gewinner ist, wenn es darum geht, grafisch intensive Spiele zu erstellen, und SVG für flache Bilder, Ikonen, UI-Elemente usw. vorzuziehen ist. Dazwischen verfügt HTML5 -Leinwand jedoch auch Raum, um den Anwendungsbereich zu erweitern, insbesondere wenn man bedenkt, was eine Vielzahl leistungsstarker Leinwandbibliotheken bieten kann. Sie erleichtern nicht nur die Verwendung beider Technologien gleichzeitig in derselben grafischen Arbeit, sondern machen auch einige schwierige Funktionen in nativen Canvas -Projekten (z. Dies öffnet die Tür zu interessanteren Verwendungen von HTML5 -Leinwand, die von den meisten Entwicklern verwendet werden.

FAQs für Leinwand gegen SVG

(Der FAQ -Teil sollte hier aufgenommen werden, nach dem ursprünglichen Inhalt neu geschrieben, es präzise und klar halten und mehr natürliche Sprachausdruck verwenden.)

Das obige ist der detaillierte Inhalt vonCanvas vs SVG: Auswahl des richtigen Tools für den Job. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!