いつSVGを使用するのか、いつキャンバスを使用するか

SVGとCanvasはどちらもWebブラウザーに物を描くことができるテクノロジーであるため、一方が他方よりも適切である場合、比較して理解する価値があります。それらの軽い理解でさえ、他の1つよりも1つを選択する選択をかなり明確にします。

• 少しフラットカラーのアイコン？それは明らかにSVGの領土です。
• インタラクティブなコンソールのようなゲーム？それは明らかにキャンバスの領土です。

私たちはまだ理由をカバーしていないことを知っていますが、それを掘り下げるにつれて明らかになることを願っています。

SVGはベクトルで宣言的です

ベクターアートが必要な場合は、SVGが選択です。 Vector Artは視覚的に鮮明で、JPGのようなラスターグラフィックスよりもファイルサイズが小さくなる傾向があります。

これにより、ロゴは非常に一般的なSVGユースケースになります。 SVGコードはHTML内で正しく進むことができ、宣言的な描画指示のようなものです。

 <svg viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="50"></circle>
</svg>

グラフィックの柔軟性と応答性をよく気にかけている場合、SVGが方法です。

CanvasはJavaScript APIを描画しています

要素をHTMLに配置し、JavaScriptで図面を実行します。言い換えれば、コマンドを発行して、描画方法（宣言よりも必須です）を描く方法を伝えます。

 <canvas width="578" height="200"> </canvas>

  var canvas = document.getElementById（ 'mycanvas'）;
  var context = canvas.getContext（ '2d'）;
  var centerx = canvas.width / 2;
  var Centery = canvas.height / 2;
  var radius = 70;

  context.beginpath（）;
  Context.Arc（CenterX、Centery、Radius、0、2 * Math.Pi、False）;
  context.fillstyle = 'green';
  context.fill（）;

SVGはDOMにあります

ClickやMousedownなどのDOMイベントに精通している場合、それらはSVGでも利用できます。 a は、その点で

とはひどく違いはありません。

 <svg viewbox="0 0 100 100">
  
  <circle cx="50" cy="50" r="50"></circle>
  
  
    document.QuerySelector（ 'Circle'）。AddEventListener（ 'Click'、e => {
      e.target.style.fill = "red";
    }）;
  
  
</svg>

アクセシビリティ用のSVG

キャンバスのテキストの代替手段を持つことができます。

 <canvas aria-label="hello aria world" role="img"> </canvas>

SVGでもそれを行うことができますが、SVGとそのガットはDOMで正しい可能性があるため、通常、SVGはアクセス可能なエクスペリエンスを構築しようとしている場合に使用するものであると考えています。別の方法で説明すると、支援技術が独自の聴覚の説明などでリンクやサブエレメントにアクセスして見つけられるSVGを構築できます。

テキストはSVG領域にもしっかりとあります。 SVGには文字通り、テキストがぼやけているキャンバスとは異なり、アクセス可能で視覚的に鮮明な要素を文字通り持っています。

ピクセル用のキャンバス

以下のサラドランサーの比較でわかるように、キャンバスはダンス、ピクセル、ダンスを言う方法です！ 。それは、乾燥した技術的な感情ができるよりも、それを家に駆り立てる概念を説明する楽しい方法です。

たくさんの複雑なディテールとグラデーションを使用した非常にインタラクティブな作業は、キャンバスの領域です。この理由で、SVGよりもキャンバスで構築された多くのゲームが表示されますが、常に例外があります（このゲームの単純なベクターy性に注意してください）。

CSSはSVGで再生できます

上記で、SVGはDOMにあり、JavaScriptがそこに入って何かをすることができることを見ました。ストーリーはCSSと似ています。

 <svg viewbox="0 0 100 100">
  
  <circle cx="50" cy="50" r="50"></circle>
  
  <style>
    円{fill：青; }
  </style>
  
</svg>

これらの例の

SVGプロパティとCSSの大規模なガイドがあります。しかし、知っておくべきことは、CSSが優れているものは、Hover StatesやAnimationのように、SVGでまだ可能であるということです。

組み合わせ

技術的には、それらは完全に相互に排他的ではありません。 a

Blake Bowenが証明するように、キャンバスのSVGを非常に鮮明に保つことさえできます！

ルース・ジョンの比較

サラ・ドラスナーの比較

このツイートから塗布されています。

	DOM/仮想DOM	キャンバス
長所
	UI/UXアニメーションに最適です	ダンス、ピクセル、ダンス！
	解像度が独立しているSVGに最適です	本当に印象的な3Dまたは没入感のあるものに最適です
	デバッグしやすい	たくさんのオブジェクトの動き
短所
	たくさんのオブジェクトを備えたタンク	アクセスしやすくするのが難しい
	あなたはあなたが宣告方法を気にしなければならないからです	箱から出して独立した解像度ではありません
		何も壊れません

シャーリー・ウーの比較

このツイートから塗布されています。

	SVG	キャンバス
長所	簡単に始めることができます	非常にパフォーマンス
	ユーザーインタラクションを登録しやすい	簡単に更新できます
	簡単にアニメーション化できます
短所	潜在的に複雑なDOM	開始するためのより多くの作業
	多数の要素ではパフォーマンスがありません	相互作用を処理するためのより多くの作業
		カスタムアニメーションを書く必要があります

多くの人々は、多くのオブジェクトを持つシナリオ（シャーリーが言うように1,000）をキャンバスの領土であると考えています。

SVGはデフォルトの選択肢です。キャンバスはバックアップです

強い意見ですが、それは私には正しいと感じています：

それに答えるための非常に基本的な方法の1つは、「SVGを使用できない場合はキャンバスを使用する」（「できない」ことを意味する場合があります。別の言い方をすれば、SVGはデフォルトの選択肢である必要があります。バックアッププランをキャンバスします。

- ベンジャミン・デ・コック（@BDC）2019年10月2日

まとめ

したがって、これらの最初の2つの箇条書きを再訪すると…

• 少しフラットカラーのアイコン？ SVGはDOMに行くので、ボタン内のアイコンのようなものはSVGにとって非常に理にかなっています。言うまでもなく、CSSで制御し、定期的なJavaScriptイベントハンドラーなどを持つことができます
• インタラクティブなコンソールのようなゲーム？これには、多くの動く要素、複雑なアニメーションと相互作用、パフォーマンスに関する考慮事項があります。それらはキャンバスが優れているものです。

それでも、ここにはたくさんの中間点があります。日々のWebデザイナー/開発者のような男として、私はSVGが実用的なレベルではるかに有用だと思います。キャンバスで生産作業を行ったかどうかはわかりません。その一部は、キャンバスもほとんど知らないからです。私はSVGに関する本を書いたので、その側ではるかに多くの研究をしましたが、SVGが自分のニーズに合ったことをしていることを十分に知っています。

以上がいつSVGを使用するのか、いつキャンバスを使用するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。