在開始學習如何繪圖之前，我們先來看一下 SVG 的座標系統。與很多計算機繪圖所使用的座標系統一樣，SVG 也使用了網格座標系統。這種座標和我們以前在數學中學過的座標有些不同。
數學中的座標是由 x 軸（水平橫向延伸）和 y 軸（垂直縱向延伸）交織組成，交點被稱爲座標原點 (0,0) 。原點沿 x 軸向右爲正值，反之爲負值，沿 y 軸向上爲正值，反之爲負值。
而 SVG 網格座標系統的特點如下所示：
- 以左上角爲座標系的原點，即
(0,0)。 - 橫向延伸爲 X 軸正方向， x 座標逐漸增大。縱向爲 Y 軸正方向，y 座標逐漸增大。
- 座標以像素
px爲單位。
座標系統單位
SVG 座標系中對應的值可以指定單位，也可以不指定單位，如果不指定單位則默認單位爲 px。
下面是 SVG 中支持的長度單位，包含了常見的 CSS 單位：
| 單位 | 描述 |
|---|---|
| px | 像素，相對於屏幕分辨率 |
| em | 相對於父元素的字體大小 |
| ex | 字符的高度 x |
| cm | 釐米 |
| mm | 毫米 |
| in | 英寸 |
| pt | 點（1/72 英寸） |
| pc | Picas（1/21英寸） |
畫布
SVG 畫布就是用來繪製 SVG 內容的一個區域，這個畫布可以無限延伸，我們可以在這個畫布的任何位置繪製想要的內容。
SVG 視口(ViewPort)
SVG 的渲染都是在一個矩形區域內發生的，這個有限的矩形區域在 SVG 中被稱爲"視口"，超出這個視口的圖形將會被裁切並且隱藏。所以視口也就是 SVG 的渲染區域，用戶能看到 SVG 內容的區域。
那麼爲什麼超過視口的元素會被隱藏呢？這是因爲每個 SVG 元素都有一個默認的 overflow: hidden 樣式，所以超過視窗的內容不可見。如果想要讓超出部分變爲可見，可以將 overflow 屬性的值設置爲 visible 。
示例：
例如我們看下面這個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG學習(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg>
<rect width="300" height="300" style="fill:pink;"/>
</svg>
</body>
</html>
上述代碼中，我們繪製了一個寬爲 300px ，高爲 300px 的矩形，矩形的填充的顏色爲粉色。但是因爲我們沒有這個 SVG 的視口寬高，所以視口會默認寬高爲 300px * 150px，所以在瀏覽器中可以看到，矩形的高被隱藏了一半： 
除了像上述所說的將 overflow 屬性設置爲 visible，例如：
<svg style="overflow:visible;">
<rect width="300" height="300" style="fill:pink;"/>
</svg>
我們還可以通過給 <svg> 元素設置 width 和 height 屬性來給 SVG 視口設置寬和高。只要給視口設置的寬高大於繪製圖形的寬高，那麼圖形就能夠完整的顯示啦。
其實畫布和視口是兩個比較容易混淆的概念，每當我們創建一個 <svg> 元素時，就相當於創建了一個無窮大的畫布和一個視口。畫布和視口分別對應兩個座標系統，一個爲用戶座標系，一個爲視窗座標系。