目次
SVGの基本についてまとめました。
Scalable Vector Graphics
SVG とは、 XML形式で2次元のグラフィックを記述する言語です。
要素
SVG では 下記3種類のグラフィックオブジェクトを扱うことができます。
- ベクター図形 (直線と曲線で表されるもの)
- 画像
- テキスト
これらのグラフィックオブジェクトは、グループ化・変形・合成が可能です。
SVGの図形にはユーザのアクションに応じた動きを付けることが可能で、SVGアニメーションを利用したり、javascriptのonclick
イベントを使うことが可能です。
性質
スケーラブル Scalable
SVGは縮小・拡大が可能であるという意味と、ファイル数、人数・ユーザ数、使用アプリケーション数を増やすことができるという意味の双方においてスケーラブルです。
SVGグラフィックは異なる解像度のディスプレイに対してスケーラブルであるため、プリンタでの出力においては最大の解像度を利用することができますし、異なる解像度のディスプレイでも同じサイズの画像として出力できます。 そのほか、 同じSVGグラフィックを異なるサイズで使用することもできますし、拡大して細部を確認することも可能です。
SVGグラフィックは、ひとつの完結したグラフィックとして使用することもできますし、別のグラフィックの一部として組み込むこともできます。 これにより複数人での作業も可能となっています。
ベクター Vector
直線や曲線などの幾何図形を作成するための情報を数値や式として表現したものをベクタ画像と呼びます。 一方、各ピクセル(画素)の情報を含んだ画像をラスタ画像と呼びます。 基本的ににベクターフォーマットはラスター画像を統合することもでき、クリッピングパスなどのベクトル情報と組み合わせたイラストの作成も可能です。
最近のディスプレイは全てラスター指向であるため、ラスタのみのグラフィックとベクター画像はそれらがどのようにラスター化されるかという点のみにおいて違いが出てきます。 ラスタ画像は本来ラスタ化されたものですが、ベクタ画像の場合はクライアント側でラスタ化します。
グラフィック Graphics
多くの既存のXML文法は、テキスト情報または財務情報などの生データを表し、 基本的にHTMLのimg
要素よりも情報の乏しい、初歩的なグラフィック情報しか表すことができません。 SVG は既存の文法とは異なり、 ベクター画像またはベクター及びラスター画像のリッチな構造化された記述ができるようになっています。
スタイル化可能 Stylable
スタイルシートの利点は表現の制御、柔軟性、速いダウンロード速度、保守性にあります。 SVG を使うことで、それらの効果をグラフィックに対して適用することが可能です。
スクリプト、DOM、CSS の組み合わせは Dynamic HTML と呼ばれ、広くアニメーションやインタラクション、表現効果に用いられています。 SVG はHTMLと同じように グラフィックに対して スクリプト実行を可能にしています。