基本形狀
大多數 SVG 圖形都使用幾種基本形狀。這些形狀的目的從它們的名稱就可以明顯看出。其中一些決定其位置和大小的引數已給出，但元素參考可能會包含更準確和完整的描述，以及此處未涵蓋的其他屬性。但是，由於它們在大多數 SVG 文件中使用，因此有必要對其進行某種介紹。
要插入一個形狀，您需要在文件中建立一個元素。不同的元素對應不同的形狀，並需要不同的引數來描述這些形狀的大小和位置。有些形狀略顯冗餘，因為它們可以透過其他形狀建立，但它們都存在是為了方便您，並使您的 SVG 文件儘可能簡短和易於閱讀。所有基本形狀都顯示在下圖中。
生成該影像的程式碼如下所示
<?xml version="1.0" standalone="no"?>
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
<line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
<polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
stroke="orange" fill="transparent" stroke-width="5"/>
<polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
stroke="green" fill="transparent" stroke-width="5"/>
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>
注意： stroke、stroke-width 和 fill 屬性將在教程的後面進行解釋。
矩形
<rect> 元素在螢幕上繪製一個矩形。有六個基本屬性控制螢幕上矩形的位置和形狀。右側的矩形設定了 rx 和 ry 引數，使其具有圓角。如果未設定，則預設為 0。
<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
圓
<circle> 元素在螢幕上繪製一個圓。它需要三個基本引數來確定元素的大小和形狀。
<circle cx="25" cy="75" r="20"/>
橢圓
<ellipse> 是 <circle> 元素的一種更通用的形式，您可以在其中分別縮放圓的 x 和 y 半徑（在數學上通常稱為*半長軸*和*半短軸*）。
<ellipse cx="75" cy="75" rx="20" ry="5"/>
線
<line> 元素以兩個點的座標作為引數，並在它們之間繪製一條直線。
<line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/>
折線
<polyline> 是一個由連線的直線組成的組。由於點的列表可能很長，因此所有點都包含在一個屬性中
<polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/>
點-
點的列表。每個數字必須由空格、逗號、換行符或換行符分隔，並允許有額外的空白。每個點必須包含兩個數字：一個 x 座標和一個 y 座標。因此，列表
(0,0)、(1,1)和(2,2)可以寫成0, 0 1, 1 2, 2。
多邊形
<polygon> 類似於 <polyline>，因為它由連線點列表的直線段組成。但對於多邊形，路徑會自動將最後一個點與第一個點連線起來，建立一個閉合形狀。
注意： 矩形是一種多邊形，因此可以使用多邊形建立一個沒有圓角的 <rect/> 元素。
<polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>
點-
點的列表，每個數字由空格、逗號、換行符或換行符分隔，並允許有額外的空白。每個點必須包含兩個數字：一個 x 座標和一個 y 座標。因此，列表
(0,0)、(1,1)和(2,2)可以寫成0, 0 1, 1 2, 2。然後路徑會閉合，因此會從(2,2)到(0,0)繪製一條最後的直線。
路徑
<path> 是 SVG 中可以使用最通用的形狀。使用 path 元素，您可以繪製矩形（帶或不帶圓角）、圓、橢圓、折線和多邊形。基本上，其他任何型別的形狀、貝塞爾曲線、二次曲線以及更多形狀都可以繪製。
因此，本教程的*下一節*將重點介紹路徑。但目前，請注意有一個引數用於控制其形狀。
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
d-
一個點的列表和其他有關如何繪製路徑的資訊。有關更多資訊，請參閱*路徑*部分。