SVGとHTML5 Canvasの違いは何ですか？

SVGとHTML5 Canvasの違いは何ですか？どちらも私には同じことをしているようです。基本的に、どちらも座標点を使用してベクターアートワークを描画します。

何が欠けていますか？SVGとHTML5 Canvasの主な違いは何ですか？なぜどちらを選ぶべきなのですか？

ウィキペディアを参照してください：http : //en.wikipedia.org/wiki/Canvas_element

SVGは、ブラウザーで図形を描画するための以前の標準です。ただし、描画された各形状はシーングラフまたはDOMのオブジェクトとして記憶され、その後ビットマップにレンダリングされるため、SVGは根本的に高いレベルにあります。つまり、SVGオブジェクトの属性が変更された場合、ブラウザーはシーンを自動的に再レン​​ダリングできます。

上の例では、長方形が描かれると、システムがそれを描いたことを忘れてしまいます。その位置を変更する場合は、長方形で覆われていた可能性のあるオブジェクトを含め、シーン全体を再描画する必要があります。しかし、同等のSVGの場合、長方形の位置属性を変更するだけで、ブラウザが長方形を再描画する方法を決定します。キャンバスをレイヤーでペイントし、特定のレイヤーを再作成することもできます。

SVG画像はXMLで表現され、複雑なシーンはXML編集ツールで作成および維持できます。

SVGシーングラフを使用すると、イベントハンドラーをオブジェクトに関連付けることができるため、長方形がonClickイベントに応答することがあります。キャンバスで同じ機能を得るには、マウスクリックの座標を描画された長方形の座標と手動で一致させて、クリックされたかどうかを判断する必要があります。

概念的には、canvasはSVGを構築できる下位レベルのプロトコルです。[引用が必要]ただし、これは（通常は）当てはまりません。これらは独立した標準です。Canvasにはシーングラフライブラリがあり、SVGにはビットマップ操作機能がいくつかあるため、状況は複雑です。

更新：マークアップ言語の機能があるため、SVGを使用しています。XSLTで処理でき、ノードに他のマークアップを保持できます。同様に、マークアップ（化学）にSVGを含めることができます。これにより、マークアップを組み合わせてSVG属性（レンダリングなど）を操作できます。これはCanvasで可能かもしれませんが、それはもっと難しいと思います。

SVGは「描画」プログラムのようなものです。図面は、各図形の描画命令として指定されており、任意の図形の任意の部分を変更できます。図面は形状指向です。

Canvasは「ペイント」プログラムのようなものです。ピクセルが画面に当たると、それが描画になります。他のピクセルで上書きしない限り、形状を変更することはできません。絵画はピクセル指向です。

一部のプログラムでは、図面を変更できることが非常に重要です。たとえば、製図アプリ、作図ツールなど。SVGにはここで利点があります。

一部の芸術プログラムでは、個々のピクセルを制御できることが重要です。

Canvasを使用すると、SVGよりもマウスドラッグによるユーザー操作の優れたアニメーションパフォーマンスを簡単に取得できます。

コンピュータ画面上の1つのピクセルは4バイトの情報を消費することが多く、最近のコンピュータ画面は数メガバイトを消費します。したがって、ユーザーが画像を編集してから再度アップロードしたい場合、Canvasは不便な場合があります。

対照的に、SVGを使用して画面全体を覆う少数の形状を描画すると、数バイトを消費し、すぐにダウンロードできます。また、簡単に再度アップロードでき、その方向に行くと、他の方向に行くときと同じ利点があります。したがって、SVGはCanvasよりも高速です。

GoogleはSVGでGoogleマップを実装しました。これにより、Webアプリのパフォーマンスが向上し、スクロールがスムーズになります。

CanvasとSVGの概要

キャンバス

1. ピクセルベース（動的.png）
2. 単一のHTML要素（開発ツールの要素の検査。canvasタグのみが表示されます）
3. スクリプトのみで変更
4. イベントモデル/ユーザーインタラクションは詳細（x、y）
5. サーフェスが小さい、オブジェクト数が多い（> 10k）、またはその両方でパフォーマンスが向上する

SVG

1. 形状ベース
2. DOMの一部となる複数のグラフィック要素
3. スクリプトとCSSで変更
4. イベントモデルとユーザーの相互作用が抽象化されている（rect、path）
5. オブジェクトの数が少ない（<10k）、サーフェスが大きい、またはその両方でパフォーマンスが向上する

詳細な違いについては、http：//msdn.microsoft.com/en-us/library/ie/gg193983（v = vs.85）.aspxを参照してください

彼らが何であるか、彼らがあなたのために何をするかには違いがあります。

• SVGは、スケーラブルベクターグラフィックスのドキュメント形式です。
• Canvasは、ベクターグラフィックを特定のサイズのビットマップに描画するためのJavaScript APIです。

フォーマットとAPIについて少し詳しく説明します。

svgを使用すると、さまざまなツールでファイルを表示、保存、編集できます。キャンバスを使用すると、描画するだけで、画面に表示されたイメージを除いて、何を実行したかについては何も保持されません。両方をアニメーション化できます。SVGは指定された要素と属性を確認するだけで再描画を処理しますが、キャンバスではAPIを使用して各フレームを自分で再描画する必要があります。両方をスケーリングできますが、SVGは自動的にスケーリングしますが、canvasを使用すると、指定されたサイズの描画コマンドを再発行する必要があります。

SVGとCanvasで最も印象に残った2つのことは、

DOMなしでCanvasを使用する機能。SVGはDOMに大きく依存しているため、複雑さが増すとパフォーマンスが低下します。ゲームデザインのように。

SVGを使用する利点は、Canvasに欠けているプラ​​ットフォーム間で解像度が変わらないことです。

より多くの詳細はこのサイトで提供されています。http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

それは絶対にあなたのニーズ/要件に依存します。

• 画面に画像やチャートを表示したいだけなら、キャンバスをお勧めします。（例：PNG、GIF、BMPなど）

• グラフィックの機能を拡張する場合、たとえば、グラフ上にマウスを置くと、表示品質を損なうことなく特定の領域をズームしたい場合は、SVGを選択します。（良い例は、AutoCAD、Visio、GISファイルです）。

シェイプコネクタを使用して動的フロー図作成ツールを作成する場合は、CANVASではなくSVGを選択することをお勧めします。

• 画面のサイズが大きくなると、より多くのピクセルを描画する必要があるため、キャンバスが劣化し始めます。

• 画面上でオブジェクトの数が増える
  と、DOM にオブジェクトを追加し続けているため、SVGが低下し始めます。

また参照してください：http : //msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx

SVG

ユースケースに基づいて、SVGはロゴやチャートに使用されます。なぜなら、そのベクターグラフィックは、描画してそれを忘れたからです。ビューポートがサイズ変更（またはズーム）のように変更されると、それ自体が調整され、再描画する必要がなくなります。

キャンバス

Canvasはビットマップ（またはラスター）であり、画面にピクセルをペイントすることによって行われます。ピクセルをペイントし、別の領域を再描画することで変化する特定の領域で、ゲームまたはグラフィックスエクスペリエンス（https://www.chromeexperiments.com/webgl）を開発するために使用されます。ラスタータイプであるため、ビューポートが変更されたときに完全に再描画する必要があります。

参照

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

SVGファイル形式のような図面の仕様です。SVGはドキュメントです。HTMLファイルのようなSVGファイルを交換できます。さらに、SVG要素とHTML要素は同じDOM APIを共有しているため、JavaScriptを使用して、HTML DOMを作成するのと同じ方法でSVG DOMを生成できます。ただし、SVGファイルを生成するためにJavaScriptは必要ありません。SVGを作成するには、単純なテキストエディターで十分です。ただし、図面内の形状の座標を計算するには、少なくとも計算機が必要です。

CANVAS単なる描画領域です。キャンバスのコンテンツを生成するには、JavaScriptを使用する必要があります。キャンバスの交換はできません。文書ではありません。また、キャンバスの要素はDOMツリーの一部ではありません。DOM APIを使用してキャンバスのコンテンツを操作することはできません。代わりに、専用のキャンバスAPIを使用して、キャンバスに形状を描画する必要があります。

の利点はSVG、図面をドキュメントとして交換できることです。の利点はCANVAS、コンテンツを生成するJavaScript APIが冗長にならないことです。

以下の例は、同じような結果が得られることを示していますが、JavaScriptでの実行方法は大きく異なります。

// 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>

ご覧のとおり、結果はほとんど同じですが、JavaScriptコードは完全に異なります。

SVGはcreateElement、setAttributeおよびを使用してDOM APIで作成されますappendChild。すべてのグラフィックは属性文字列にあります。SVGにはより強力なプリミティブがあります。たとえば、CANVASにはSVGアークパスに相当するものはありません。CANVASの例では、ベジェ曲線を使用してSVGアークをエミュレートしようとします。SVGでは、要素を再利用して変換することができます。CANVASでは、要素を再利用できません。代わりに、2回呼び出すためにJavaScript関数を記述する必要があります。SVGにはviewBox正規化された座標を使用できるがあり、回転を簡素化します。CANVASでは、clientWidthおよびに基づいて自分で座標を計算する必要がありますclientHeight。また、CSSを使用してすべてのSVG要素のスタイルを設定できます。CANVASでは、CSSを使用してスタイルを設定することはできません。SVGはDOMなので、すべてのSVG要素にイベントハンドラーを割り当てることができます。CANVASの要素にはDOMもDOMイベントハンドラもありません。

しかし、その一方で、CANVASコードははるかに読みやすくなっています。XML名前空間を気にする必要はありません。また、DOMを構築する必要がないため、グラフィック関数を直接呼び出すことができます。

レッスンは明らかです。グラフィックをすばやく描きたい場合は、CANVASを使用してください。CSSでスタイルを設定したり、グラフィックでDOMイベントハンドラーを使用したりするなど、グラフィックを共有する必要がある場合は、SVGをビルドします。

上記の点に追加：

SVGは、JPEG、GIFなどと比較してWeb経由で転送するための軽量であり、品質を失うことなくサイズを変更すると、非常にスケーリングされます。

SVG
オブジェクトモデルベースです。
大きなレンダリング領域の使用に適しています。
SVGは、イベントハンドラーのサポートを提供します。
スクリプトとCSSを介して変更が許可されます。
SVGのスケーラビリティの向上
SVGはベクターベース（形状で構成）です。
SVGはゲームのグラフィックには適していません。SVGは解像度に依存しません。
SVGはAPIアニメーションに対応しています。
SVGは、高品質および任意の解像度での印刷に適しています。

キャンバス要素

ピクセルベースです。

小さなレンダリングの使用に適しています

Canvasは、イベントハンドラーに手段を提供しません。

変更はスクリプトを通じてのみ許可されます。

Canvasのスケーラビリティは低いです。

キャンバスはラスターベースです（ピクセルで構成）。

キャンバスはゲームのグラフィックスに適しています。

キャンバスは解像度に完全に依存しています。

Canvasにはアニメーション用のAPIがありません。

Canvasは、高品質で高解像度の印刷には適していません。