HTML5 Canvas vs. SVG vs. div

Was ist der beste Ansatz, um Elemente im laufenden Betrieb zu erstellen und sie bewegen zu können? Angenommen, ich möchte ein Rechteck, einen Kreis und ein Polygon erstellen und dann diese Objekte auswählen und verschieben.

Ich verstehe, dass HTML5 drei Elemente bietet, die dies ermöglichen können: svg , canvas und div . Für was ich tun möchte, welches dieser Elemente bietet die beste Leistung?

Um diese Ansätze zu vergleichen, habe ich mir überlegt, drei visuell identische Webseiten zu erstellen, die jeweils eine Kopf-, Fuß-, Widget- und Textinhalt enthalten. Das Widget auf der ersten Seite wird vollständig mit dem canvasElement erstellt, das zweite vollständig mit dem svgElement und das dritte vollständig mit dem einfachen divElement HTML und CSS.

Die kurze Antwort:

SVG wäre für Sie einfacher , da die Auswahl und das Verschieben bereits integriert sind. SVG-Objekte sind DOM-Objekte, daher verfügen sie über "Klick" -Handler usw.

DIVs sind in Ordnung, aber klobig und haben eine schreckliche Leistungsbelastung bei großen Zahlen.

Canvas bietet zweifellos die beste Leistung, Sie müssen jedoch alle Konzepte des verwalteten Status (Objektauswahl usw.) selbst implementieren oder eine Bibliothek verwenden.

Die lange Antwort:

HTML5 Canvas ist einfach eine Zeichenfläche für eine Bitmap. Sie haben sich eingerichtet, um zu zeichnen (z. B. mit Farbe und Linienstärke), das Ding zu zeichnen, und dann hat die Leinwand keine Kenntnis von diesem Ding: Es weiß nicht, wo es ist oder was es ist, das Sie gerade gezeichnet haben, es ist nur Pixel. Wenn Sie Rechtecke zeichnen und sie verschieben oder auswählbar sein möchten, müssen Sie all dies von Grund auf neu codieren, einschließlich des Codes, um sich daran zu erinnern, dass Sie sie gezeichnet haben.

SVG hingegen muss Verweise auf jedes Objekt enthalten, das es rendert. Jedes von Ihnen erstellte SVG / VML-Element ist ein echtes Element im DOM. Standardmäßig können Sie die von Ihnen erstellten Elemente viel besser verfolgen und den Umgang mit Mausereignissen standardmäßig vereinfachen. Bei einer großen Anzahl von Objekten wird dies jedoch erheblich verlangsamt

Diese SVG-DOM-Referenzen bedeuten, dass ein Teil der Arbeit im Umgang mit den von Ihnen gezeichneten Dingen für Sie erledigt wird. Und SVG ist schneller beim Rendern wirklich großer Objekte, aber langsamer beim Rendern vieler Objekte.

Ein Spiel wäre in Canvas wahrscheinlich schneller. Ein riesiges Kartenprogramm wäre in SVG wahrscheinlich schneller. Wenn Sie Canvas verwenden möchten, habe ich einige Tutorials, um bewegliche Objekte hier zum Laufen zu bringen .

Canvas ist besser für schnellere Dinge und umfangreiche Bitmap-Manipulationen (wie Animationen) geeignet, benötigt jedoch mehr Code, wenn Sie viel Interaktivität wünschen.

Ich habe eine Reihe von Zahlen für von HTML DIV erstellte Zeichnungen im Vergleich zu von Canvas erstellten Zeichnungen ausgeführt. Ich könnte einen großen Beitrag über die Vorteile der einzelnen Tests verfassen, aber ich werde einige der relevanten Ergebnisse meiner Tests angeben, die für Ihre spezifische Anwendung zu berücksichtigen sind:

Ich habe Canvas- und HTML-DIV-Testseiten erstellt, beide hatten bewegliche "Knoten". Canvas-Knoten waren Objekte, die ich in Javascript erstellt und verfolgt habe. HTML-Knoten waren bewegliche Divs.

Ich habe jedem meiner beiden Tests 100.000 Knoten hinzugefügt. Sie haben ganz anders gespielt:

Das Laden der Registerkarte "HTML-Test" hat ewig gedauert (etwas weniger als 5 Minuten, Chrome hat darum gebeten, die Seite beim ersten Mal zu beenden). Der Task-Manager von Chrome gibt an, dass die Registerkarte 168 MB belegt. Es nimmt 12-13% CPU-Zeit in Anspruch, wenn ich es betrachte, 0%, wenn ich es nicht betrachte.

Die Registerkarte Canvas wird in einer Sekunde geladen und nimmt 30 MB ein. Außerdem nimmt es die ganze Zeit 13% der CPU-Zeit in Anspruch, unabhängig davon, ob man es sich ansieht oder nicht. (2013 bearbeiten: Sie haben das größtenteils behoben)

Das Ziehen auf der HTML-Seite ist reibungsloser, was vom Design erwartet wird, da das aktuelle Setup im Canvas-Test ALLES alle 30 Millisekunden neu zeichnet. Dafür gibt es für Canvas zahlreiche Optimierungen. (Die Ungültigmachung der Zeichenfläche ist am einfachsten, auch das Ausschneiden von Regionen, das selektive Neuzeichnen usw. hängt nur davon ab, wie sehr Sie sich für die Implementierung interessieren.)

Es besteht kein Zweifel, dass Canvas bei der Objektmanipulation schneller sein kann als die Divs in diesem einfachen Test und natürlich viel schneller in der Ladezeit. Das Zeichnen / Laden ist in Canvas schneller und bietet auch viel mehr Raum für Optimierungen (dh das Ausschließen von Dingen außerhalb des Bildschirms ist sehr einfach).

Fazit:

• SVG ist wahrscheinlich besser für Anwendungen und Apps mit wenigen Elementen (weniger als 1000? Kommt wirklich darauf an)
• Canvas ist besser für Tausende von Objekten und sorgfältige Manipulationen geeignet, aber es wird viel mehr Code (oder eine Bibliothek) benötigt, um es in Betrieb zu nehmen.
• HTML-Divs sind klobig und nicht skalierbar. Das Erstellen eines Kreises ist nur mit abgerundeten Ecken möglich. Das Erstellen komplexer Formen ist möglich, umfasst jedoch Hunderte winziger, pixelweiter Divs. Wahnsinn folgt.

Um dies hinzuzufügen, habe ich eine Diagrammanwendung erstellt und zunächst mit Canvas begonnen. Das Diagramm besteht aus vielen Knoten, und sie können ziemlich groß werden. Der Benutzer kann Elemente im Diagramm verschieben.

Was ich fand, war, dass auf meinem Mac SVG für sehr große Bilder überlegen ist. Ich habe ein MacBook Pro 2013 13 "Retina, und es läuft die Geige unten ziemlich gut. Das Bild ist 6000x6000 Pixel groß und hat 1000 Objekte. Eine ähnliche Konstruktion auf Leinwand war für mich unmöglich zu animieren, als der Benutzer Objekte in der Retina herumzog Diagramm.

Auf modernen Displays müssen Sie auch unterschiedliche Auflösungen berücksichtigen, und hier bietet Ihnen SVG all dies kostenlos an.

Geige: http://jsfiddle.net/knutsi/PUcr8/16/

Vollbild: http://jsfiddle.net/knutsi/PUcr8/16/embedded/result/

var wiggle_factor = 0.0;
nodes = [];

// create svg:
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('style', 'border: 1px solid black');
svg.setAttribute('width', '6000');
svg.setAttribute('height', '6000');

svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink",
    "http://www.w3.org/1999/xlink");

document.body.appendChild(svg);


function makeNode(wiggle) {
    var node = document.createElementNS("http://www.w3.org/2000/svg", "g");
    var node_x = (Math.random() * 6000);
    var node_y = (Math.random() * 6000);
    node.setAttribute("transform", "translate(" + node_x + ", " + node_y +")");

    // circle:
    var circ = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circ.setAttribute( "id","cir")
    circ.setAttribute( "cx", 0 + "px")
    circ.setAttribute( "cy", 0 + "px")
    circ.setAttribute( "r","100px");
    circ.setAttribute('fill', 'red');
    circ.setAttribute('pointer-events', 'inherit')

    // text:
    var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    text.textContent = "This is a test! ÅÆØ";

    node.appendChild(circ);
    node.appendChild(text);

    node.x = node_x;
    node.y = node_y;

    if(wiggle)
        nodes.push(node)
    return node;
}

// populate with 1000 nodes:
for(var i = 0; i < 1000; i++) {
    var node = makeNode(true);
    svg.appendChild(node);
}

// make one mapped to mouse:
var bnode = makeNode(false);
svg.appendChild(bnode);

document.body.onmousemove=function(event){
    bnode.setAttribute("transform","translate(" +
        (event.clientX + window.pageXOffset) + ", " +
        (event.clientY + window.pageYOffset) +")");
};

setInterval(function() {
    wiggle_factor += 1/60;
    nodes.forEach(function(node) {

        node.setAttribute("transform", "translate(" 
                          + (Math.sin(wiggle_factor) * 200 + node.x) 
                          + ", " 
                          + (Math.sin(wiggle_factor) * 200 + node.y) 
                          + ")");        
    })
},1000/60);

Die Unterschiede zwischen SVG und Canvas zu kennen, wäre hilfreich bei der Auswahl des richtigen.

Segeltuch

• Auflösungsabhängig
• Keine Unterstützung für Event-Handler
• Schlechte Textwiedergabefunktionen
• Sie können das resultierende Bild als .png oder .jpg speichern
• Gut geeignet für grafikintensive Spiele

SVG

• Auflösung unabhängig
• Unterstützung für Event-Handler
• Am besten geeignet für Anwendungen mit großen Rendering-Bereichen (Google Maps)
• Langsames Rendern, wenn es komplex ist (alles, was das DOM häufig verwendet, ist langsam)
• Nicht für Spieleanwendungen geeignet

Ich stimme den Schlussfolgerungen von Simon Sarris zu:

Ich habe einige Visualisierungen in Protovis (SVG) mit Processingjs (Canvas) verglichen, die> 2000 Punkte anzeigen, und Processingjs ist viel schneller als Protovis.

Das Behandeln von Ereignissen mit SVG ist natürlich viel einfacher, da Sie sie an die Objekte anhängen können. In Canvas müssen Sie dies manuell tun (Mausposition überprüfen usw.), aber für eine einfache Interaktion sollte es nicht schwierig sein.

Es gibt auch die Bibliothek dojo.gfx des Dojo-Toolkits. Es bietet eine Abstraktionsschicht und Sie können den Renderer angeben (SVG, Canvas, Silverlight). Das könnte auch eine praktikable Wahl sein, obwohl ich nicht weiß, wie viel Overhead die zusätzliche Abstraktionsschicht hinzufügt, aber es erleichtert das Codieren von Interaktionen und Animationen und ist rendererunabhängig.

Hier einige interessante Benchmarks:

• http://svbreakaway.info/tp.php#jan21a
• http://www.eleqtriq.com/2010/02/canvas-svg-flash/
• http://smus.com/canvas-vs-svg-performance/

Nur meine 2 Cent bezüglich der Divs Option.

Famous / Infamous und SamsaraJS (und möglicherweise andere) verwenden absolut positionierte nicht verschachtelte Divs (mit nicht trivialem HTML / CSS-Inhalt), kombiniert mit Matrix2d / Matrix3d ​​für die Positionierung und 2D / 3D-Transformationen, und erzielen auf moderater mobiler Hardware stabile 60 FPS Also würde ich dagegen argumentieren, dass Divs eine langsame Option sind.

Auf Youtube und anderswo gibt es zahlreiche Bildschirmaufnahmen von hochleistungsfähigen 2D / 3D-Inhalten, die im Browser ausgeführt werden. Alles ist ein DOM-Element, auf dem Sie das Element mit 60 FPS überprüfen können (gemischt mit WebGL für bestimmte Effekte, jedoch nicht für das Hauptteil des Renderings).

Obwohl die meisten der oben genannten Antworten immer noch zutreffend sind, denke ich, dass sie ein Update verdienen:

Im Laufe der Jahre hat sich die Leistung von SVG erheblich verbessert, und jetzt gibt es hardwarebeschleunigte CSS-Übergänge und -Animationen für SVG , die überhaupt nicht von der JavaScript-Leistung abhängen. Natürlich hat sich auch die JavaScript-Leistung und damit die Leistung von Canvas verbessert, aber nicht so sehr, wie SVG verbessert wurde. Außerdem gibt es ein "neues Kind" auf dem Block, das heutzutage in fast allen Browsern verfügbar ist, und das ist WebGL . Um die gleichen Wörter zu verwenden, die Simon oben verwendet hat: Es schlägt sowohl Canvas als auch SVG zweifellos. Dies bedeutet jedoch nicht, dass es sich um die Go-to-Technologie handeln sollte, da es ein Biest ist, mit dem man arbeiten kann, und es ist nur in ganz bestimmten Anwendungsfällen schneller.

Meiner Meinung nach bietet SVG für die meisten Anwendungsfälle heute das beste Verhältnis von Leistung zu Benutzerfreundlichkeit. Visualisierungen müssen sehr komplex (in Bezug auf die Anzahl der Elemente) und gleichzeitig sehr einfach (pro Element) sein, damit Canvas und noch mehr WebGL wirklich glänzen.

In dieser Antwort auf eine ähnliche Frage gebe ich weitere Details an, warum ich denke, dass die Kombination aller drei Technologien manchmal die beste Option ist, die Sie haben.

Für Ihre Zwecke empfehle ich die Verwendung von SVG, da DOM-Ereignisse wie Maushandhabung, einschließlich Drag & Drop, enthalten sind, Sie kein eigenes Neuzeichnen implementieren müssen und den Status von nicht verfolgen müssen Ihre Objekte. Verwenden Sie Canvas, wenn Sie Bitmap-Bilder bearbeiten müssen, und verwenden Sie ein reguläres div, wenn Sie in HTML erstellte Inhalte bearbeiten möchten. In Bezug auf die Leistung werden Sie feststellen, dass moderne Browser jetzt alle drei beschleunigen, aber dass die Leinwand bisher die größte Aufmerksamkeit erhalten hat. Auf der anderen Seite ist es entscheidend, wie gut Sie Ihr Javascript schreiben, um die bestmögliche Leistung mit Canvas zu erzielen. Daher würde ich weiterhin die Verwendung von SVG empfehlen.

Während des Googelns finde ich eine gute Erklärung zur Verwendung und Komprimierung von SVG und Canvas unter http://teropa.info/blog/2016/12/12/graphics-in-angular-2.html

Ich hoffe es hilft:

• SVG verwendet wie HTML beibehaltenes Rendering : Wenn wir ein Rechteck auf dem Bildschirm zeichnen möchten, verwenden wir deklarativ ein Element in unserem DOM. Der Browser zeichnet dann ein Rechteck, erstellt jedoch auch ein speicherinternes SVGRectElement- Objekt, das das Rechteck darstellt. Dieses Objekt bleibt für uns zur Manipulation erhalten - es bleibt erhalten. Wir können ihm im Laufe der Zeit verschiedene Positionen und Größen zuweisen. Wir können auch Ereignis-Listener anhängen, um sie interaktiv zu gestalten.
• Canvas verwendet sofortiges Rendern : Wenn wir ein Rechteck zeichnen , rendert der Browser sofort ein Rechteck auf dem Bildschirm, aber es wird niemals ein "Rechteckobjekt" geben, das es darstellt. Es gibt nur ein paar Pixel im Canvas-Puffer. Wir können das Rechteck nicht verschieben. Wir können nur ein anderes Rechteck zeichnen. Wir können nicht auf Klicks oder andere Ereignisse im Rechteck reagieren. Wir können nur auf Ereignisse auf der gesamten Leinwand reagieren .

Canvas ist also eine niedrigere, restriktivere API als SVG. Aber das hat eine Kehrseite: Mit Canvas können Sie mit der gleichen Menge an Ressourcen mehr erreichen. Da der Browser nicht das speicherinterne Objektdiagramm aller von uns gezeichneten Objekte erstellen und verwalten muss, benötigt er weniger Speicher und Rechenressourcen, um dieselbe visuelle Szene zu zeichnen. Wenn Sie eine sehr große und komplexe Visualisierung zeichnen möchten, ist Canvas möglicherweise Ihr Ticket.