リアルタイムモードと保持モード
リアルタイムモードと保持モードを区別することが重要です。 HTML5キャンバスは前者の例であり、SVGは後者の例です。
リアルタイムモードとは、描画がキャンバス上にあると、キャンバスが追跡を停止することを意味します。言い換えれば、開発者として、オブジェクトを描画し、最終出力がどのように見えるかのモデルまたはシナリオを作成および維持するためのコマンドを策定し、更新する必要があるものを指定する必要があります。ブラウザのグラフィックスパイは、描画コマンドをブラウザに誘導するだけで、ブラウザはそれらのコマンドを実行します。
SVGは保持モードを使用し、画面に表示するものについて描画命令を発行するだけで、ブラウザのグラフィックスAPIは最終出力インメモリモデルまたはシーンを作成し、ブラウザの描画コマンドに変換します。
インスタントグラフィックシステムとして、CanvasにはDOMまたはドキュメントオブジェクトモデルがありません。キャンバスを使用すると、ピクセルを描画し、システムはそれらすべてを忘れて、図面の内部モデルを維持するために必要な余分なメモリを減らします。 SVGを使用すると、描画する各オブジェクトがブラウザの内部モデルに追加されます。これにより、開発者としての生活が少し楽になりますが、パフォーマンスに関しては価格を支払います。
リアルタイムモードと保持モードの違い、およびそれぞれのキャンバスとSVGの他の特定の機能に基づいて、別のテクノロジーではなく1つのテクノロジーを使用する場合、プロジェクトの目標により適している場合があります。
html5キャンバス：長所と短所
HTML5 Canvas仕様は、他のより適切な方法が利用可能な場合、著者が
要素を使用してはならないことを明示的に推奨しています。 <canvas></canvas>
たとえば、グラフィカルに豊富な要素の場合、最良のツールはHTMLとCSSではなく、
ではありません（ちなみに、SVGもそうではありません）。この見解は、Zim JS Canvas Frameworkの作成者であり創設者であるAbstract博士によって確認されました。
<canvas></canvas>domおよびdomフレームワークは、情報、特にテキスト情報を表示するのに適しています。対照的に、キャンバスは写真です。テキストはキャンバスに追加して応答性を高めることができますが、テキストはDOM上のように簡単に選択または検索することはできません。長いスクロールテキストページまたはテキストと画像ページは、DOMにとって最適です。 DOMは、ソーシャルメディアサイト、フォーラム、ショッピング、および使用に慣れているすべての情報アプリに最適です。 - 「JavaScript Canvasライブラリまたはフレームワークを使用するタイミング」
では、
を使用しない場合の明確な例を次に示します。しかし、
はいつ良い選択ですか？
<canvas></canvas>（Sarah Drasnerのツイートスクリーンショットはここに埋め込む必要があります）<canvas></canvas>
キャンバスは何が得意ですか？
Alvin Wanは、描画されたオブジェクトの数とオブジェクトまたはキャンバス自体のサイズに基づいて、キャンバスとSVGのパフォーマンスをベンチマークしました。彼は結果を次のように要約しました：
とにかく、数百または数千のオブジェクトを扱う場合、DOMレンダリングのオーバーヘッドはより明白です。ただし、キャンバスもSVGもオブジェクトサイズの影響を受けません。最終的な統計を考えると、キャンバスはパフォーマンスの面で明確な利点を提供します。
Canvasについて知っていること、特に多数のオブジェクトを描く上で優れたパフォーマンスに基づいて、SVGよりも適切またはさらに良いシナリオを紹介します。
ゲームと生成アート
キャンバスは、通常、グラフィック集約型の高度にインタラクティブなゲームと生成アートに最適です。
レイトレース
レイトレースは、3Dグラフィックを作成するための手法です。
レイトレースを使用して、画像プレーンのピクセルの光線パスを追跡し、仮想オブジェクトとの遭遇をシミュレートすることにより、画像を埋めることができます...レイトレースによって達成される効果...単純なベクトルグラフィックの画像は、写真のようなフィルターを適用して、赤目を除去します。 ——SVGおよびキャンバス：選択方法、Microsoft Docs。
興味がある場合、これはWebsterが実行しているマークのレイトレースアプリケーションです。
ただし、HTML5キャンバスはSVGよりもこのタスクに適していることは確かですが、これは必ずしもレイトレースが
要素で最もよく実行されることを意味するわけではありません。実際、CPUへの圧力は非常に高いため、ブラウザが応答を停止する可能性があります。
小さな表面に多数のオブジェクトを描画します
別の例は、アプリケーションが、比較的小さな表面に多数のオブジェクトを描画する必要があるシーンです。これは、天候パターンのグラフィカルな表現など、非対話的なリアルタイムデータの視覚化などです。
ビデオのピクセル置換
このHTML5の医師記事に示されているように、キャンバスを使用するのに適したもう1つの例は、ビデオの背景色を別の色、別のシーン、または画像に置き換えることです。
HTML5キャンバスとは何ですか？
一方、多くの場合、キャンバスはSVGに比べて最良の選択ではないかもしれません。
スケーラビリティ
スケーラビリティが利点であるほとんどのシナリオは、キャンバスの代わりにSVGをより適切に使用します。高忠実度、建築およびエンジニアリングの図面、組織の図面、生物学的図面などの複雑なグラフィックは、この状況の例です。
SVGで描画したり、画像を拡大したり、画像を印刷すると、すべての詳細を保持して非常に高いレベルの品質を実現します。また、これらのドキュメントをデータベースから生成することもできます。これにより、SVGのXML形式をこのタスクに最適にします。
さらに、これらのグラフィックは通常、
インタラクティブです。たとえば、チケットをオンラインで予約するときは、シートマップを検討してください。これにより、SVGなどのグラフィックシステムを保持するための優れたユースケースになります。
つまり、CreateJやZim（拡張createjs）などの優れたライブラリを使用すると、開発者はマウスイベントを統合し、テストをヒットし、マルチタッチジェスチャー、ドラッグアンドドロップ機能、コントロール、およびより迅速に作成に基づいて作成できます。キャンバス。
アクセシビリティ
キャンバスグラフィックスのアクセシビリティを改善するためのいくつかの手順を実行できますが、優れたキャンバスライブラリ（ZIMなど）はプロセスをスピードアップするのに役立ちます - アクセシビリティに関してはキャンバスは良くありません。キャンバスの表面に描くのは、支援技術または検索エンジンロボットが読み取りや解釈できないピクセルの束です。これは、SVGのもう1つの好ましい領域です。SVGはXMLだけで、人間と機械の両方が読み取られます。
javascriptに依存しない
アプリケーションでJavaScriptを使用したくない場合、Canvasは最良の選択ではありません。実際、要素を使用する唯一の方法は、JavaScriptを使用することです。代わりに、Adobe IllustratorやInkscapeなどの標準的なベクトル編集プログラムを使用してSVGグラフィックを描画できます。純粋なCSSを使用して、その外観を制御し、説得力のある微妙なアニメーションとマイクロインタラクションを実行できます。
高度なシナリオ用のHTML5キャンバスとSVGを組み合わせて
場合によっては、HTML5キャンバスとSVGを組み合わせることにより、アプリケーションが両方の世界を最大限に活用できます。たとえば、Canvasベースのゲームは、ベクトル編集プログラムによって生成されたSVG画像をSpritesとして使用して、PNG画像と比較してスケーラビリティと小さなダウンロードサイズを活用することができます。あるいは、描画プログラムは、描画用のSVGおよび埋め込み<canvas></canvas>要素を使用してユーザーインターフェイスを設計することができます。
最後に、Paper.jsのような強力なライブラリを使用すると、HTML5キャンバスの上にベクトルグラフィックスクリプトを作成でき、開発者が両方のテクノロジーを同時に使用する便利な方法を提供します。
結論
この記事では、HTML5キャンバスとSVGの主要な機能のいくつかを調査して、特定のタスクに最適なテクノロジーを決定するのに役立ちます。
答えは何ですか？
クリス・コイエはベンジャミン・デ・コックに同意します。
この質問に答えるための非常に基本的な方法は、「SVGを使用できない場合はキャンバスを使用する」（「できない」ことを意味し、数千のオブジェクトをアニメーション化すること、各ピクセルを個別に操作するなど）です。言い換えれば、SVGはデフォルトの選択であり、キャンバスはバックアッププランです。
- ベンジャミン・デ・コック（@BDC）2019年10月2日
Dr Abstractは、インタラクティブロゴや広告、インタラクティブなインフォグラフィック、eラーニングアプリケーションなど、キャンバスで構築するのに最適なものの多くのリストを提供します。
私の意見では、SVGの代わりにキャンバスを使用するのが最善である場合について、難しいルールと高速なルールはありません。リアルタイムモードと保持モードの違いは、HTML5キャンバスがグラフィック集約型ゲームを構築することに関して議論の余地のない勝者であり、SVGがフラット画像、アイコン、UI要素などに好ましいことを示しています。ただし、HTML5キャンバスには、特にさまざまな強力なキャンバスライブラリが提供できるものを考慮して、アプリケーションの範囲を拡大する余地もあります。同じグラフィカルな作業で両方のテクノロジーを同時に使いやすくするだけでなく、Canvasネイティブプロジェクト（インタラクティブなコントロールやイベント、応答性、アクセシビリティ機能など）でいくつかの難しい機能を作成しました。これは、ほとんどの開発者が使用するHTML5キャンバスのより興味深い使用への扉を開きます。
キャンバス対SVG のFAQ
（FAQパーツをここに含めて、元のコンテンツに従って書き直し、簡潔で明確にし、より自然な言語表現を使用する必要があります。）
に作成された画像は、網膜ディスプレイにズームインまたは表示すると品質を低下させる場合があります。