SVG 文書で実際に図形を描画するには svg 要素の中に基本図形となるデータを記述しなければなりません。 基本図形は、複数の図形をまとめるコンテナとなる要素の子要素として指定されなければなりません。 代表的な基本図形のコンテナ（親要素）は svg 要素となるでしょう。
単純な矩形を描画するには rect 要素を指定します。 rect 要素では x、y、width、height 属性を指定することができます。 x、y 属性では矩形の左上隅の座標を、width と height 属性では矩形の幅と高さをそれぞれしています。 x と y 属性を省略した場合は値 0 を指定したものとみなされます。
SVG が描画する手順は、単純に要素が現れた順番と考えてください。 しかし、基本図形に関連した要素を指定しても、コンテナによっては描画されない場合もあります。 例えば、一連の図形をテンプレートとして定義するという場合は即座に描画されるものではありません。
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="5" width="200" height="100" /> </svg>
このサンプルを見ると、デフォルトの色である黒で長方形が描画されるはずです。 ソースでは rect 要素を (10 , 5) 座標から幅 200、高さ 100 ピクセルで描画しています。
さらに rect 要素では rx 属性と ry 属性を指定することができます。 rx 属性は矩形の角を丸めるのに用いられる楕円のＸ軸半径の長さを、ry 属性は矩形の角を丸めるのに用いられる楕円のＹ軸半径の長さを指定できます。 このとき、rx に妥当な値が指定されており ry が省略されている場合、 ry の値が rx に等しいものとして処理されます。 同様に ry に妥当な値が指定されており rx が省略されている場合、 rx の値が ry に等しいものとして処理されます。 rx と ry の両方に妥当な値が指定されていない場合は矩形の角は直角になります。 rx が矩形の幅の半分より大きい場合、 または ry が矩形の高さの半分より大きい場合、 矩形の幅、または高さの半分に等しい値が指定されたとみなします（すなわち矩形は真円になる）。
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100" rx="20" /> <rect x="120" y="10" width="200" height="100" rx="50" ry="20"/> <rect x="10" y="120" width="100" height="100" ry="50" /> </svg>
角を幅や高さの半分以上丸めようとした rect 要素は自然と円として描画されましたが、円は circle 要素で定義します。 この要素は中心点と半径を基に真円を描画します。
circle 要素には cx 属性と cy 属性で、円の中心となる座標を指定し、r 属性で半径をしてします。
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="200" cy="150" r="100" /> </svg>
circle は完全な真円しか描画することができません。 楕円形の図を描画するには ellipse 要素で定義しなければなりません。 ellipse 要素の場合は circle 要素同様に円の中央の座標を指定する cx 属性と cy 属性に加えて、X 軸の半径の長さを指定する rx 属性と Y 軸の半径の長さを指定する ry 属性を指定することができます。
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="200" cy="150" rx="200" ry="100" /> </svg>
このサンプル SVG を表示すると、横に長い楕円が描画されるでしょう。
単純な 1 本の線を描画する場合は line 要素 を指定します。 線は幅や高さではなく、2 点の座標を指定し、これらを結ぶ形で描画されます。 線を引く 2 点の座標は、x1 と y1 属性、x2 と y2 属性でそれぞれ指定します。 線は座標 (x1, y1) から (x2, y2) まで引かれます
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line x1="10" y1="10" x2="390" y2="290" /> </svg>
数多くの線分を line 要素で定義していては（特に手書きの場合は）大変な手間になるでしょう。 複数の線を同時に描画、または多角形を描画するには polyline 要素、または poligon 要素が好ましいでしょう。 polyline 要素は複数の線を、polygon は多角形を定義するための要素です。
polyline 要素と polygon 要素には points 属性を指定することができます。 points 属性に指定する値は、複数の線、または多角形を定義する複数の座標点のリストです。 座標はカンマ , または空白文字（スペース、改行、タブ文字など）で区切ります。 座標のリストは順に "x1,y1,x2,y2,x3,y3 ... xn,yn" という形で x と y 座標のセットを複数組指定します。 このリスト内の値が奇数個の場合はエラーとなります。
座標リストの書き方はやや自由度が高くありますが、一般的にはカンマと空白を使い分けて座標ごとに記述するべきでしょう。 例えば "x1,y1 x2,y2 x3,y3" という書き方や "x1 y1 , x2 y2 , x3 y3" という記述方法が考えられます。
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polyline points="200 10 10 100 390 100" /> <polygon points="200,120,10,220,390,220" /> </svg>
このサンプルは polyline 要素と poligon 要素による図形を描画します。 ところが、表示してみると polyline 要素も poligon 要素も同じような閉じた三角形を描画してしまいます。 これらの要素の違いは何でしょう。
polyline 要素は閉じた図形ではなく複数の線を描画し、多角形を描画するのは polygon 要素であるということを思い出してください。 polygon 要素の場合、最後の点から最初の点まで線を閉じて、必ず閉じた図形になろうとする性質があります。 このサンプルでは、両方の図形とも内面を塗りつぶし、境界線を描画していないために同じような振る舞いとなったのです。 次のサンプルを表示すればこれらの要素の違いがわかるでしょう。
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="black" points="200,10 10,100 390,100" /> <polygon fill="none" stroke="black" points="200,120 10,220 390,220" /> </svg>
fill 属性と stroke 属性はまだ解説していない属性です。 fill="none" は図形の内側を塗りつぶさないことを表し、stroke="black" は図形の外枠を黒で描画することを表しています。 これらについて、詳しくは後ほど解説します。