一、什么是SVG？
- SVG指可伸縮矢量圖形（Scalable Vector Graphics）宜肉；
- SVG用來定義用于網(wǎng)絡(luò)的基于矢量的圖形；
- SVG使用xml格式定義圖形翎碑；
- SVG圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失谬返；
- SVG是萬維網(wǎng)聯(lián)盟的標準；
- SVG與諸如DOM和XSL之類的W3C標準是一個整體（于2003年1月14日成為W3C推薦標準）日杈。
二遣铝、SVG優(yōu)勢
參與定義SVG的組織有：太陽微系統(tǒng)、Adobe达椰、蘋果公司翰蠢、IBM以及柯達。
與其他圖像格式相比啰劲，使用SVG的優(yōu)勢在于：
- SVG可被非常多的工具讀取和修改（比如記事本）梁沧；
- SVG與JPEG和GIF圖像比起來，尺寸更小蝇裤，且可壓縮性更強廷支；
- SVG是可伸縮的频鉴；
- SVG圖像可在任何的分辨率下被高質(zhì)量的打印恋拍；
- SVG可在圖像質(zhì)量不下降的情況下被放大垛孔；
- SVG圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）施敢；
- SVG可以與java技術(shù)一起運行周荐；
- SVG是開放的標準；
- SVG文件是純粹的XML僵娃。
SVG的主要競爭者是flash概作。
與flash相比，SVG最大的優(yōu)勢是與其他標準（比如XSL和DOM）相兼容默怨，而flash則是未開源的私有技術(shù)讯榕。
三、SVG實例
<?xml version="1.0" standalone="no"?>
//第一行包含了XML聲明匙睹。standalone 該屬性規(guī)定此SVG文件是否是“獨立“愚屁，或含有對外部文件的引用。
//standalone="no" 意味著 SVG 文檔會引用一個外部文件 - 在這里痕檬，是 DTD 文件霎槐。
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
//第二和第三行引用了這個外部的 SVG DTD。該 DTD 位于 //“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”谆棺。
//該 DTD 位于 W3C栽燕，含有所有允許的 SVG 元素。
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
//SVG 代碼以 <svg> 元素開始改淑，包括開啟標簽 <svg> 和關(guān)閉標簽 </svg> 這是根元素。width 和 height 屬
//性可設(shè)置此 SVG 文檔的寬度和高度浴讯。version 屬性可定義所使用的 SVG 版本朵夏，xmlns 屬性可定義 SVG 命名空間。
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
//SVG 的 <circle> 用來創(chuàng)建一個圓榆纽。cx 和 cy 屬性定義圓中心的 x 和 y 坐標仰猖。如果忽略這兩個屬性，
//那么圓點會被設(shè)置為 (0, 0)奈籽。r 屬性定義圓的半徑饥侵。
//stroke 和 stroke-width 屬性控制如何顯示形狀的輪廓。我們把圓的輪廓設(shè)置為 2px 寬衣屏，黑邊框躏升。
//fill 屬性設(shè)置形狀內(nèi)的顏色。我們把填充顏色設(shè)置為紅色狼忱。
//關(guān)閉標簽的作用是關(guān)閉 SVG 元素和文檔本身膨疏。
</svg>
//注釋：所有的開啟標簽必須有關(guān)閉標簽一睁！
四、SVG形狀
SVG有一些預(yù)定義的形狀元素佃却，可被開發(fā)者使用和操作：
- 矩形<rect>
- 圓形<circle>
- 橢圓<ellipse>
- 線<line>
- 折線<polyline>
- 多邊形<polygon>
- 路徑<path>
矩形
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>
代碼解釋：
- rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
- style 屬性用來定義 CSS 屬性
- CSS 的 fill 屬性定義矩形的填充顏色（rgb 值者吁、顏色名或者十六進制值）
- CSS 的 stroke-width 屬性定義矩形邊框的寬度
- CSS 的 stroke 屬性定義矩形邊框的顏色
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>
代碼解釋：
- x 屬性定義矩形的左側(cè)位置（例如，x="0" 定義矩形到瀏覽器窗口左側(cè)的距離是 0px）
- y 屬性定義矩形的頂端位置（例如饲帅，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
- CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的范圍是：0 - 1）
- CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度（合法的范圍是：0 - 1）
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>
代碼解釋：
- CSS 的 opacity 屬性定義整個元素的透明值（合法的范圍是：0 - 1）复凳。
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>
代碼解釋：
- rx 和 ry 屬性可使矩形產(chǎn)生圓角。
圓形
<circle> 標簽可用來創(chuàng)建一個圓灶泵。
<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>
代碼解釋：
- cx 和 cy 屬性定義圓點的 x 和 y 坐標育八。如果省略 cx 和 cy，圓的中心會被設(shè)置為 (0, 0)丘逸。
- r 屬性定義圓的半徑单鹿。
橢圓
<ellipse> 標簽
<ellipse> 標簽可用來創(chuàng)建橢圓。橢圓與圓很相似深纲。不同之處在于橢圓有不同的 x 和 y 半徑仲锄，而圓的 x 和 y 半徑是相同的。
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>
</svg>
代碼解釋：
- cx 屬性定義圓點的 x 坐標
- cy 屬性定義圓點的 y 坐標
- rx 屬性定義水平半徑
- ry 屬性定義垂直半徑
通過ellipse創(chuàng)建三個累疊而上的橢圓：
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow"/>
</svg>
組合兩個橢圓：
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:yellow"/>
<ellipse cx="220" cy="100" rx="190" ry="20"
style="fill:white"/>
</svg>
線條
<line> 標簽用來創(chuàng)建線條湃鹊。
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
代碼解釋：
- x1 屬性在 x 軸定義線條的開始
- y1 屬性在 y 軸定義線條的開始
- x2 屬性在 x 軸定義線條的結(jié)束
- y2 屬性在 y 軸定義線條的結(jié)束
多邊形
<polygon> 標簽用來創(chuàng)建含有不少于三個邊的圖形儒喊。
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>
代碼解釋：
- points 屬性定義多邊形每個角的 x 和 y 坐標
折線
SVG <polyline> 標簽用來創(chuàng)建僅包含直線的形狀。
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
路徑
<path> 標簽
<path> 標簽用來定義路徑币呵。
下面的命令可用于路徑數(shù)據(jù)：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
以上所有命令均允許小寫字母怀愧。大寫表示絕對定位，小寫表示相對定位
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>
代碼解釋：
上面的例子定義了一條路徑余赢，它開始于位置 250 150芯义，到達位置 150 350，然后從那里開始到 350 350妻柒，最后在 250 150 關(guān)閉路徑扛拨。
創(chuàng)建一個螺旋：
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
濾鏡
SVG 濾鏡用來向形狀和文本添加特殊的效果。
在 SVG 中举塔，可用的濾鏡有：
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight
- fePointLight
- feSpotLight
注釋：您可以在每個 SVG 元素上使用多個濾鏡绑警！
高斯模糊
必須在<defs>標簽中定義SVG濾鏡。
高斯模糊（Gaussian Blur）
<filter> 標簽用來定義 SVG 濾鏡央渣。<filter> 標簽使用必需的 id 屬性來定義向圖形應(yīng)用哪個濾鏡计盒？
<filter> 標簽必須嵌套在 <defs> 標簽內(nèi)。<defs> 標簽是 definitions 的縮寫芽丹，它允許對諸如濾鏡等特殊元素進行定義北启。
<svg width="100%" height="100%" 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>
代碼解釋：
- <filter> 標簽的 id 屬性可為濾鏡定義一個唯一的名稱（同一濾鏡可被文檔中的多個元素使用）
- filter:url 屬性用來把元素鏈接到濾鏡。當鏈接濾鏡 id 時，必須使用 # 字符
- 濾鏡效果是通過 <feGaussianBlur> 標簽進行定義的暖庄。fe 后綴可用于所有的濾鏡
- <feGaussianBlur> 標簽的 stdDeviation 屬性可定義模糊的程度
- in="SourceGraphic" 這個部分定義了由整個圖像創(chuàng)建效果
漸變
SVG 漸變
漸變是一種從一種顏色到另一種顏色的平滑過渡聊替。另外，可以把多個顏色的過渡應(yīng)用到同一個元素上培廓。
在 SVG 中惹悄，有兩種主要的漸變類型：
- 線性漸變
- 放射性漸變
線性漸變
<linearGradient> 可用來定義 SVG 的線性漸變。
<linearGradient> 標簽必須嵌套在 <defs> 的內(nèi)部肩钠。<defs> 標簽是 definitions 的縮寫泣港，它可對諸如漸變之類的特殊元素進行定義。
線性漸變可被定義為水平价匠、垂直或角形的漸變：
- 當 y1 和 y2 相等当纱，而 x1 和 x2 不同時，可創(chuàng)建水平漸變
- 當 x1 和 x2 相等踩窖，而 y1 和 y2 不同時坡氯，可創(chuàng)建垂直漸變
- 當 x1 和 x2 不同，且 y1 和 y2 不同時洋腮，可創(chuàng)建角形漸變
<svg width="100%" height="100%" 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>
代碼解釋：
- <linearGradient> 標簽的 id 屬性可為漸變定義一個唯一的名稱
- fill:url(#orange_red) 屬性把 ellipse 元素鏈接到此漸變
- <linearGradient> 標簽的 x1箫柳、x2、y1啥供、y2 屬性可定義漸變的開始和結(jié)束位置
- 漸變的顏色范圍可由兩種或多種顏色組成悯恍。每種顏色通過一個 <stop> 標簽來規(guī)定。offset 屬性用來定義漸變的開始和結(jié)束位置伙狐。
放射性漸變
<radialGradient> 標簽必須嵌套在 <defs> 中涮毫。<defs> 標簽是 definitions 的縮寫，它允許對諸如漸變等特殊元素進行定義贷屎。
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>
代碼解釋：
<radialGradient> 標簽的 id 屬性可為漸變定義一個唯一的名稱罢防，fill:url(#grey_blue) 屬性把 ellipse 元素鏈接到此漸變，cx唉侄、cy 和 r 屬性定義外圈篙梢，而 fx 和 fy 定義內(nèi)圈 漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個 <stop> 標簽來規(guī)定美旧。offset 屬性用來定義漸變的開始和結(jié)束位置。
Canvas VS SVG
SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴展標記語言（XML）贬墩，用于描述二維矢量圖形的一種圖形格式榴嗅。SVG是W3C制定的一種新的二維矢量圖形格式，也是規(guī)范中的網(wǎng)絡(luò)矢量圖形標準陶舞。SVG嚴格遵從XML語法嗽测，并用文本格式的描述性語言來描述圖像內(nèi)容，因此是一種和圖像分辨率無關(guān)的矢量圖形格式。
什么是SVG唠粥？
- SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
- SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形
- SVG 使用 XML 格式定義圖形
- SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失
- SVG 是萬維網(wǎng)聯(lián)盟的標準
- SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體
Canvas 和 SVG 的區(qū)別：
- SVG
SVG 是一種使用 XML 描述 2D 圖形的語言疏魏。
SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的晤愧。您可以為某個元素附加 JavaScript 事件處理器大莫。
在 SVG 中，每個被繪制的圖形均被視為對象官份。如果 SVG 對象的屬性發(fā)生變化只厘，那么瀏覽器能夠自動重現(xiàn)圖形。
特點：- 不依賴分辨率
- 支持事件處理器
- 最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）
- 復(fù)雜度高會減慢渲染速度（任何過度使用 DOM 的應(yīng)用都不快）
- 不適合游戲應(yīng)用
- Canvas
Canvas 通過 JavaScript 來繪制 2D 圖形舅巷。
Canvas 是逐像素進行渲染的羔味。
在 canvas 中，一旦圖形被繪制完成钠右，它就不會繼續(xù)得到瀏覽器的關(guān)注赋元。如果其位置發(fā)生變化，那么整個場景也需要重新繪制飒房，包括任何或許已被圖形覆蓋的對象搁凸。
特點：- 依賴分辨率
- 不支持事件處理器
- 弱的文本渲染能力
- 能夠以 .png 或 .jpg 格式保存結(jié)果圖像
- 最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪
