實(shí)例1： 繪制一個(gè)紅色圓形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="li.ml">
<title>Test</title>
</head>
<body>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
</body>
</html>
解釋：cx 和 cy 屬性定義圓點(diǎn)的 x 和 y 坐標(biāo)。如果省略 cx 和 cy，圓的中心會(huì)被設(shè)置為 (0, 0)
r 屬性定義圓的半徑脯燃。
實(shí)例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="li.ml">
<title>Test</title>
</head>
<body>
<svg width="100%" height="300px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>
</body>
</html>
代碼解釋：
<linearGradient> 標(biāo)簽的 id 屬性可為漸變定義一個(gè)唯一的名稱
fill:url(#orange_red) 屬性把 ellipse 元素鏈接到此漸變
<linearGradient> 標(biāo)簽的 x1、x2彰居、y1、y2 屬性可定義漸變的開始和結(jié)束位置
漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個(gè) <stop> 標(biāo)簽來規(guī)定。offset 屬性用來定義漸變的開始和結(jié)束位置胧卤。
漸變
1.線性漸變
<linearGradient> 可用來定義 SVG 的線性漸變。
<linearGradient> 標(biāo)簽必須嵌套在 <defs> 的內(nèi)部狂秦。<defs> 標(biāo)簽是 definitions 的縮寫灌侣，它可對諸如漸變之類的特殊元素進(jìn)行定義推捐。
線性漸變可被定義為水平裂问、垂直或角形的漸變：
當(dāng) y1 和 y2 相等，而 x1 和 x2 不同時(shí)牛柒，可創(chuàng)建水平漸變
當(dāng) x1 和 x2 相等堪簿，而 y1 和 y2 不同時(shí)，可創(chuàng)建垂直漸變
當(dāng) x1 和 x2 不同皮壁，且 y1 和 y2 不同時(shí)椭更，可創(chuàng)建角形漸變
2.放射漸變
<radialGradient> 用來定義放射性漸變。
<radialGradient> 標(biāo)簽必須嵌套在 <defs> 中蛾魄。<defs> 標(biāo)簽是 definitions 的縮寫虑瀑，它允許對諸如漸變等特殊元素進(jìn)行定義湿滓。
實(shí)例3：高斯濾鏡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="li.ml">
<title>Test</title>
</head>
<body>
<svg width="100%" height="300px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>
</body>
</html>
代碼解釋：
<filter> 標(biāo)簽的 id 屬性可為濾鏡定義一個(gè)唯一的名稱（同一濾鏡可被文檔中的多個(gè)元素使用）
filter:url 屬性用來把元素鏈接到濾鏡。當(dāng)鏈接濾鏡 id 時(shí)舌狗，必須使用 # 字符
濾鏡效果是通過 <feGaussianBlur> 標(biāo)簽進(jìn)行定義的叽奥。fe 后綴可用于所有的濾鏡
<feGaussianBlur> 標(biāo)簽的 stdDeviation 屬性可定義模糊的程度
in="SourceGraphic" 這個(gè)部分定義了由整個(gè)圖像創(chuàng)建效果
在 SVG 中，可用的濾鏡有：
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight
注釋：您可以在每個(gè) SVG 元素上使用多個(gè)濾鏡痛侍！
SVG 的歷史和優(yōu)勢
在 2003 年一月朝氓，SVG 1.1 被確立為 W3C 標(biāo)準(zhǔn)。
參與定義 SVG 的組織有：太陽微系統(tǒng)主届、Adobe赵哲、蘋果公司、IBM 以及柯達(dá)君丁。
與其他圖像格式相比枫夺，使用 SVG 的優(yōu)勢在于：
SVG 可被非常多的工具讀取和修改（比如記事本）
SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小绘闷，且可壓縮性更強(qiáng)筷屡。
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
SVG 可在圖像質(zhì)量不下降的情況下被放大
SVG 圖像中的文本是可選的，同時(shí)也是可搜索的（很適合制作地圖）
SVG 可以與 Java 技術(shù)一起運(yùn)行
SVG 是開放的標(biāo)準(zhǔn)
SVG 文件是純粹的 XML
SVG 的主要競爭者是 Flash簸喂。
與 Flash 相比毙死，SVG 最大的優(yōu)勢是與其他標(biāo)準(zhǔn)（比如 XSL 和 DOM）相兼容。而 Flash 則是未開源的私有技術(shù)喻鳄。
什么是SVG扼倘？
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損失
SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
SVG 與諸如 DOM 和 XSL 之類的 W3C 標(biāo)準(zhǔn)是一個(gè)整體