Canvas vs SVG：ジョブに適したツールを選択する-CSSチュートリアル-php.cn

HTML5 CANVAS vs. SVG：どちらを選択できますか？

Canvas vs SVG: Choosing the Right Tool for the Job

HTML5キャンバスとSVGはどちらも、見事なグラフィックと視覚効果を作成するために使用できる標準のHTML5テクノロジーに基づいています。この記事では、重要な質問について説明します。どのテクノロジーがプロジェクトで選択するのに適していますか？言い換えれば、どの場合にSVGよりもHTML5キャンバスを使用する傾向がありますか？

最初に、HTML5キャンバスとSVGを簡単に紹介しましょう。

キーポイント

HTML5キャンバスとSVGはどちらもグラフィカルな経験と視覚的な経験を作成するために使用されるHTML5テクノロジーです。 Canvasは解像度に依存しており、グラフィック、ゲームグラフィック、アートワーク、またはその他の視覚画像を動的にレンダリングするために使用されます。 SVG（Scalable Vector Graphics）は、スケーリング時に品質を維持するXMLファイル形式です。
HTML5キャンバスとSVGは完全に異なって動作します。 Canvasは、ピクセルが描画されると破棄されるインスタントグラフィックシステムです。 SVGは保持モードを採用します。ここでは、描画されたすべてのオブジェクトがブラウザの内部モデルに追加されます。これは、開発者にとって簡単ですが、パフォーマンスに影響を与える可能性があります。
HTML5 Canvasは、グラフィックスオーバー型の非常にインタラクティブなゲーム、生成的なアート、および小さな表面に描画する必要がある多くのオブジェクトがあるシーンに最適です。ただし、Retinaディスプレイにズームインまたは表示すると、その品質が低下する場合があります。
高度なシナリオのために、

HTML5キャンバスとは何ですか？

whatwg仕様では、次のようにキャンバス要素を導入します

Canvas要素は、スクリプトにグラフ、ゲームグラフィック、アートワーク、またはその他の視覚画像をその場でレンダリングするための解像度依存のビットマップキャンバスを提供します。

言い換えれば、
タグは、JavaScriptプログラム可能なインターフェイスを使用して、ピクセルごとにラスター画像を作成および操作できる表面を提供します。

これは基本的なコードの例です。<canvas></canvas>

（基本的なキャンバスの形状を示すために、Codepenの例をここに埋め込む必要があります）

解像度の依存性により、 Canvas vs SVG: Choosing the Right Tool for the Job に作成された画像は、網膜ディスプレイにズームインまたは表示すると品質を低下させる場合があります。

単純な形状を描くことは、氷山の一角にすぎません。 HTML5 Canvas APIを使用すると、アーク、パス、テキスト、グラデーションなどを描画できます。 Pixelごとに画像Pixelを操作することもできます。これは、グラフィックの特定の領域の色を交換し、図面をアニメーション化し、ビデオをキャンバスに描画して外観を変更できることを意味します。 <canvas></canvas>

svgとは何ですか？

SVGはスケーラブルベクトルグラフィックスを表します。仕様に応じて：

SVGは、2次元グラフィックを記述するために使用される言語です。スタンドアロン形式として使用する場合、または他のXMLと混合した場合、XML構文を使用します。 HTML5と混合すると、HTML5構文...
を使用します
SVG図面はインタラクティブでダイナミックにできます。アニメーションは、宣言的手段（つまり、SVGコンテンツにSVGアニメーション要素を埋め込むことによって）またはスクリプトを介して定義およびトリガーできます。

SVGは、ベクトルグラフィックスの作成に使用されるXMLファイル形式です。スケーラブルな特性により、明確さと高品質を維持しながら、ベクター画像を増加または減少させることができます。（HTML5キャンバス生成画像はこれを行うことはできません）。

以下は、SVG（以前にHTML5キャンバスを使用して作成された）を使用して描かれた同じ赤い正方形です。

（基本的なSVG形状を示すためにCodepenの例をここに埋め込む必要があります）

リアルタイムモードと保持モード
リアルタイムモードと保持モードを区別することが重要です。 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パーツをここに含めて、元のコンテンツに従って書き直し、簡潔で明確にし、より自然な言語表現を使用する必要があります。）

以上がCanvas vs SVG：ジョブに適したツールを選択するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。