ともかく、SVGを使うとどんなことができるのかを見てみる。
「ベクトル表示で２次元画像が綺麗にできる」と言われてもわかりづらいだろうし、
綺麗すぎるサンプルを見ても何処から手を付けてよいのかわからない。
最初にHTMLページを手作業で作ったときのようにシンプルなものを考えてみよう。
グリッドを表示してみるサンプル。
パターンを使って敷き詰めてみる。pattern タグ、rect タグは比較的分かりやすい。
<?xml version="1.0" encoding="utf-8"?>
<svg xml:space="default" height="200" width="300">
<pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="10" height="10" stroke-width="0.1"
fill="white" stroke="gray" />
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#grid)"
stroke="gray" stroke-width="0.5" />
</svg>
単純な四角形を描く。rectタグを使いxy座標（x,y）と大きさ（width, height）を指定する。
内部の塗りつぶしは fill 属性、四角形の周りの線は、色が stroke 属性、幅が stroke-width 属性で指定する。
幅（stroke-width）を指定しないと、デフォルト値（0）のままになるので、注意が必要。
塗りつぶしをしない場合には、fill属性に"none"を指定するか、
透明度（fill-opacity属性）を 0 で指定する。
透明度は、1が不透明、0が完全に透明になる実数を指定。
<rect x="20" y="20" width="60" height="40" fill="orange" />
<rect x="100" y="20" width="60" height="40" fill="orange"
stroke="red" stroke-width="5" />
<rect x="180" y="20" width="60" height="40" fill="none"
stroke="red" stroke-width="5" />
<rect x="20" y="100" width="60" height="40" fill="orange"
fill-opacity="0.8" stroke="red" stroke-width="5" />
<rect x="100" y="100" width="60" height="40" fill="orange"
fill-opacity="0.5" stroke="red" stroke-width="5" />
<rect x="180" y="100" width="60" height="40" fill="orange"
fill-opacity="0.0" stroke="red" stroke-width="5" />
図形は、円（circle）、楕円（ellipse）、線（line）がある。
円の場合には、中心点（cx, cy）、半径（r）を指定する。
楕円の場合には、中心（cx, cy）、半径（rx, ry）を指定する。
矩形の角を丸くするためには、半径（rx, ry）を指定する。
線は、開始点（x1, y1）、終了点（x2, y2）を指定する。
<circle cx="50" cy="40" r="30" fill="orange" />
<ellipse cx="140" cy="40" rx="40" ry="30" fill="blue" />
<rect x="200" y="10" width="60" height="60" fill="red"
rx="10" ry="10" />
<line x1="20" y1="100" x2="100" y2="120" stroke="gray" stroke-width="5" />
<line x1="20" y1="120" x2="100" y2="140" stroke="gray" stroke-width="5" />
<rect x="160" y="80" width="60" height="60" fill="red"
rx="10" ry="10" />
<circle cx="190" cy="110" r="30" fill="orange" fill-opacity="0.7"/>
<circle cx="190" cy="95" r="15" fill="blue" fill-opacity="0.3"/>
<circle cx="190" cy="125" r="15" fill="blue" fill-opacity="0.3"/>
線を繋げていくためには、polygon と polyline を使う。
両方ともに、points 属性で、xy座標を指定していく。
polygon と polyline の違いは、polygon の場合には開始と終了を繋ぎ、
polyline の場合には開始と終了を繋がない点である。
線が交差する場合には、塗りつぶしの規則（詳細はあとで）に従って塗りつぶしが行われる。
多分、複雑な図形は polygon で描いて、折れ線の場合は polyline を使うのがよいかな。
<polygon points="40,10 10,70 70,70" fill="orange" />
<polygon points="80,10 140,10 110,70" fill="red"
stroke="orange" stroke-width="5" />
<polygon points="10,90 70,90 10,140 70,140" fill="orange" />
<polygon points="80,90 140,90 80,140 140,140" fill="red"
stroke="orange" stroke-width="5" />
<polyline points="240,10 210,70 270,70"
fill="orange" fill-opacity="0.5"
stroke="black" stroke-width="5" />
画像の表示は、image タグを使う。画像ファイルの指定は、xlink:href 属性で指定する。
画像の大きさ（width, height）を指定しないと、画像は表示されないので注意が必要。
大きさ（width, height）により自動的に画像が伸張する。
<image xlink:href="005.gif" x="10" y="10" width="82" height="66" />
<image xlink:href="005.gif" x="100" y="10" width="82" height="66" opacity="0.5" />
<image xlink:href="005.gif" x="190" y="10" width="82" height="66" opacity="0.2" />
<image xlink:href="005.gif" x="10" y="110" width="40" height="70" />
<image xlink:href="005.gif" x="90" y="130" width="70" height="40" />
点線や破線などの線が描ける。
これは線（line）だけでなく、矩形（rect）や円（circle）などの stroke, stroke-width 属性に共通に指定ができる。
点線を描く場合には、stroke-dasharray で間隔の値を指定する。透明色を指定するために、fill属性で none を指定する。
<line x1="10" y1="10" x2="150" y2="10"
stroke="blue" stroke-width="1" />
<line x1="10" y1="20" x2="150" y2="20"
stroke="blue" stroke-width="3" />
<line x1="10" y1="30" x2="150" y2="30"
stroke="blue" stroke-width="5" />
<line x1="10" y1="40" x2="150" y2="40"
stroke="blue" stroke-width="10" />
<line x1="10" y1="60" x2="150" y2="60"
stroke-dasharray="1" fill="none" stroke="gray" stroke-width="3" />
<line x1="10" y1="70" x2="150" y2="70" stroke-linecap="round"
stroke-dasharray="1 10" fill="none" stroke="gray" stroke-width="3" />
<line x1="10" y1="80" x2="150" y2="80" stroke-linecap="round"
stroke-dasharray="10 10" fill="none" stroke="gray" stroke-width="3" />
<line x1="10" y1="90" x2="150" y2="90" stroke-linecap="round"
stroke-dasharray="10 10 1 10" fill="none" stroke="gray" stroke-width="3" />
<line x1="10" y1="100" x2="150" y2="100" stroke-linecap="round"
stroke-dasharray="10 10 1 5 1 10" fill="none" stroke="gray" stroke-width="3" />
<line x1="10" y1="110" x2="150" y2="110" stroke-linecap="round"
stroke-dasharray="10 5" fill="none" stroke="gray" stroke-width="3" />
<rect x="185" y="25" width="50" height="50" fill="orange"
fill-opacity="0.5" rx="10" ry="10" />
<rect x="180" y="20" width="60" height="60" fill="none"
stroke="orange" stroke-width="3" rx="10" ry="10"
stroke-dasharray="5 5" stroke-linecap="round" />
線を描くときには、polygon や polyline を使うこともできるが、普通は path を使う。
path は、直線から曲線、スプライン曲線などいろいろな機能を揃えている。
d 属性を使って描くのだが、ここでは、M（移動）、L（直線）、Z（最初のポイントに戻る）、A（円弧）の例を示す。
<polygon fill="none" stroke="orange" stroke-width="3"
points="40,10 10,40 40,70 70,40" />
<path fill="none" stroke="blue" stroke-width="3"
d="M 40,80 L 10,110 L 40,140 L 70,110 Z" />
<path fill="none" stroke="orange" stroke-width="3"
d="M 90,40 A 30,30 0 0 0 150,40" />
<path fill="none" stroke="blue" stroke-width="3"
d="M 90,40 A 30,30 0 0 1 150,40" />
<path fill="none" stroke="red" stroke-width="3"
d="M 170,60 A 30,30 0 0 0 200,30" />
<path fill="none" stroke="orange" stroke-width="3"
d="M 170,60 A 30,30 0 0 1 200,30" />
<path fill="none" stroke="red" stroke-width="3"
d="M 170,110 A 30,30 0 0 0 200,80" />
<path fill="none" stroke="orange" stroke-width="3"
d="M 170,110 A 30,30 0 1 0 200,80" />
<path fill="none" stroke="red" stroke-width="3"
d="M 240,60 A 30,30 0 0 0 270,30" />
<path fill="none" stroke="orange" stroke-width="3"
d="M 240,60 A 30,30 0 1 1 270,30" />
と、ここまで書いてきたが、個々の部品を見ても最終的なイメージが浮かばない、と思う。
少し具体的な例を示すと、GUI のボタンのようなものが簡単に（？）作れることを示しておこう。
実際には、グラデーションなど様々な装飾も使えるのだが、一例として。