SVG在HTML5中的應用
SVG（Scalable Vector Graphics）是用來繪制矢量圖的HTML5標簽。只要定義好XML屬性就能夠獲得與其一致的圖像元素。
使用SVG之前先將標簽加入到HTML body中。就像其他的HTML標簽一樣，你可以為SVG標簽為之添加ID屬性。也可以為之添加css樣式，例如“border-style:solid;border-width:2px;”。SVG標簽跟其它的HTML標簽有通用的屬性。你可以用height="100px" width="200px" 為其添加高度和寬度。
一、 用SVG畫線條：
<svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/>
</svg>
其中：指定x1,y1,x2,y2值來代表起點終點坐標，在style屬性中使用“stroke:Green;”為線條指定顏色。用stroke-width:2為線條設置寬度。
二、 用SVG畫圓：
<svg id="svgCircleTutorial" height="250" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />
</svg>
其中：圓的中心cx="55" cy="55"，半徑r="50"，fill="#219E3E"填充顏色，stroke="#17301D" stroke-width="2"線條顏色與寬度
三、 用SVG畫矩形
<svg id="svgRectangleTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="myRectangle" width="300" height="100" stroke="#17301D" stroke-width="2" fill="blue" fill-opacity="0.5" stroke-opacity="0.5"/>
</svg>
其中：stroke="#17301D" stroke-width="2"定義邊框的顏色和寬度
四、 SVG畫橢圓
<svg id="svgEllipseTutorial" height="150" xmlns="http://www.w3.org/2000/svg">
<ellipse id="myEllipse" cx="120" cy="60" rx="100" ry="50" style="fill:#3F5208;stroke:black;stroke-width:3"/>
</svg>
其中：中心坐標cx="120" cy="60"，長軸短軸半徑 rx="100" ry="50"
五、 SVG畫多邊形
<svg id="svgPolygonTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon id="myPolygon" points="10,10 75,150 150,60" style="fill:blue;stroke:black;stroke-width:3"/>
</svg>
points="10,10 75,150 150,60"定義三個頂點(10,10),(75,150),(150,60)
舉例：
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
