一：什么是SVG？
對于SVG的定義如下：
①：SVG 指的是可伸縮矢量圖形 (Scalable Vector Graphics)。
②：SVG 用于定義用于網(wǎng)絡的基于矢量的圖形。
③：SVG 使用 XML 格式定義圖形。
④：SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失。
⑤：SVG 是萬維網(wǎng)聯(lián)盟的標準。
二：SVG的優(yōu)勢是什么？
SVG的優(yōu)勢有如下定義：
①：SVG 圖像可通過文本編輯器來創(chuàng)建和修改。
②：SVG 圖像可被搜索、索引、腳本化或壓縮。
③：SVG 是可伸縮的。
④：SVG 圖像可在任何的分辨率下被高質量地打印。
⑤：SVG 可在圖像質量不下降的情況下被放大。
三：SVG與Canvas的區(qū)別在于什么地方？
①：SVG 是一種使用 XML 描述 2D 圖形的語言。? ? Canvas 通過 JavaScript 來繪制 2D 圖形。
②：SVG 基于 XML，這意味著 SVG可以給每一個圖形綁定事件，但是Canvas是基于JavaScript，這就意味著Canvas無法給每一個圖形綁定事件。（只能給canvas整個畫布綁定事件，還有一種解決方案是使用第三方庫）。
在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形。
③：Canvas 是逐像素進行渲染的。在 canvas 中，一旦圖形被繪制完成，它就不會繼續(xù)得到瀏覽器的關注。
如果其位置發(fā)生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。
④：兼容性不同。 SVG的兼容性更好。
SV與Canvas之間的比較：
Canvas
-------依賴分辨率
-------不支持事件處理器
-------弱的文本渲染能力
-------能夠以 .png 或 .jpg 格式保存結果圖像
-------最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪
SVG
-------不依賴分辨率
-------支持事件處理器
-------最適合帶有大型渲染區(qū)域的應用程序（比如谷歌地圖）
-------復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
-------不適合游戲應用
四：SVG在html中是怎樣使用的？
首先SVG引入到html中的方法如下：
SVG 文件可通過以下標簽嵌入到HTML 文檔：<embed>、<object>、<iframe>。
使用<embed>標簽引入 ------ <embed src="xxx.svg" type="image/svg+xml" />
①：優(yōu)勢：所有主要瀏覽器都支持，并允許使用腳本。
②：缺點：不推薦在HTML4和XHTML中使用（但在HTML5允許）。
使用<object>標簽引入 ------- <object data="xxx.svg" type="image/svg+xml"></object>
①：優(yōu)勢：所有主要瀏覽器都支持，并支持HTML4，XHTML和HTML5標準。
②：缺點：不允許使用腳本。
使用<iframe>標簽引入 ------- <iframe src="xxx.svg"></iframe>
①：優(yōu)勢：所有主要瀏覽器都支持，并允許使用腳本。
②：缺點：不推薦在HTML4和XHTML中使用（但在HTML5允許）。
Tip:值得注意的地方是在使用單標簽的時候<embed src="" />一定要有 ?/ ?閉合不然會報錯?。。?/p>
SVG的代碼可以直接嵌入到HTML頁面中，或直接鏈接到SVG文件。
直接在HTML嵌入SVG代碼
在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代碼。
<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>
鏈接到SVG文件
<a href="circle1.svg">View SVG file</a>
五：SVG標簽的元素屬性有那幾個？
在SVG標簽中其自身所擁有的屬性就和Canvas的一樣就只有兩個屬性：width="";和height="";
六：對SVG默認形狀的一個認識？
SVG和Canvas一樣都是行內(nèi)塊級元素，默認的寬高大小都是300px ?X ?150px;
七：對SVG的圖形的認知？(SVG Shapes)
SVG有一些預定義的形狀元素，可被開發(fā)者使用和操作：
-------矩形 <rect>
-------圓形 <circle>
-------橢圓 <ellipse>
-------線 ? ? <line>
-------折線 ?<polyline>
-------多邊形 <polygon>
-------路徑 ? <path>
SVG 矩形 ---- <rect>
實例1---------- <rect>?標簽可用來創(chuàng)建矩形，以及矩形的變種 ?如下代碼顯示：
<svg width="600" hegiht="600" id="mySvg">
? ? ? ? ?<rect ? x="X軸起始坐標" ?y="Y軸起始坐標" ?rx="產(chǎn)生圓角的大小" ?ry="產(chǎn)生圓角的大小" ?width="矩形的寬度" ?height="矩形的高度" ?stroke="描邊的顏色" ?stroke-width="描邊的寬度" ?fill="填充的顏色" ? />
</svg>
SVG 圓形 ---- <circle>
實例2----------<circle>標簽可用來創(chuàng)建一個圓 ? 如下代碼顯示：
<svg ?width="600" ?height="600">
? ? ? ? <circle? cx="X軸起始坐標"? cy="Y軸起始坐標"? r="圓的半徑"? stroke="描邊的顏色"? stroke-width="描邊的寬度"? fill="填充的顏色"? />
</svg>
SVG 橢圓 ---- <ellipse>
實例3----------<ellipse>標簽可用來創(chuàng)建一個橢圓?
Tip：橢圓與圓很相似。不同之處在于橢圓有不同的x和y半徑，而圓的x和y半徑是相同的。 如下代碼顯示：
<svg ? ?width="600" ?height="600" ?id="mySvg">
? ? ? ? <ellipse? cx="X軸起始坐標"? cy="Y軸起始坐標"? rx="X軸的半徑"? ry="Y軸的半徑"? stroke="描邊的顏色"? stroke-width="描邊的寬度"? fill="填充的顏色"? />
</svg>
代碼解析：
-------CX屬性定義的橢圓中心的x坐標
-------CY屬性定義的橢圓中心的y坐標
-------RX屬性定義的水平半徑
-------RY屬性定義的垂直半徑
SVG 直線 ----- <line>
實例4 ---------- <line>?標簽可用來創(chuàng)建直線? ? 下面是SVG代碼：
<svg ?width="600" ?height="600" ? id="mySvg">
? ? ? <line ?x1="0" ?y1="0" ?x2="200" ?y2="200" ?style="stroke:rgb(255,0,0);stroke-width:2" ?/>
</svg>
代碼解析：
-------x1 屬性在 x 軸定義線條的開始
-------y1 屬性在 y 軸定義線條的開始
-------x2 屬性在 x 軸定義線條的結束
-------y2 屬性在 y 軸定義線條的結束
SVG 多邊形 --------- ?<polygon>
實例5 -------?<polygon>?標簽用來創(chuàng)建含有不少于三個邊的圖形。?
多邊形是由直線組成，其形狀是"封閉"的（所有的線條 連接起來）。如下代碼顯示：
<svg ? width="600" ? height="600" ?id="mySvg">
? ? ? ?<polygon ?points="200,10,250,190,160,210" ?style="fill:lime;stroke:purple;stroke-width:1" ?/>
</svg>
利用多邊形創(chuàng)建一個五角星
<svg ?width="600" ?height="600">
? ? ? ?<polygon points="100,10 40,180 190,60 10,60 160,180" ? style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;">
</svg>
改變 fill-rule 屬性為 "evenodd"可有另外一種效果。
代碼解析：
-------- points 屬性定義多邊形每個角的 x 和 y 坐標。
SVG 曲線 ----- <polyline>
實例6 ------- <polyline> 標簽元素是用于創(chuàng)建任何只有直線的形狀 ?如下代碼顯示：
<svg ? width="600" ?height="600">
? ? ? <polyline ? points="20,20 ?40,25 ?60,40 ?80,120 ?120.140 ?200,180" ?style="fill:none;stroke:black;stroke-width:3" />
</svg>
SVG 路徑 ------- ?<path>
實例7 -------- ?<path> ?標簽元素用于定義一個路徑。
下面的命令可用于路徑數(shù)據(jù)：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
注意：以上所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位。
<svg width="600" ?height="600">
? ? ? ?<path ?d="M150 0 ?L75 ?200 ?L225 ?200 ?Z " ?/>
</svg>
代碼解析：
上面的例子定義了一條路徑，它開始于位置150 0，到達位置75 200，然后從那里開始到225 200，最后在150 0關閉路徑。
SVG 文本 --------- <text>
實例8? ---------? <text>? 標簽元素用于定義文本。 如下代碼顯示：
<svg ? width="600" ?height="600">
? ? ? <text? x="70"? y="15"? fill="red" ? transform="rotate(30 20,40)">I? Love? You</text>
</svg>
以上就是對SVG的大概了解的概況。
