HTML5 SVG 2D 入門 1—SVG (スケーラブル ベクター グラフィックス) 概要_html5 チュートリアルのヒント

ビットマップとベクター グラフィックス
以前は、jpeg、gif などのブラウザーに表示されるグラフィックスはすべてビットマップであり、これらの画像形式はラスターに基づいていました。ラスター イメージでは、イメージ ファイルはイメージ内の各ピクセルのカラー値を定義します。ブラウザはこれらの値を読み取り、それに応じて動作する必要があります。この種の画像の再現能力は比較的高いですが、状況によっては不十分に見える場合があります。たとえば、ブラウザがさまざまなサイズで画像を表示すると、エッジがギザギザになることがよくあり、ブラウザは元の画像に存在しないピクセルの値を補間または推測する必要があり、これにより画像の歪みが生じます。さらに、ビットマップのアニメーション化は、せいぜい、個々の画像が高速で連続して表示される「パラパラ漫画」タイプのアニメーションの作成に限定されます。

ベクター グラフィックスは、値自体を指定するのではなく、各ピクセルの値を決定するために必要な命令を指定することで、これらの問題の一部を克服します。たとえば、ベクター グラフィックスは、直径 1 インチの円のピクセル値を提供する代わりに、ブラウザーに直径 1 インチの円を作成し、残りの処理はブラウザー (またはプラグイン) に実行させるように指示します。これにより、ベクトル グラフィックスに関するラスター グラフィックスの制限の多くがなくなり、ブラウザーは円を描画する必要があることのみを認識します。画像を通常の 3 倍のサイズで表示する必要がある場合、ブラウザは通常のラスター画像の補間を実行することなく、単純に正しいサイズで円を描画します。同様に、ブラウザは、アプリケーションやデータベースなどの外部情報ソースに簡単に結び付けることができる命令を受け取り、画像をアニメーション化するために、 radius や color などのプロパティを操作する方法についての命令を受け取るだけです。
HTML システムでは、ベクター グラフィックスを描画するために最も一般的に使用されているテクノロジは、SVG と HTML5 で新しく追加された Canvas 要素です。どちらのテクノロジーも、ベクター画像とラスター画像の描画をサポートしています。

SVG の概要
Scalable Vector Graphics (略して SVG) は、XML を使用して 2 次元グラフィックスを記述する言語です (SVG は XML 構文に厳密に従います)。 SVG では、ベクトル グラフィック形状 (直線と曲線で構成されるパスなど)、画像、テキストの 3 種類のグラフィック オブジェクトを使用できます。 グラフィック オブジェクト (テキストを含む) をグループ化、スタイル設定、変換し、以前にレンダリングしたオブジェクトに結合することができます。 SVG 機能セットには、ネストされた変換、クリッピング パス、アルファ マスク、およびテンプレート オブジェクトが含まれます。

SVG 描画はインタラクティブで動的です。 たとえば、スクリプトを使用してアニメーションを定義し、トリガーできます。これは Flash に比べて非常に強力です。 Flash はバイナリ ファイルであるため、動的に作成したり変更したりするのは困難です。 SVG はテキスト ファイルなので、動的操作は非常に簡単です。さらに、SVG はアニメーションを完成させるために関連する要素を直接提供するため、操作が非常に便利です。

SVG は他の Web 標準と互換性があり、Document Object Model DOM を直接サポートします。これは、HTML5 のキャンバスと比較して非常に強力な点でもあります (ここで、SVG も SVG グラフィックスを表示するために同様のキャンバスを内部的に使用していることに注意してください。後で、多くの機能が HTML5 のキャンバスに似ていることがわかります。 SVG の Canvas であるとは明示されていません。HTML5 の Canvas 要素を指します)。したがって、SVG の高度なアプリケーションの多くは、スクリプトを使用して簡単に実装できます。さらに、SVG グラフィック要素は基本的に DOM 内の標準イベントをサポートします。多数のイベント ハンドラー (「onmouseover」や「onclick」など) を任意の SVG グラフィック オブジェクトに割り当てることができます。 SVG のレンダリング速度は Canvas 要素ほど速くありませんが、DOM 操作が非常に柔軟であるため、速度の欠点を完全に補うことができます。

SVG はプロトコルでもあり言語でもあり、HTML の標準要素でもあり、画像形式でもあります。
SVG は HTML5 に含まれるものではありませんが、人気のある Web テクノロジーの 1 つであると考えられているため、当面はこのトピックに含めます。

SVG と他の画像形式の比較
他の画像形式と比較すると、SVG には多くの利点があります (多くの利点はベクター グラフィックスの利点から得られます)。
• SVGファイルは純粋な XML であり、多くのツール (メモ帳など) で読み取りおよび変更できます。
• SVG は JPEG や GIF 画像よりもサイズが小さく、圧縮率が高くなります。
• SVG はスケーラブルで、画質を損なうことなく拡大でき、どの解像度でも高品質で印刷できます。
• SVG 画像内のテキストはオプションで検索可能です (地図の作成に最適です)。
• SVG は Java テクノロジで実行できます。
• SVG はオープンスタンダードです。

SVG と Flash の比較
SVG の主な競合相手は Flash です。 Flash と比較した場合、SVG の最大の利点は、他の標準 (XSL や DOM など) と互換性があり、操作が簡単であることですが、Flash はオープンソースではない独自のテクノロジーです。保存形式や動的に生成されるグラフィックスなどの他の側面でも、SVG には大きな利点があります。

SVG の表示方法
ここでは、HTML5 と SVG をサポートするブラウザーについては説明しません。基本的には、最新の Chrome または FireFox ブラウザー (IE) をインストールするだけで十分です。 IE9 より前のバージョンについては、SVG プラグインをインストールする必要がありますが、ここでは省略します)。 SVG を直接サポートするブラウザの場合、SVG は主に両側で 2 つの表示方法を使用します。

HTML にインライン化
SVG は標準の HTML 要素であり、HTML に直接書き込むことができます。次の例を参照してください。

コードをコピー

コードは次のとおりです。

🎜>
;title> 初めての SVG ページ

width="200px" height="200px">
fill= "none" ストローク="黒"/>
style="ストローク: 黒; 塗り: 赤;"/ >

これらの部分は基本的に記述する必要がありません。 HTML5 で記述します (記述するかどうかはあなた次第です)。

スタンドアロン SVG ファイル
スタンドアロン SVG は、svg ファイル拡張子を使用して提供されるベクター グラフィック ファイル形式を指します。この svg ファイルをブラウザに埋め込むと、すぐに使用できるようになります。
1. 独立した SVG ファイル/ページ、定義されたテンプレートは基本的に次のとおりです:

コードをコピーします

は次のとおりです:

;/svg>

このようなテキスト ファイルを、sun.svg などの svg 拡張子のファイルとして保存します。このようなファイルは、ブラウザで直接開くことも、他のファイルに参照として埋め込むこともできます。ページ。
2.HTML は外部 SVG ファイルを参照します。
次の小さな例のように、object 要素または img 要素を使用して SVG グラフィックを埋め込みます:

コードをコピーコードは次のとおりです。

width="300px" height="300px"> ;

お使いのブラウザは SVG をサポートしていません。最新のブラウザにアップグレードしてください。

🎜>


実際、SVG は他の XML ドキュメントに配置することも、他の XML ドキュメントと同様に XML 関連テクノロジを使用してフォーマットおよび検証することもできます。これは重要ではないため、ここでは省略します。


SVG のレンダリング順序

SVG は、定義された要素の順序に従って厳密にレンダリングされます。これは、階層化を制御するために z-index 値に依存する HTML とは異なります。 。 SVG では、前に書かれた要素が最初に描画され、後ろに書かれた要素が最後に描画されます。後でレンダリングされる要素は前の要素をカバーしますが、透明度の影響でカバーされていないように見える場合もありますが、SVG は実際には厳密な順序でレンダリングされます。
注: SVG は XML で定義されているため、HTML とは異なり、大文字と小文字が区別されます。
実用的なリファレンス
:
公式ドキュメント:
http://www.w3.org/TR/SVG11/
スクリプトインデックス: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
開発センター: https://developer.mozilla.org/en/ SVG
人気のリファレンス:http://www.chinasvg.com/