SVG oder Leinwand?

SVG und Canvas sind Technologien, mit denen Sie etwas auf Webseiten zeichnen können. Daher sollten sie verglichen und herausgefunden werden, wann SVG und wann Canvas verwendet werden soll. Selbst ein sehr oberflächliches Verständnis des Wesens dieser Technologien ermöglicht es Ihnen, eine sehr fundierte Wahl zu treffen. In der Tat sind hier zwei typische Situationen, in denen Sie SVG bevorzugen sollten, und in der anderen - Canvas:

• Müssen Sie ein kleines Symbol zeichnen? Dies ist sicherlich das Territorium von SVG.
• Müssen Sie ein interaktives Browsergame erstellen? Hier brauchen wir definitiv Canvas-Technologie.

Der Autor des Artikels, dessen Übersetzung wir heute veröffentlichen, sagt, dass er weiß, dass er die Gründe für diese Wahl noch nicht aufgedeckt hat. Er hofft jedoch, dass diese Gründe völlig offensichtlich werden, wenn er einige Details zu SVG und Canvas mitteilt.

SVG - Vektorgrafiken deklarativ beschrieben

Wenn Sie wissen, dass Sie ein Vektorbild auf einer Webseite platzieren müssen, ist SVG genau das Richtige für Sie. Vektorbilder sehen normalerweise besser aus als ähnliche Rasterbilder, die beispielsweise in JPG-Dateien gespeichert sind. Darüber hinaus sind Vektorbilddateien normalerweise kleiner als Rasterbilddateien.

Das Ergebnis ist, dass SVG sehr oft zum Zeichnen von Logos verwendet wird . Code, der solche Bilder beschreibt, kann direkt in HTML eingebettet werden. Es sieht aus wie eine Reihe von deklarativen Anweisungen:

<svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" /> </svg> 

Wenn Sie flexible und reaktionsschnelle Bilder benötigen, ist SVG Ihre Wahl.

Canvas - JavaScript-API zum Zeichnen

Um Canvas-Bilder im HTML-Code der Seite zu erstellen, platzieren Sie das <canvas> Anschließend "zeichnen" Sie mithilfe von JavaScript auf dieses Element. Mit anderen Worten, der Programmierer gibt dem Browser Anweisungen, wie er etwas zeichnen muss (dieser Ansatz ist dem Imperativ näher als dem Deklarativ). So sieht es aus:

 <canvas id="myCanvas" width="578" height="200"></canvas> <script>  var canvas = document.getElementById('myCanvas');  var context = canvas.getContext('2d');  var centerX = canvas.width / 2;  var centerY = canvas.height / 2;  var radius = 70;  context.beginPath();  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);  context.fillStyle = 'green';  context.fill(); </script> 

SVG-Bilder werden im DOM gespeichert

Wenn Sie mit DOM-Ereignissen wie click und mouseDown , beachten Sie, dass diese Ereignisse auch bei der Arbeit mit SVG verwendet werden können. In dieser Hinsicht unterscheidet sich das SVG-Element <circle> nicht wesentlich vom HTML-Element <div> .

 <svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" />   <script>    document.querySelector('circle').addEventListener('click', e => {      e.target.style.fill = "red";    });  </script> </svg> 

SVG ist besser, um Seiteninhalte zugänglich zu machen

Dem Canvas-Element kann seine Textalternative zugewiesen werden:

 <canvas aria-label="Hello ARIA World" role="img"></canvas> 

Dasselbe kann für das SVG-Element durchgeführt werden. Da SVG-Bilder und ihre internen Mechanismen jedoch direkt im DOM gespeichert werden, wird SVG in der Regel als Technologie betrachtet, die in Fällen verwendet wird, in denen Projekte erstellt werden, die für Menschen mit Behinderungen zugänglich sind.

Mit anderen Worten, Sie können ein SVG-Bild erstellen, mit dessen Hilfe Hilfstechnologien die Benutzer beim Navigieren auf Webseiten unterstützen können.

Textdaten, die Teil der Bilder sind, sind auch dann der Fall, wenn die Verwendung von SVG vorzuziehen ist. SVG hat sogar ein spezielles Element - <text> . Es erlaubt Ihnen, klare Zeichen von Texten anzuzeigen, es wird von assistierender Technologie wahrgenommen. Wenn Sie das Canvas-Element zur Visualisierung von Texten verwenden, werden solche Texte häufig schlecht angezeigt und sehen unscharf aus.

Canvas ist besser für die Arbeit mit einzelnen Pixelbildern

Nachfolgend finden Sie einige Tabellen, die auf der Grundlage eines Vergleichs von SVG und Canvas von verschiedenen Experten zusammengestellt wurden. In einem solchen Vergleich, der von Sarah Drasner durchgeführt wurde, heißt es, dass man mit Leinwand Pixel zum Tanzen bringen kann. Das ist natürlich ein Witz, aber im Grunde genommen ist es so.

Canvas eignet sich hervorragend zum Erstellen interaktiver Bilder mit vielen komplexen Details, Farbübergängen und vielem mehr. Aus diesem Grund wird Canvas bei der Entwicklung einer viel größeren Anzahl von Browserspielen als SVG verwendet. Obwohl Sie natürlich immer Abweichungen von allgemeinen Trends finden können. Hier ist zum Beispiel ein Spiel, dessen Grafiken mit SVG-Tools erstellt werden.


SVG-Spiel

Bitte beachten Sie, dass die grafische Komponente sehr einfach ist und ziemlich "vektoriell" aussieht.

CSS-Bilder können mit CSS beeinflusst werden

Wir haben bereits gesagt, dass SVG-Elemente im DOM gespeichert sind und dass der Zugriff auf diese Elemente über JavaScript-Code möglich ist. Im Falle von CSS wiederholt sich diese Geschichte:

 <svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" />   <style>    circle { fill: blue; }  </style> </svg> 

Bitte beachten Sie, dass in den Beispielen die Blöcke <script> und <style> innerhalb des Blocks <svg> sind. Das ist völlig normal. Unter Berücksichtigung der Tatsache, dass sich das SVG-Element in einfachem HTML-Code befindet, stellt sich heraus, dass die internen <script> und <style> -Blöcke vollständig daraus entfernt werden können. Bei Bedarf können Sie das SVG-Element auch mit externen Stilen und Skripten bearbeiten.

Hier finden Sie viele Informationen zu den Eigenschaften von SVG-Elementen und CSS. Das Wichtigste dabei ist, dass für SVG alles gilt, was mit Seitenelementen unter Verwendung von CSS möglich ist. Dies verwendet beispielsweise die Elemente :hover pseudo :hover und animating.

Hier ist ein Beispiel für die Animation eines <circle> -Elements mit CSS.

 <svg viewBox="0 0 100 100">   <circle cx="50" cy="50" r="50" />   <style>    circle { fill: blue; animation: pulse 2s alternate infinite; }    @keyframes pulse {      100% {        r: 30;      }    }  </style>   <script>    document.querySelector('circle').addEventListener('click', e => {      e.target.style.fill = "red";    });  </script> </svg> 

CSS-Elementanimationen mit CSS

Kombination von SVG und Canvas

Aus technischer Sicht können Canvas- und SVG-Technologien nicht als sich gegenseitig ausschließend bezeichnet werden. SVG-Bilder können beispielsweise in <canvas> -Elementen angezeigt werden. Gleichzeitig können, wie in diesem Beispiel zu sehen ist, SVG-Bilder, die im <canvas> -Element angezeigt werden, sehr gut sehr klar und von hoher Qualität bleiben.


SVG-Bild in <canvas> -Element ausgeben

Schauen wir uns nun einige Tabellen an, in denen Vergleiche zwischen SVG und Canvas zusammengefasst sind, die von verschiedenen Experten erstellt wurden.

Vergleich von SVG und Canvas

»Ruth John

Hier ist das Projekt, auf dessen Grundlage die folgende Tabelle erstellt wird.

▍ Sarah Drasner

Die folgende Tabelle basiert auf diesem Tweet.

»Shirley Wu

Die folgende Tabelle basiert auf diesem Tweet.

Viele Leute denken, dass Leinwand besser für die Arbeit mit einer großen Anzahl von Objekten ist (laut Shirley - wenn es mehr als 1000 gibt).

SVG ist die Standardauswahl. Canvas ist ein Fallback

Hier ist die Antwort auf meinen Tweet zu Optionen für die Verwendung von SVG und Canvas. Der Autor dieser Antwort gibt an, dass die Auswahl zwischen SVG und Canvas folgendermaßen erfolgen sollte: "Verwenden Sie Canvas, wenn Sie SVG nicht verwenden können." Unter den Situationen, in denen SVG normalerweise nicht verwendet werden kann, können wir diejenigen nennen, in denen Sie Tausende von Objekten animieren, mit jedem bestimmten Pixel im Bild arbeiten müssen und so weiter.

Zusammenfassung

Zu Beginn dieses Artikels haben wir zwei typische Verwendungen von SVG und Canvas vorgestellt. Wir werden zu ihnen zurückkehren und ihre Beschreibungen erweitern, wobei wir berücksichtigen, was wir gerade gelernt haben.

• Müssen Sie ein kleines Symbol zeichnen? Dies ist sicherlich das Territorium von SVG. Tatsache ist, dass die Beschreibung des SVG-Bildes im DOM gespeichert ist, da SVG sich hervorragend zum Zeichnen von Symbolen auf einer Schaltfläche eignet. Selbstverständlich können SVG-Bilder durch CSS beeinflusst werden. Mithilfe von JavaScript können Sie Ereignishandler mit ihren Elementen verbinden.
• Müssen Sie ein interaktives Browsergame erstellen? Hier brauchen wir definitiv Canvas-Technologie. Das Browsergame wird mit Sicherheit viele bewegende Elemente und komplexe Animationen enthalten. Elemente der Spielwelt werden miteinander interagieren, was bestimmte Leistungsanforderungen bedeutet. Canvas eignet sich hervorragend zur Lösung solcher Probleme.

Es ist zu beachten, dass zwischen diesen beiden extremen Optionen eine große Zwischenzone besteht. Als Webentwickler und Designer halte ich SVG beispielsweise aus praktischer Sicht für praktischer. Ich weiß nicht einmal, ob ich ein echtes Projekt mit Leinwand machen würde. Vielleicht liegt das auch daran, dass ich mit Leinwand nicht genug vertraut bin. Und ich kenne SVG ziemlich gut. Ich habe diese Technologie studiert und ein Buch darüber geschrieben. Daher weiß ich genug über SVG, sodass diese Technologie mir helfen kann, das zu tun, was ich brauche.

Sehr geehrte Leser! In welchen Situationen verwenden Sie SVG und in welcher Zeichenfläche?