HTMLグラフィックスとは何ですか？

HyperText Markup Language（HTML）には、HTMLドキュメントでグラフィックを表示および作成する方法がいくつかあります。 最も広く使用されているタイプのHTMLグラフィックは、インライン画像と呼ばれるHTMLページに直接配置される画像です。ただし、同じ結果を得るために使用できるスクリプト言語やコンパイル済みWebアプリケーションなど、他の方法もあります。 チャートまたはグラフ用に動的に生成されたグラフィックの場合、Scalable Vector Graphics（SVG）を使用できます。 また、言語仕様でサポートされている基本的なHTMLグラフィックもあり、水平線やリスト内の箇条書きなどの外部ファイルを必要としません。 スクリプト言語、カスケードスタイルシート（CSS）、およびHTMLキャンバス要素を使用することで、より複雑なHTMLグラフィックを実現できます。これにより、以前は外部オブジェクトとプラグインでのみ可能であった効果のネイティブオプションが提供されます。

インラインHTMLグラフィックスは、HTMLドキュメントに画像を配置する最もよく使用され、最も簡単な方法です。 これには基本的に、画像エディターで画像を作成し、一般的に使用されるファイル形式に保存してから、IMGタグを使用してHTMLドキュメント内の画像ファイルの名前と場所を指定します。 インライングラフィックをドキュメントに組み込む単純さは別として、ほとんどのWebブラウザーのレンダリングエンジンは、フォーマットのアーティファクトなしで、より複雑なページレイアウトにグラフィックを簡単に配置できます。 インライン画像で発生する可能性のある複雑な問題の1つは、表示するときに非常に大きいまたは小さいディスプレイに収まるように画像サイズをスケーリングする必要があり、画像の品質が低下する可能性があることです。

スケーラブルベクターグラフィックスは、HTMLグラフィックスのより複雑なスタイルです。 SVG画像は、形状、パス、および線の太さを定義することで描画され、ユーザーがドキュメントを表示しているときにその場で描画されます。 これにより、SVGはチャートやグラフなどの動的データの表示に適した選択肢になりますが、写実的な画像の構築など、他のタイプのグラフィックスに使用するのは非常に非実用的です。 単純なHTMLグラフィックスの場合、および外部画像ファイルをロードできない状況では、SVGが実行可能なオプションである可能性があります。

HTMLバージョン5言語標準（HTML5）の開発により、基本的なHTML言語内で動的なHTMLグラフィックを作成できます。 これは、HTMLドキュメントのキャンバスと呼ばれる特別な表面に直接描画することにより行われます。 JavaScript®およびCSSを使用することにより、このメソッドは、ユーザーの入力に応答したり、Webブラウザーやその他のデータの設定に応じてグラフィックを調整したりできるアニメーションやゲームを作成できます。 ただし、HTML5グラフィックの作成は複雑な手順になる可能性があり、その結果、スクリプトコードの長いブロックが一部のコンピューターまたはデバイスで非常に遅く実行される可能性があります。