SVG 簡介
SVG 是使用 XML 來描述二維圖形和繪圖程序的語言。
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用于網絡的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
SVG 是萬維網聯盟的標準
SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體

SVG 在 HTML 頁面
<embed>、<object> 或者 <iframe>
<embed src="circle1.svg" type="image/svg+xml" />
<object data="circle1.svg" type="image/svg+xml"></object>
<iframe src="circle1.svg"></iframe>
在html里面直接使用
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

矩形 <rect>
圓形 <circle>
橢圓 <ellipse>
線 <line>
折線 <polyline>
多邊形 <polygon>
路徑 <path>

矩形
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
style 屬性用來定義 CSS 屬性
CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值）
CSS 的 stroke-width 屬性定義矩形邊框的寬度
CSS 的 stroke 屬性定義矩形邊框的顏色<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1; stroke-opacity:0.9"/>x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器窗口左側的距離是 0px） y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px） CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的范圍是：0 - 1） CSS 的 stroke-opacity 屬性定義輪廓顏色的透明度（合法的范圍是：0 - 1）<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>opacity 屬性用于定義了元素的透明值 (范圍: 0 到 1)。<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>`
rx 和 ry 屬性可使矩形產生圓角。

圓形
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
cx和cy屬性定義圓點的x和y坐標。如果省略cx和cy，圓的中心會被設置為(0, 0)
r屬性定義圓的半徑

橢圓
<ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/>
CX屬性定義的橢圓中心的x坐標
CY屬性定義的橢圓中心的y坐標
RX屬性定義的水平半徑
RY屬性定義的垂直半徑

直線
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>
x1 屬性在 x 軸定義線條的開始
y1 屬性在 y 軸定義線條的開始
x2 屬性在 x 軸定義線條的結束
y2 屬性在 y 軸定義線條的結束

多邊形
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/>
points 屬性定義多邊形每個角的 x 和 y 坐標

曲線
<polyline> 元素是用于創建任何只有直線的形狀
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />

路徑
<path>元素用于定義一個路徑。
M = moveto 移動到的點的x軸和y軸的坐標
L = lineto 需要兩個參數，分別是一個點的x軸和y軸坐標，L命令將會在當前位置和新位置（L前面畫筆所在的點）之間畫一條線段。
H = horizontal lineto 繪制平行線
V = vertical lineto 繪制垂直線
C = curveto 三次貝塞爾曲線C
S = smooth curveto
Q = quadratic Bézier curve 二次貝塞爾曲線Q。
T = smooth quadratic Bézier curveto
A = elliptical Arc 弧形
Z = closepath 從當前點畫一條直線到路徑的起點(閉合)

文本
<text x="0" y="15" fill="red">I love SVG</text>
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
<a xlink: target="_blank">
<text x="0" y="15" fill="red">I love SVG</text>
</a>

Stroke 屬性
Stroke屬性定義一條線，文本或元素輪廓顏色：
stroke- width屬性定義了一條線，文本或元素輪廓厚度：

濾鏡

模糊效果

<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />

所有互聯網的SVG濾鏡定義在<defs>元素中