SVG的基礎形狀矩形（rect）、圓（circle）、橢圓（ellipse）、線段（line）、折線（polyline）和多邊形（polygon），本文介紹了SVG中這些常用基本形狀的語法及教程。
一、矩形<rect>
矩形<rect>標記允許你創建矩形或它的變體，比如正方形，圓角矩形等。語法如下：
<rect x="80" y="53" width="189" height="52" style="fill:rgb(39，44，231); stroke:rgb(0， 0，128); stroke-width:1"/>
x屬性定義了矩形左上角頂點在用戶座標系X軸上的座標，缺省值爲 0；
y屬性定義了矩形左上角頂點在用戶座標系 Y軸上的座標，缺省值爲 0；
width和 height屬性定義了矩形的寬度和高度，其中任意一個值爲 0，矩形都不顯示style屬性允許我們定義 SVG推薦標準支持的 CSS樣式屬性。
fill 屬性定義了長方形的填充顏色，這裏採用的是 rgb 的格式，SVG 也支持顏色名和 16進制的顏色格式，比如:fill:red或 fill:#ff0000。
比如將填充紅色，可以用fill=”red” 或用 fill=”rgb(255,0,0)” 亦或用 fill=”#ff0000”。
stroke屬性定義邊框線，SVG中，如果不定義，邊框線沒有任何寬度，換句話說，SVG默認邊框線寬度爲 0，對所有的 SVG的形狀都是這樣的。
如果需要定義邊框線的話，採用這樣的確語法格式:stroke:rgb(0,0,128)定義顏色，stroke-width:1定義寬度
我門還可以改變填充顏色的透明度，可以這樣寫:fill-opacity: 0.1，透明度範圍是從 0到 1
也可以定義整個元素的透明度，opacity:0.5，該透明度對填充和邊框線都有效
也可以單獨定義邊框線的透明度：stroke-opacity:0.8
定義圓角矩形，使用 rx，ry屬性定義圓角的半徑。
rx定義圓角矩形的橢圓角在X方向的半軸長度。如果rx的值大於矩形寬度的一半，則取值矩形寬度的一半。
ry定義圓角矩形的橢圓角在Y方向的半軸長度。如果ry的值大於矩形高度的一半，則取值矩形高度的一半。
二、圓<circle>
圓<circle>要定義一個圓，只需要指頂圓心的座標、半徑即可，也可使用樣式單屬性定義外觀的樣式，語法如下：
circle cx="143" cy="163" r="84" style="fill:rgb(192，192，255); stroke:rgb(0，0，128); stroke-width:1"/>
其屬性定義如下：
cx：是圓心在用戶座標系中的X座標值，缺省值爲0.
Cy:是圓心在用戶座標系中的Y座標值，缺省值爲0.
r:是圓的半徑，不允許爲負數。如果是0，則圓形不顯示。
三、橢圓<ellipse>
橢圓<ellipse>定義橢圓和定義圓很相象，指定圓心，X，Y軸的半徑即可。語法如下：
<ellipse cx="160" cy="163" rx="101" ry="81" style="fill:rgb(192，192，255);stroke:rgb(0，0，128);stroke-width:1"/>
其常用屬性定義如下：
cx:是橢圓中心在用戶座標系中的X座標值，缺省值爲0。
cy:是橢圓中心在用戶座標系中的Y座標值，缺省值爲0。
rx:是X方向上橢圓的半軸長，不允許爲負數。如果是0，則橢圓不顯示。
ry:是Y方向上橢圓的半軸長，不允許爲負數。如果是0，則橢圓不顯示。
四、線段<line>
線段<line>通過指定開始點 (x1，y1)、結束點(x2，y2)和寬度 stroke定義一條直線。如：
<line x1="127" y1="65" x2="127" y2="200" style="stroke:rgb(0，0，0);stroke-width:2"/>
要想得到很細的線，可以指定 stroke-width爲大於 0小於 1的數值。
其常用屬性定義如下：
X1:是線段起點的X座標值，缺省值爲0。
yl:是線段起點的Y座標值，缺省值爲0。
x2:是線段終點的X座標值，缺省值爲0。
y2:是線段終點的Y座標值，缺省值爲0。
五、折線<polyline>
折線<polyline>這個標記通過指定各個點的座標，來定義一條折線，格式如下：
<polyline points="100，200 100，20 10，200 100，20" style="stroke:rgb(64， 64， 64);stroke-width:1"/>
其主要屬性爲points：
points：表示折線各頂點座標的一個列表，頂點座標的格式爲”x,y，其中x表示頂點的橫座標、x表示頂點的縱座標，不同頂點座標之間用空格分開。繪圖程序將按照points中的頂點依次繪製圖形。
六、多邊形<polygon>
多邊形<polygon>這個標記用來指定連續的點的座標來，定義多邊形。語法如下：
<polygon points="223.5，123.034 276，213.966 171，213.966" style="fill:rgb(126，14，83);stroke:rgb(0，0，128);stroke-width:1"/>
其主要屬性爲points
points：points的取值與折線的points一樣，但是在繪製多邊形的時候，繪圖程序不但按照points中的頂點依次繪製圖形，而且還將最後一個頂點與第一個頂點連接起來構成一個封閉圖形。
注：在 SVG中，允許使用浮點數來達到精確控制。