1、SVG矩形
<rect x="10" y="10" height="50" width="50" rx="5" ry="5" style="stroke:#006600;stroke-width: 3; stroke-dasharray: 10 5; fill: #00cc00;fill-opacity: 0.5"/>
SVG矩形的位置由x和y屬性決定。請記住，這個位置是相對於任何它最接近的父元素的位置。
SVG矩形的尺寸由width和height屬性決定。
style屬性允許你爲矩形設置附加的樣式，如描邊色，描邊寬度和填充色等。
rx和ry屬性用於決定矩形圓角的大小。rx屬性決定圓角的寬度，ry屬性則決定圓角的高度。
stroke屬性來設置SVG矩形的邊框屬性。
stroke-width屬性來設置SVG矩形的邊框的寬度。
stroke-dasharray: 屬性來設置SVG矩形的邊框設置爲虛線。
fill屬性來爲SVG矩形填充顏色。
fill-opacity屬性來設置填充矩形的透明度。
2、SVG圓形
<circle cx="40" cy="40" r="24" style="stroke:#006600; stroke-width: 3;stroke-dasharray: 10 5;fill:#00cc00"/>
<ellipse cx="40" cy="40" rx="30" ry="15" style="stroke:#006600;stroke-width: 3;stroke-dasharray: 10 5;stroke-opacity: 0.5; fill:#00cc00"/>
cx和cy表示圓心的座標，r屬性則是圓的半徑。
stroke屬性來設置SVG圓形的描邊屬性。
stroke-width設置描邊的寬度。
stroke-dasharray屬性來實現圓形的虛線描邊效果。
fill-opacity屬性來設置填充色的透明度。
3、SVG直線
<line x1="0" y1="10" x2="0" y2="100" style="stroke:#006600;"/>
x1和y1屬性用於指定直線的起點，x2和y2屬性用於指定直線的終點。可以使用style屬性來爲直線設置顏色和描邊寬度。
4、SVG折線
<polyline points="0,0 30,0 15,30" style="stroke:#006600;"/>
5、SVG多邊形
<polygon points="50,5 100,5 125,30 125,80 100,105 50,105 25,80 25, 30" style="stroke:#660000; fill:#cc3333; stroke-width: 3;"/>
6、SVG連接標記
<marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
<circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;"/>
</marker>
連接標記的寬度和高度必須明確指定，因爲它是一個單獨的圖像元素。
refX和refY屬性用於指定在連接標記中哪個點用於作爲參考點。
<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
</marker>
orient屬性設置爲auto，這樣就會自動旋轉圖形以適應不同的路徑。它的單位是degrees，例如設置爲：45。這會在使用的時候將這個標記（marker）旋轉45度。
<path d="M100,20 l50,0 l0,50 l50,0" style="stroke: #0000cc; stroke-width: 1px; fill: none;marker-start: url(#markerSquare); marker-mid: url(#markerSquare);marker-end: url(#markerArrow);"/>
marker-start : url(#markerId); markerId需要替換爲你想要使用的<marker>元素。
<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" orient="auto" markerUnits="strokeWidth">
<rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"/>
</marker>
<marker>元素的markerUnits屬性的值爲strokeWidth來實現的。實際上這是markerUnits屬性的默認值。
如果不想標記的大小自動匹配路徑的描邊寬度，可以設置markerUnits的值爲userSpaceOnUse。這樣在使用標記的時候，標記將會保持它們原來的大小。
7、SVG文字
<text x="20" y="40" style="text-anchor: start;kerning:2;letter-spacing:2;word-spacing: 4;transform="rotate(30 20,40)";writing-mode: tb;glyph-orientation-vertical: 0;direction: rtl; unicode-bidi: bidi-override;" textLength="140" lengthAdjust="spacing">這裏是SVG文字</text>
(1)text-anchor屬性。該屬性的取值爲：start、middle和end。
(2)letter-spacing和kerning屬性來控制文字的間距和字距調整（兩個glyphs之間的距離）。
(3)word-spacing CSS屬性來指定單詞的間距。
(4)writing-mode屬性製作垂直的SVG文字，將它的值設置爲tb（Top to Bottom）。
(5)glyph-orientation-vertical CSS屬性值爲0。這個屬性值用於旋轉glyphs。默認值它的值爲90度。
(6)direction CSSS屬性來設置文字的渲染方向。direction屬性有兩個取值：ltr和rtl。
(7)在渲染英文的時候，如果需要字母也從右向左渲染，需要設置unicode-bidi: bidi-override;
(8)textLength屬性來設置文字的長度。文字的長度可以用來調整字符（characters）之間的距離來適應指定的長度。同時也會調整符號（glyphs）的寬度。使用lengthAdjust屬性你可以指定是否同時調整字符間距和符號的寬度。
font-family 設置字體
font-size 設置文字大小
kerning 設置字距調整的值
letter-spacing 字母之間的間距
word-spacing 單詞之間的間距
text-decoration 是否帶下劃線。可選值有：none、underline、overline和line-through
stroke 文字的描邊顏色。默認文字只有填充色，沒有描邊，添加描邊將使文字變粗
stroke-width 文字描邊的寬度
fill 文字的填充色
8、SVG多行文本
<text x="20" y="10">
<tspan>tspan line 1</tspan>
<tspan dx="30" dy="10">tspan line 2</tspan>
</text>
每一行文本在X軸方向上相對定位可以使用dx屬性（delta x）。
每一行文字都相對於前一行文字垂直定位，可以在<tspan>元素中使用dy屬性（delta y）。
<tspan dx="5 10 20">123</tspan>
<tspan dy="5 10 20">123</tspan>
<dx>屬性中寫了多個數字，那麼每一個數字會被應用到<tspan>元素的每一個字符上。
<dy>屬性中寫了多個數字，那麼每一個數字會被應用到<tspan>元素的每一個字符上。
<text x="10" y="20">
這是一個tspan元素的 <tspan style="baseline-shift: super;">上標</tspan>
和 <tspan style="baseline-shift: sub;">下標</tspan> 混合的文本串效果。
</text>
baseline-shift CSS屬性將一個<tspan>元素設置爲上標或下標。
9、SVG defs元素
<defs>
<g id="shape">
<rect x="100" y="100" width="100" height="100" />
<circle cx="100" cy="100" r="100" />
</g>
</defs>
<use xlink:href="#shape" x="50" y="50" />
<use xlink:href="#shape" x="200" y="50" />
SVG的<defs>元素用於預定義一個元素使其能夠在SVG圖像中重複使用。
在<defs>元素中定義的圖形不會直接顯示在SVG圖像上。要顯示它們需要使用<use>元素來引入它們。
10、SVG symbol元素
<symbol id="shape2">
<circle cx="25" cy="25" r="25" style="fill:#bf55ec;"/>
</symbol>
<use xlink:href="#shape2" x="50" y="25" />
SVG <symbol>元素用於定義可重複使用的符號。嵌入在<symbol>元素中的圖形是不會被直接顯示的，除非你使用<use>元素來引用它。
一個<symbol>元素可以有preserveAspectRatio和viewBox屬性。而<g>元素不能擁有這些屬性。因此相比於在<defs>元素中使用<g>的方式來複用圖形，使用<symbol>元素也許是一個更好的選擇。
11、 SVG use元素
<use xlink:href="#shape" x="50" y="50" />
<use xlink:href="#shape" x="200" y="50" />
SVG <use>元素可以在SVG圖像中多次重用一個預定義的SVG圖形，包括<g>元素和<symbol>元素。被重用的圖形可以在定義<defs>的內部（圖形將不可見直到使用use來引用它）或外部。
<use>元素可以引用SCG圖像中的任何元素，只要這個元素有一個唯一的ID號，
可以在<use>元素中使用style屬性來爲複用的圖形設置它的樣式。
12、SVG path元素
<path d="M50,50
A30,30 0 0,1 35,20
L100,100
M110,110
L100,0"
style="stroke:#660000; fill:none;"/>
SVG的<path>元素用於定義一些複雜的圖形。它可以結合使用直線，曲線等來製作各種不規則的圖形。
所有的這些繪製工作都是在<path>元素中通過d屬性來完成的。<d>屬性包含了一些用於繪製的命令。
M命令代表“Move to”（移動到）的意思。A命令代表一個“arc”（弧線）。L命令代表“Line”（直線）。
（1）
<path d="M50,50" style="stroke:#660000; fill:none;"/>
在<path>元素的d屬性中的第一個命令總是一個移動命令。在你繪製圖形之前你必須移動虛擬畫筆到某個位置上。移動畫筆通過M指令來完成。
（2）
<path d="M50,50 L100,100" style="stroke:#660000; fill:none;"/>
直線命令是<path>元素最簡單的命令。繪製直線使用L或l指令。大小的L指令繪製一條直線到一個絕度位置的點，而小寫的l指令繪製一條直線到一個相對位置的點。相對位置的點是指從虛擬畫筆開始繪製的點的座標加上由l指令給出的座標。看不懂？沒關係，我們來舉個例子：假如虛擬畫筆開始繪製的位置是（50,50），l指令給出的座標是(100,100)，那麼直線將從(50,50)位置開始繪製，繪製到(50+100,50+100)的位置。如果使用的是L100,100指令，那麼就是從(50,50)位置開始繪製直線，繪製到(100,100)的位置。
（3）
<path d="M50,50 A30,50 0 0,1 100,100" style="stroke:#660000; fill:none;"/>
使用<path>元素來繪製弧線使用A或a指令。大小和小寫指令的意義與直線命令相同。A指令上的第三個參數是x-axis-rotation。這個參數用於設置弧線X軸方向上的旋轉。通常不需要改變這個參數，它的默認值爲0。第四和第五個參數分別爲large-arc-flag和sweep-flag。它們是兩個標誌位。我們知道，從A點到B點繪製一條弧線，可以得到兩條不同的弧線。一條較大，另一條較小。large-arc-flag就是用於決定到底是繪製較大的那一條弧線還是繪製較小的那一條弧線。
（4）
<path d="M50,50 Q50,100 100,100" style="stroke: #006666; fill:none;"/>
使用<path>元素繪製二次貝茲曲線。繪製二次貝茲曲線使用Q或q命令。大小寫版本的Q命令和直線的原理相同。大小版本的指令代表結束點位於絕對座標系中。小寫版本的的指令代表結束點位於相對座標系中（相對於開始點）。
（5）
<path d="M50,50 C75,80 125,20 150,50" style="stroke: #006666; fill:none;"/>
使用<path>元素繪製三次貝茲曲線的命令是C和c。三次貝茲曲線和二次貝茲曲線相同，但是它有兩個控制點。大寫的命令的結束點使用絕對座標系，小寫的命令的結束點使用的是相對座標系（相對於開始點）。
（6）
<path d="M50,50 L100,50 L100,100 Z" style="stroke: #006666; fill:none;"/>
<path>元素有一個閉合路徑的快捷命令。閉合路徑是指從最後一個繪製點連線到開始點。這個命令是Z（或z，這裏大小寫沒有區別）。
指令 參數 名稱 描述
M x,y moveto 移動虛擬畫筆到指定的（x,y）座標，僅移動不繪製
m x,y moveto 移動虛擬畫筆到指定的（x,y）座標，這個座標是相對於當前畫筆的座標，僅移動不繪製
L x,y lineto 從當前畫筆所在位置繪製一條直線到指定的（x,y）座標
l x,y lineto 從當前畫筆所在位置繪製一條直線到指定的（x,y）座標，(x,y)座標是相對於花瓣位置的點
H x horizontal lineto 繪製一條水平直線到參數指定的x座標點，y座標爲畫筆的y座標
h x horizontal lineto 繪製一條水平直線到參數指定的x座標點（當前x + 指定的x），x座標相對於當前畫筆x座標
V y vertical lineto 從當前位置繪製一條垂直直線到參數指定的y座標
v y horizontal lineto 從當前位置繪製一條垂直直線到參數指定的y座標，y座標相對於當前畫筆的y座標
C x1,y1 x2,y2 x,y curveto 從當前畫筆位置繪製一條三次貝茲曲線到參數（x,y）指定的座標。x1，y1和x2,y2是曲線的開始和結束控制點，用於控制曲線的弧度
c x1,y1 x2,y2 x,y curveto 於大小C指令相同，但是座標是相對於畫筆的座標
S x2,y2 x,y shorthand / smooth curveto 從當前畫筆位置繪製一條三次貝茲曲線到參數（x,y）指定的座標。x2,y2是結束控制點。開始控制點和前一條曲線的結束控制點相同
s x2,y2 x,y shorthand / smooth curveto 和大小的S指令相同，但是座標是相對於當前畫筆的座標點
Q x1,y1 x,y 二次貝茲曲線 從當前畫筆位置繪製一條二次貝茲曲線到參數（x,y）指定的座標。x1,y1是控制點，用於控制曲線的弧度
q x1,y1 x,y 二次貝茲曲線 和大小的Q指令相同，但是座標是相對於當前畫筆的座標點
T x,y 平滑的二次貝茲曲線 從當前畫筆位置繪製一條二次貝茲曲線到參數（x,y）指定的座標。控制點被假定爲最後一次使用的控制點
t x,y 平滑的二次貝茲曲線 和大小的T指令相同，但是座標是相對於當前畫筆的座標點
A rx,ry x-axis-rotation large-arc-flag,sweepflag x,y 橢圓弧線 從當前畫筆位置開始繪製一條橢圓弧線到（x,y）指定的座標。rx和ry分別爲橢圓弧線水平和垂直方向上的半徑。x-axis-rotation指定弧線繞x軸旋轉的度數。它只在rx和ry的值不相同是有效果。large-arc-flag是大弧標誌位，取值0或1，用於決定繪製大弧還是小弧。sweep-flag用於決定弧線繪製的方向
a rx,ry x-axis-rotation large-arc-flag,sweepflag x,y 橢圓弧線 和大寫的A指令相同，但是座標是相對於當前畫筆的座標點
Z 無 閉合路徑 從結束點繪製一條直線到開始點，閉合路徑
z 無 閉合路徑 從結束點繪製一條直線到開始點，閉合路徑