在HTML中<SVG>元素是用來畫圖的，下面是一個SVG的例子：
<!DOCTYPE html> <html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body> </html>
在上面這個例子中首先通過<SVG>元素的width和height屬性來指定畫布的寬度和高度
網頁的左上角是畫布的原點，向右為x軸方向，向下為y軸方向
<circle>元素代表一個圓，cx和cy代表圓心的坐標; r代表圓的半徑;stroke代表圓形邊框線的顏色
stroke-witdth代表邊框線的粗細，fill代表內部填充色。
上面的例子執行的效果如下：
<svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /> </svg>
這個例子是畫一個矩形，<rect>元素代表矩形，width和height代表矩形寬度和高度，恰好和畫布大小一樣
style=
"fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"
這句話中style屬性指定了矩形的樣式（在標簽里給style屬性賦值的做法被稱為內聯CSS，后面CSS部分會講）
fill代表內部填充色，采用RGB形式（RGB就是通過紅綠藍三原色的不同值來表示各種顏色）
stroke-width代表矩形邊框線的粗細
stroke代表矩形邊框線的顏色
<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.2" /> </svg>
上面這段代碼是畫一個圓角矩形，x和y屬性指定矩形左上角的坐標，
rx和ry屬性指定圓角的弧度，rx和ry越大代表弧度越大，越接近圓形
width和height代表矩形的寬度和高度
在style屬性中opacity代表不透明度，越大越不透明
<svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg>
上面這個例子是畫一個多邊形（五角星）
points指定多邊型的頂點，具體畫法是首尾相連的直線線段構成的閉合多邊形形狀。最后一點連接到第一點
fill指的是內部填充色
fill-rule指的是填充方式，其中evenodd值意思是只填充內部，
具體的說是要判斷一個點是否在圖形內，該點作任意方向的一條射線，然后檢測射線與圖形路徑的交點的數量。如果結果是奇數則認為點在內部，是偶數則認為點在外部。
<svg height="210" width="500"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> </svg>
上面的代碼是畫一條直線，x1和y1是直線的起點，x2和y2是直線的終點。
<svg height="180" width="500"> <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" /> </svg>
上面的代碼通過<polyline>元素畫了一條由線段組成的台階，注意和五角星例子中的<polygon>元素不同
<polyline>元素不會自動把最后一點連接到第一個點!!!
<path>元素用來畫一條路徑，在<path>元素中用一些常用的關鍵字如下：
M代表移動到某個點
L代表連一條直線到某個點
Z代表從終點連接回起點
所有和外觀無關的信息都以字符串的形式賦給d屬性。
<svg height="210" width="400"> <path d="M150 0 L75 200 L225 200 Z" stroke="red" stroke-width="3" fill="none" />
這段代碼的意思是移動到（150,0），然后從(150,0)出發連接一條直線到(75,200)，
再從(75,200)連接一條直線到終點(225,200)
最后從終點連接出發點
線條顏色紅色，線條寬度3像素，不填充內部區域（fill="none"）
<svg height="30" width="200"> <text x="0" y="15" fill="red">I love SVG!</text> </svg>
上面這段代碼是在(0,15)的位置用紅色寫出"I Love SVG"
<svg height="140" width="500"> <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /> </svg>
上面這段代碼是畫一個橢圓，cx,cy代表圓心坐標，rx和ry代表橫軸和縱軸的長度。