2. SVGの基本的な記述方法

2005.11.17　株式会社四次元データ　藤本将光

SVG 2章　SVGの基本的な記述方法

前章では、SVG文書の記述方法を説明しましたが、本章では描画内容を記述するSVG要素を中心にSVGの基本的な記述方法について説明します。

2.1 SVG要素

SVG要素は、SVG文書のルート要素です。
SVG要素は、子要素として描画要素を持っています。描画要素は図形、テキストの3つに分類されます。図形要素には、線を引くline要素や円を描くcircle要素などがあります。パス要素は自由な曲線を描く要素であり、テキスト要素は文字を表記する要素です。
また、SVG要素では、width属性、hight属性を指定することによって、描画内容を表示させる領域の幅と高さを指定します。表示領域は左上を原点(0,0)とし、長さの単位を指定することができます。初期座標系では「1単位」が「1px(ピクセル)」となっていますが、後述の単位によって指定することも可能です。

2.2 単位と色の指定

SVG文書では長さの単位としてCSS2（カスケーディング・スタイル・シート2）で定義された単位が使用できます。具体的には、「cm」（センチメートル）、「mm」（ミリメートル）、）、「px」（ピクセル）、「pc」（パイカ）、「pt」（ポイント）である。とくに単位を指定しない場合はピクセル単位となります。
色指定の方法は、「色名」、「10進数指定」、「16進数指定」の3種類があります。
これらの単位、色の指定はSVG要素のタグ内に属性値として組み込むことによって可能です。