web-dev-qa-db-ja.com

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

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

私は何が欠けていますか？ SVGとHTML5 Canvasの主な違いは何ですか？なぜ他のものよりも選択する必要がありますか？

html5canvassvg
89
zeckdude

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

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

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

SVG画像はXMLで表され、XML編集ツールを使用して複雑なシーンを作成および管理できます。

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

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

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

40
peter.murray.rust

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

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

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

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

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

コンピューター画面上の1つのピクセルは多くの場合4バイトの情報を消費し、最近のコンピューター画面は数メガバイトを消費します。そのため、ユーザーに画像を編集して再度アップロードさせたい場合、Canvasは不便かもしれません。

対照的に、SVGを使用して画面全体をカバーするいくつかの図形を描画すると、数バイトを占有し、すばやくダウンロードし、他の方向に下がったときと同じ利点があり、再び簡単にアップロードできます。そのため、SVGはCanvasよりも高速です。

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

47
JohnnySoftware

CanvasとSVGの概要

キャンバス

  1. ピクセルベース（動的.png）
  2. 単一のHTML要素。（DeveloperツールのInspect要素。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 をお読みください

32
Fizer Khan

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

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

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

Svgを使用すると、さまざまなツールでファイルを表示、保存、編集できます。キャンバスを使用すると、描画するだけで、画面に表示される画像以外に行った操作について何も保持されません。両方をアニメーション化できます。SVGは指定された要素と属性を見るだけで再描画を処理しますが、キャンバスではAPIを使用して各フレームを自分で再描画する必要があります。両方とも拡大縮小できますが、SVGは自動的に拡大縮小しますが、canvasを再度使用すると、指定したサイズの描画コマンドを再発行する必要があります。

22
Erik Dahlström

SVGとCanvasで私に最も衝撃を与えた2つのことは、

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

SVGを使用する利点は、Canvasにないプラットフォーム間で解像度が同じままであることです。

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

10
Sam007

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

  • 画面に画像/チャートを表示するだけの場合、推奨される方法はキャンバスです。 （例はPNG、GIF、BMPなど）

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

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

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

  • 画面上のオブジェクトの数が増えると、SVGは開始します
    DOMに継続的に追加しているため、品質が低下します。

また、参照してください： http://msdn.Microsoft.com/en-us/library/gg193983（v = vs.85）.aspx

4
Aji

[〜＃〜] 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

3
Purushoth

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

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

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

2
ceving

上記のポイントに追加：

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

0
Narayana Swamy