SVG画像でテキストや図形といったオブジェクトを定義するのは、比較的簡単です。SVG開発者として、今このページをお読みの方なら手書きでもかなり書けることでしょう（あるいは、画像オブジェクトをダイナミックに生成するプログラムを開発することもできるでしょう）。けれど、別の方法もあります。たとえば、Adobe® Illustrator® 9.0を使えば、複雑な画像の生成もお手元のIllustratorファイルをSVGで書き出すだけの手軽さで生成できるのです。けれども、アニメーションやインタラクティビティを視野に入れた場合、SVGオブジェクトの定義方法に対する全般的な理解や、さまざまな座標やエレメントの意味がとりわけ重要なものとなってきます。

ここでは、典型的なSVGコードについていくつか見てみることにしましょう。XMLと同様、タグの開始と閉じ、タグ同士のネストがあることを見てもおわかりになるように、SVGもHTMLに非常によく似ています。あらゆるSVGファイルは一番外側のエレメントとして <svg>をもっており、親ドキュメント（XMLのWebページ）の中の一部として、あるいは単独で独立したグラフィック・ファイルとして、インラインに埋め込むことができます。たとえば、以下の例は、単独ファイルであるSVGドキュメントの一番外側の構造を示しています。

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xml:space="preserve" width="5.5in" height=".5in">
...
</svg>

第１行目が、後に続くコードをXMLとして宣言しています。２行目で、DTDつまりDocument Type Definition（文書タイプ定義）を参照します。DTDとは、エレメントと属性を定義し、有効なドキュメントと構造の形成方法を指定するルール・セットです。

<svg>エレメント内部には、テキスト、図形、パスの３種類の基本的な描画エレメントが書けます。これらの定義はとても簡単です。たとえば、以下の記述をごらんください：

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xml:space="preserve" width="5.5in" height=".5in">
<text style="fill:red;" y="15">This is SVG.</text>
</svg>

上の例では、次のような結果になります：

このテキストは、幅5.5インチ、高さ５インチ、ベースラインから最上部まで15ピクセルの画像領域に位置づけられています。

次の例は、左上隅を画像領域の左上隅に合わせた（座標が指定されていない場合のデフォルト）青い長方形です。

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 03December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg xml:space="preserve" width="5.5in" height="2in">
<rect style="fill:blue;" width="250" height="100"/>
</svg>

パスは、以下のデータ属性で記述します："moveto" （新たに現在のポイントを設定する）、"lineto" （直線を描画する）、 "curveto"（最後の"moveto"ポイントまで線を描画することによって現在のパスをクローズする）次の例は、三角形のパスを指定しています。"M"は、"moveto," "、L"は"lineto"、"z"は"closepath."を指しています。

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xml:space="preserve" width="5.5in" height="2in">
<path d="M 50 10 L 350 10 L 200 120 z"/>
</svg>

データ属性の内部では、XY座標が暗黙のうちに定義されていることに注意してください。つまり、文字データ節約のために"x=" と "y=" が省略されているのです。 N

ここでご紹介したパス定義を見ておわかりになるように、SVGは非常に簡略化された書式で書くようになっています。これはファイルサイズを節約するためです。そのため、最初は取っつきにくい印象を与えるかもしれません。けれども、慣れてくれば、ファイルの構造は非常にシンプルですし、Illustrator SVG Formatプラグインを使えば、お手元で描画しているさまざまなエレメントを見やすくグループ分けすることも可能です。

次のレッスン：バウンディング・ボックス