Was ist der Unterschied zwischen SVG und HTML5 Canvas?

Was sind die Unterschiede zwischen SVG und HTML5 Canvas? Sie scheinen mir beide dasselbe anzutun. Grundsätzlich zeichnen beide Vektorgrafiken mit Koordinatenpunkten.

Was vermisse ich? Was sind die Hauptunterschiede zwischen SVG und HTML5 Canvas? Warum sollte ich einen über den anderen wählen?

Siehe Wikipedia: http://en.wikipedia.org/wiki/Canvas_element

SVG ist ein früherer Standard zum Zeichnen von Formen in Browsern. SVG befindet sich jedoch auf einer grundlegend höheren Ebene, da jede gezeichnete Form als Objekt in einem Szenendiagramm oder DOM gespeichert wird, das anschließend in eine Bitmap gerendert wird. Dies bedeutet, dass der Browser die Szene automatisch neu rendern kann, wenn Attribute eines SVG-Objekts geändert werden.

Im obigen Beispiel wird die Tatsache, dass das Rechteck gezeichnet wurde, vom System vergessen, sobald es gezeichnet wurde. Wenn die Position geändert werden soll, muss die gesamte Szene neu gezeichnet werden, einschließlich aller Objekte, die möglicherweise vom Rechteck abgedeckt wurden. Im entsprechenden SVG-Fall könnte man jedoch einfach die Positionsattribute des Rechtecks ​​ändern und der Browser würde bestimmen, wie es neu gezeichnet werden soll. Es ist auch möglich, eine Leinwand in Ebenen zu malen und dann bestimmte Ebenen neu zu erstellen.

SVG-Bilder werden in XML dargestellt, und komplexe Szenen können mit XML-Bearbeitungstools erstellt und verwaltet werden.

Das SVG-Szenendiagramm ermöglicht die Zuordnung von Ereignishandlern zu Objekten, sodass ein Rechteck möglicherweise auf ein onClick-Ereignis reagiert. Um die gleiche Funktionalität mit Canvas zu erhalten, müssen die Koordinaten des Mausklicks manuell mit den Koordinaten des gezeichneten Rechtecks ​​abgeglichen werden, um festzustellen, ob darauf geklickt wurde.

Konzeptionell ist Canvas ein Protokoll niedrigerer Ebene, auf dem SVG aufgebaut sein könnte. [Zitieren erforderlich] Dies ist jedoch (normalerweise) nicht der Fall - es handelt sich um unabhängige Standards. Die Situation ist kompliziert, da es Szenendiagrammbibliotheken für Canvas gibt und SVG über einige Funktionen zur Manipulation von Bitmaps verfügt.

UPDATE: Ich verwende SVG aufgrund seiner Markup-Sprachfähigkeiten - es kann von XSLT verarbeitet werden und andere Markups in seinen Knoten enthalten. Ebenso kann ich SVG in meinem Markup (Chemie) halten. Dadurch kann ich SVG-Attribute (z. B. Rendering) durch Markup-Kombinationen bearbeiten. Dies mag in Canvas möglich sein, aber ich vermute, dass es viel schwieriger ist.

SVG ist wie ein "Draw" -Programm. Die Zeichnung wird als Zeichnungsanweisung für jede Form angegeben und jeder Teil einer beliebigen Form kann geändert werden. Zeichnungen sind formorientiert.

Canvas ist wie ein "Mal" -Programm. Sobald die Pixel auf dem Bildschirm erscheinen, ist dies Ihre Zeichnung. Sie können Formen nur ändern, indem Sie sie mit anderen Pixeln überschreiben. Gemälde sind pixelorientiert.

Für einige Programme ist es sehr wichtig, Zeichnungen ändern zu können. zB Zeichnen von Apps, Diagrammtools usw. SVG hat hier also einen Vorteil.

Für einige künstlerische Programme ist es wichtig, einzelne Pixel steuern zu können.

Mit Canvas ist es einfacher als mit SVG, eine hervorragende Animationsleistung für die Benutzermanipulation über Mauszüge zu erzielen.

Ein einzelnes Pixel auf dem Computerbildschirm verbraucht häufig 4 Byte an Informationen, und ein Computerbildschirm benötigt heutzutage mehrere Megabyte. Daher ist Canvas möglicherweise unpraktisch, wenn Sie den Benutzer ein Bild bearbeiten und dann erneut hochladen möchten.

Im Gegensatz dazu nimmt das Zeichnen einer Handvoll Formen, die mit SVG den gesamten Bildschirm abdecken, einige Bytes in Anspruch, wird schnell heruntergeladen und kann problemlos wieder hochgeladen werden, mit den gleichen Vorteilen, die in diese Richtung gehen, wie wenn es in die andere Richtung geht. SVG kann also schneller sein als Canvas.

Google hat Google Maps mit SVG implementiert. Das gibt der Web-App ihre flotte Leistung und das reibungslose Scrollen.

High Level Zusammenfassung von Canvas vs. SVG

Segeltuch

1. Pixelbasiert (Dynamic .png)
2. Einzelnes HTML-Element. (Element im Entwicklertool überprüfen. Sie können nur Canvas-Tags sehen.)
3. Nur über das Skript geändert
4. Die Interaktion zwischen Ereignismodell und Benutzer ist detailliert (x, y).
5. Die Leistung ist besser bei kleinerer Oberfläche, einer größeren Anzahl von Objekten (> 10.000) oder beidem

SVG

1. Formbasiert
2. Mehrere grafische Elemente, die Teil des DOM werden
3. Geändert durch Skript und CSS
4. Ereignismodell / Benutzerinteraktion wird abstrahiert (rect, path)
5. Die Leistung ist bei einer geringeren Anzahl von Objekten (<10 KB), einer größeren Oberfläche oder beidem besser

Detaillierte Informationen zu den Unterschieden finden Sie unter http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx

Es gibt einen Unterschied, was sie sind und was sie für Sie tun.

• SVG ist ein Dokumentformat für skalierbare Vektorgrafiken.
• Canvas ist eine Javascript-API zum Zeichnen von Vektorgrafiken auf eine Bitmap einer bestimmten Größe.

Um etwas näher auf Format und API einzugehen:

Mit svg können Sie die Datei in vielen verschiedenen Tools anzeigen, speichern und bearbeiten. Mit Leinwand zeichnen Sie einfach und es bleibt nichts über das, was Sie gerade getan haben, außer dem resultierenden Bild auf dem Bildschirm erhalten. Sie können beide animieren. SVG übernimmt das Neuzeichnen für Sie, indem Sie sich nur die angegebenen Elemente und Attribute ansehen. Bei Canvas müssen Sie jeden Frame mithilfe der API selbst neu zeichnen. Sie können beide skalieren, SVG führt dies jedoch automatisch aus. Wenn Sie die Zeichenfläche erneut verwenden, müssen Sie die Zeichenbefehle für die angegebene Größe erneut ausgeben.

Zwei Dinge, die mich bei SVG und Canvas am meisten getroffen haben, waren:

Möglichkeit zur Verwendung von Canvas ohne DOM, wobei SVG stark vom DOM abhängt und mit zunehmender Komplexität die Leistung verlangsamt. Wie im Spieldesign.

Der Vorteil der Verwendung von SVG besteht darin, dass die Auflösung auf allen Plattformen, auf denen Canvas fehlt, gleich bleibt.

Auf dieser Seite finden Sie viel mehr Details. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Es hängt absolut von Ihrem Bedarf ab.

• Wenn Sie nur ein Bild / Diagramm auf einem Bildschirm anzeigen möchten, wird als Leinwand empfohlen. (Beispiel ist PNG, GIF, BMP usw.)

• Wenn Sie die Funktionen Ihrer Grafiken erweitern möchten, z. B. wenn Sie mit der Maus über das Diagramm fahren und einen bestimmten Bereich zoomen möchten, ohne die Anzeigequalität zu beeinträchtigen, wählen Sie SVG. (Gutes Beispiel sind AutoCAD-, Visio- und GIS-Dateien).

Wenn Sie ein dynamisches Flussdiagramm-Erstellungswerkzeug mit Formverbinder erstellen möchten, ist es besser, SVG anstelle von CANVAS auszuwählen.

• Wenn der Bildschirm größer wird, beginnt sich die Leinwand zu verschlechtern, da mehr Pixel gezeichnet werden müssen.

• Wenn die Anzahl der Objekte auf dem Bildschirm zunimmt, beginnt sich SVG zu
  verschlechtern, da wir sie kontinuierlich zum DOM hinzufügen.

Siehe auch: http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx

SVG

Basierend auf dem Anwendungsfall wird SVG für Logos und Diagramme verwendet, da die Vektorgrafiken, die Sie zeichnen und vergessen haben. Wenn sich der Ansichtsport wie eine Größenänderung (oder ein Zoom) ändert, passt er sich selbst an und muss nicht neu gezeichnet werden.

Segeltuch

Canvas ist eine Bitmap (oder ein Raster), die durch Malen von Pixeln auf den Bildschirm erstellt wird. Es wird verwendet, um Spiele oder Grafikerfahrung zu entwickeln ( https://www.chromeexperiments.com/webgl ) in einem bestimmten Bereich zu entwickeln. Es malt Pixel und ändert sich, indem es neu gezeichnet wird. Da es sich um einen Rastertyp handelt, müssen wir ihn vollständig neu zeichnen, wenn sich der Ansichtsport ändert.

Referenz

http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas

http://en.wikipedia.org/wiki/WebGL

http://vector-conversions.com/vectorizing/raster_vs_vector.html

SVGist eine Spezifikation einer Zeichnung wie ein Dateiformat. Eine SVG ist ein Dokument. Sie können SVG-Dateien wie HTML-Dateien austauschen. Da SVG-Elemente und HTML-Elemente dieselbe DOM-API verwenden, ist es außerdem möglich, mithilfe von JavaScript ein SVG-DOM auf dieselbe Weise zu generieren wie ein HTML-DOM. Sie benötigen jedoch kein JavaScript, um eine SVG-Datei zu generieren. Ein einfacher Texteditor reicht aus, um eine SVG zu schreiben. Sie benötigen jedoch mindestens einen Taschenrechner, um die Koordinaten der Formen in der Zeichnung zu berechnen.

CANVASist nur ein Zeichenbereich. Es ist notwendig, JavaScript zu verwenden, um den Inhalt einer Zeichenfläche zu generieren. Sie können keine Leinwand austauschen. Es ist kein Dokument. Und die Elemente der Zeichenfläche sind nicht Teil des DOM-Baums. Sie können die DOM-API nicht zum Bearbeiten des Inhalts einer Zeichenfläche verwenden. Stattdessen müssen Sie eine dedizierte Canvas-API verwenden, um Formen in die Canvas zu zeichnen.

Der Vorteil von a SVGist, dass Sie die Zeichnung als Dokument austauschen können. Der Vorteil von CANVASist, dass es eine weniger ausführliche JavaScript-API zum Generieren des Inhalts gibt.

Hier ist ein Beispiel, das zeigt, dass Sie ähnliche Ergebnisse erzielen können, aber die Vorgehensweise in JavaScript ist sehr unterschiedlich.

// Italic S in SVG

(function () {

  const ns='http://www.w3.org/2000/svg';
  let s = document.querySelector('svg');
  let p = document.createElementNS (ns, 'path');
  p.setAttribute ('id', 'arc');
  p.setAttribute ('d', 'M 0.9 -0.9 a 0.8,0.4 -10 0,0 -0.9,0.9');
  s.appendChild (p);
  let u = document.createElementNS (ns, 'use');
  u.setAttribute ('href', '#arc');
  u.setAttribute ('transform', 'rotate(180)');
  s.appendChild (u);

})();

// Italic S in CANVAS

(function () {

  let c = document.querySelector('canvas');
  let w = c.width = c.clientWidth;
  let h = c.height = c.clientHeight;
  let x = c.getContext('2d');
  x.lineWidth = 0.05 * w;
  x.moveTo (w/2, h/2);
  x.bezierCurveTo (w*0.02, h*0.4,
                   w*0.4, -h*0.02,
                   w*0.95, h*0.05);
  x.moveTo (w/2, h/2);
  x.bezierCurveTo (w*(1-0.02), h*(1-0.4),
                   w*(1-0.4), h*(1+0.02),
                   w*(1-0.95), h*(1-0.05));
  x.stroke();

})();

svg, canvas {
  width: 3em;
  height: 3em;
}

svg {
  vertical-align: text-top;
  stroke: black;
  stroke-width: 0.1;
  fill: none;
}

canvas {
  vertical-align: text-bottom;
}

div {
  float: left;
}

<div><svg viewBox="-1 -1 2 2"></svg>VG</div>
<div>CANVA<canvas></canvas></div>

Wie Sie sehen, ist das Ergebnis fast das gleiche, aber der JavaScript-Code ist völlig anders.

SVG ist mit dem DOM - API erstellt createElement, setAttributeund appendChild. Alle Grafiken befinden sich in den Attributzeichenfolgen. SVG hat stärkere Primitive. Das CANVAS hat zum Beispiel nichts, was dem SVG-Bogenpfad entspricht. Das CANVAS-Beispiel versucht, den SVG-Bogen mit einer Bezier-Kurve zu emulieren. In SVG können Sie Elemente wiederverwenden, um sie zu transformieren. In CANVAS können Sie Elemente nicht wiederverwenden. Stattdessen müssen Sie eine JavaScript-Funktion schreiben, um sie zweimal aufzurufen. SVG hat eine, viewBoxdie die Verwendung normalisierter Koordinaten ermöglicht, was Rotationen vereinfacht. Im LEINWAND müssen Sie die Koordinaten selbst anhand des clientWidthund berechnenclientHeight. Und Sie können alle SVG-Elemente mit CSS formatieren. In CANVAS können Sie mit CSS nichts stylen. Da SVG ein DOM ist, können Sie allen SVG-Elementen Ereignishandler zuweisen. Die Elemente in CANVAS haben keine DOM- und keine DOM-Ereignishandler.

Andererseits ist der CANVAS-Code viel einfacher zu lesen. Sie müssen sich nicht um XML-Namensräume kümmern. Und Sie können die Grafikfunktionen direkt aufrufen, da Sie kein DOM erstellen müssen.

Die Lektion ist klar: Wenn Sie schnell einige Grafiken zeichnen möchten, verwenden Sie das CANVAS. Wenn Sie die Grafiken freigeben, mit CSS formatieren oder DOM-Ereignishandler in Ihren Grafiken verwenden möchten, erstellen Sie eine SVG.

Hinzufügen zu den oben genannten Punkten:

SVG ist im Vergleich zu JPEG, GIF usw. leicht für die Übertragung über das Web und skaliert auch extrem, wenn die Größe geändert wird, ohne die Qualität zu verlieren.

SVG
Es ist objektmodellbasiert.
Ist für die Verwendung großer Rendering-Bereiche geeignet.
SVG bietet jegliche Unterstützung für Ereignishandler.
Änderungen sind über Skript und CSS zulässig.
SVG hat eine bessere Skalierbarkeit
SVG ist vektorbasiert (bestehend aus Formen).
SVG ist nicht für Spielgrafiken geeignet. SVG hängt nicht von der Auflösung ab.
SVG ist für API-Animationen geeignet.
SVG eignet sich zum Drucken mit hoher Qualität und beliebiger Auflösung.

Canvas-Elemente

Es ist pixelbasiert.

Ist für kleine Renderings geeignet

Canvas bietet keinen Rückgriff für Event-Handler.

Änderungen sind nur über das Skript zulässig.

Canvas weist eine schlechte Skalierbarkeit auf.

Canvas basiert auf Raster (besteht aus einem Pixel).

Canvas eignet sich für Spielgrafiken.

Leinwand ist vollständig von der Auflösung abhängig.

Canvas hat keine API für Animationen.

Leinwand ist nicht zum Drucken von hoher Qualität und hoher Auflösung geeignet.