SVG und Canvas sind beides Technologien, mit denen man Dinge in Webbrowsern zeichnen kann. Daher lohnt es sich, sie zu vergleichen und zu verstehen, wann die eine besser geeignet ist als die andere. Schon ein grundlegendes Verständnis davon macht die Wahl zwischen beiden recht einfach.
- Ein kleines, einfarbiges Symbol? Das ist eindeutig das Reich von SVG.
- Ein interaktives, konsolenähnliches Spiel? Das ist eindeutig das Reich von Canvas.
Ich weiß, dass wir noch nicht erklärt haben, *warum*, aber ich hoffe, das wird klar, wenn wir tiefer einsteigen.
SVG ist vektorbasiert und deklarativ
Wenn Sie wissen, dass Sie Vektorgrafiken benötigen, ist SVG die richtige Wahl. Vektorgrafiken sind visuell scharf und haben tendenziell eine geringere Dateigröße als Rastergrafiken wie JPG.
Das macht Logos zu einem sehr häufigen Anwendungsfall für SVG. SVG-Code kann direkt in HTML eingebettet werden und sind wie deklarative Zeichenanweisungen.
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" />
</svg>Wenn Ihnen die *Flexibilität* und *Reaktionsfähigkeit* der Grafik sehr wichtig sind, ist SVG der richtige Weg.
Canvas ist eine JavaScript-Zeichen-API
Sie fügen ein <canvas>-Element in HTML ein und führen dann das Zeichnen in JavaScript durch. Mit anderen Worten, Sie geben Befehle, um ihm zu sagen, *wie* es gezeichnet werden soll (was eher *imperativ* als *deklarativ* ist).
<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 ist im DOM
Wenn Sie mit DOM-Ereignissen wie click und mouseDown und so weiter vertraut sind, sind diese auch in SVG verfügbar. Ein <circle> ist in dieser Hinsicht nicht wesentlich anders als ein <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 für Barrierefreiheit
Sie können eine Textalternative für Canvas haben
<canvas aria-label="Hello ARIA World" role="img"></canvas>Das geht auch in SVG, aber da SVG und seine Innereien direkt im DOM sein können, denken wir im Allgemeinen, dass SVG das ist, was Sie verwenden, wenn Sie versuchen, eine zugängliche Erfahrung zu schaffen. Anders ausgedrückt: Sie können ein SVG erstellen, auf das assistive Technologien zugreifen können und Links und Unterelemente mit eigenen auditiven Erklärungen und so weiter finden.
Text ist ebenfalls fest im Reich von SVG angesiedelt. SVG hat buchstäblich ein <text>-Element, das zugänglich ist und visuell scharf ist – im Gegensatz zu Canvas, wo Text typischerweise unscharf ist.
Canvas für Pixel
Wie Sie in Sarah Dransers Vergleich unten sehen werden, ist Canvas eine Art zu sagen: *Tanzt, Pixel, tanzt!* Das ist eine unterhaltsame Art, das Konzept zu erklären, das es besser vermittelt als jede trockene technische Aussage.
Hochgradig interaktive Arbeiten mit sehr vielen komplexen Details und Verläufen sind das Territorium von Canvas. Aus diesem Grund werden Sie viel mehr Spiele mit Canvas als mit SVG sehen, obwohl es immer Ausnahmen gibt (beachten Sie die einfache Vektor-ähnliche Natur dieses Spiels).
CSS kann mit SVG interagieren
Wir haben oben gesehen, dass SVG im DOM sein kann und dass JavaScript dort hineingreifen und Dinge tun kann. Die Geschichte ist ähnlich mit CSS.
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" />
<style>
circle { fill: blue; }
</style>
</svg>Beachten Sie, wie ich die <script>- und <style>-Blöcke für diese Beispiele innerhalb des <svg> platziert habe, was gültig ist. Aber unter der Annahme, dass Sie das SVG buchstäblich in HTML platziert haben, könnten Sie diese auslagern oder andere externe CSS- und JavaScript-Dateien das Gleiche tun lassen.
Wir haben einen umfangreichen Leitfaden für SVG-Eigenschaften und CSS. Aber was großartig zu wissen ist, ist, dass die Dinge, bei denen CSS gut ist, in SVG immer noch möglich sind, wie :hover-Zustände und Animationen!
Siehe den Pen
ExxbpBE von Chris Coyier (@chriscoyier)
auf CodePen.
Kombinationen
Technisch gesehen schließen sie sich nicht vollständig aus. Ein <svg> kann auf ein <canvas> gemalt werden.
Wie Blake Bowen beweist, können Sie das SVG sogar sehr scharf auf dem Canvas halten!
Siehe den Pen
SVG vs Canvas Scaling von Blake Bowen (@osublake)
auf CodePen.
Ruth Johns Vergleich
Siehe den Pen
SVG vs Canvas von Rumyra (@Rumyra)
auf CodePen.
Sarah Drasners Vergleich
Tabelliert aus diesem Tweet.
| DOM/Virtuelles DOM | Canvas | |
|---|---|---|
| Pro | ||
| Großartig für UI/UX-Animationen | Tanzt, Pixel, tanzt! | |
| Großartig für SVG, das auflösungsunabhängig ist | Großartig für wirklich beeindruckende 3D- oder immersive Inhalte | |
| Einfacher zu debuggen | Bewegung von vielen Objekten | |
| Contra | ||
| Panzer mit vielen Objekten | Schwieriger zugänglich zu machen | |
| Da man sich um die Art der Animation kümmern muss | Nicht standardmäßig auflösungsunabhängig | |
| Bricht zu nichts zusammen |
Shirley Wus Vergleich
Tabelliert aus diesem Tweet.
| SVG | Canvas | |
|---|---|---|
| Pro | Einfach zu starten | Sehr performant |
| Einfacher, Benutzerinteraktionen zu registrieren | Einfach zu aktualisieren | |
| Einfach zu animieren | ||
| Contra | Potenziell komplexer DOM | Mehr Aufwand für den Start |
| Nicht performant für eine große Anzahl von Elementen | Mehr Aufwand für die Handhabung von Interaktionen | |
| Müssen eigene Animationen schreiben |
Viele Leute betrachten Szenarien mit vielen Objekten (1.000+, wie Shirley sagt) als das Territorium von Canvas.
SVG ist die Standardwahl; Canvas ist die Rückfallebene
Eine starke Meinung, aber sie fühlt sich für mich richtig an
Eine extrem grundlegende Art, sie zu beantworten, ist: "Verwenden Sie Canvas, wenn Sie kein SVG verwenden können" (wobei "können nicht" das Animieren Tausender von Objekten, das individuelle Manipulieren jedes Pixels usw. bedeuten könnte). Anders ausgedrückt: SVG sollte Ihre Standardwahl sein, Canvas Ihr Plan B.
— Benjamin De Cock (@bdc) 2. Oktober 2019
Zusammenfassung
Wenn wir also auf diese ersten beiden Aufzählungspunkte zurückkommen…
- Ein kleines, einfarbiges Symbol? SVG geht in den DOM, also macht etwas wie ein Symbol innerhalb eines Buttons für SVG sehr viel Sinn – ganz zu schweigen davon, dass es mit CSS gesteuert werden kann und reguläre JavaScript-Ereignisbehandler und so etwas hat.
- Ein interaktives, konsolenähnliches Spiel? Das wird viele, viele bewegliche Elemente, komplexe Animationen und Interaktionen sowie Performance-Überlegungen haben. Das sind Dinge, bei denen Canvas hervorragend ist.
Und doch gibt es hier einen Haufen Zwischenbereiche. Als alltäglicher Webdesigner/Entwickler finde ich SVG auf praktischer Ebene viel nützlicher. Ich bin mir nicht sicher, ob ich jemals produktive Arbeit in Canvas geleistet habe. Ein Teil davon liegt daran, dass ich Canvas nicht annähernd so gut kenne. Ich habe ein Buch über SVG geschrieben, daher habe ich auf dieser Seite viel mehr recherchiert, aber ich weiß genug, dass SVG für meine Bedürfnisse das Richtige tut.