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.