一：什么是SVG垫挨？
對(duì)于SVG的定義如下：
①：SVG 指的是可伸縮矢量圖形 (Scalable Vector Graphics)。
②：SVG 用于定義用于網(wǎng)絡(luò)的基于矢量的圖形散吵。
③：SVG 使用 XML 格式定義圖形。
④：SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有損失。
⑤：SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)。
二：SVG的優(yōu)勢(shì)是什么谨读？
SVG的優(yōu)勢(shì)有如下定義：
①：SVG 圖像可通過文本編輯器來創(chuàng)建和修改。
②：SVG 圖像可被搜索坛吁、索引劳殖、腳本化或壓縮贼邓。
③：SVG 是可伸縮的。
④：SVG 圖像可在任何的分辨率下被高質(zhì)量地打印闷尿。
⑤：SVG 可在圖像質(zhì)量不下降的情況下被放大。
三：SVG與Canvas的區(qū)別在于什么地方女坑？
①：SVG 是一種使用 XML 描述 2D 圖形的語(yǔ)言填具。? ? Canvas 通過 JavaScript 來繪制 2D 圖形。
②：SVG 基于 XML匆骗，這意味著 SVG可以給每一個(gè)圖形綁定事件劳景，但是Canvas是基于JavaScript，這就意味著Canvas無法給每一個(gè)圖形綁定事件碉就。（只能給canvas整個(gè)畫布綁定事件盟广，還有一種解決方案是使用第三方庫(kù)）。
在 SVG 中瓮钥，每個(gè)被繪制的圖形均被視為對(duì)象筋量。如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形碉熄。
③：Canvas 是逐像素進(jìn)行渲染的桨武。在 canvas 中，一旦圖形被繪制完成锈津，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注呀酸。
如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制琼梆，包括任何或許已被圖形覆蓋的對(duì)象性誉。
④：兼容性不同。 SVG的兼容性更好茎杂。
SV與Canvas之間的比較：
Canvas
-------依賴分辨率
-------不支持事件處理器
-------弱的文本渲染能力
-------能夠以 .png 或 .jpg 格式保存結(jié)果圖像
-------最適合圖像密集型的游戲错览，其中的許多對(duì)象會(huì)被頻繁重繪
SVG
-------不依賴分辨率
-------支持事件處理器
-------最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）
-------復(fù)雜度高會(huì)減慢渲染速度（任何過度使用 DOM 的應(yīng)用都不快）
-------不適合游戲應(yīng)用
四：SVG在html中是怎樣使用的？
首先SVG引入到html中的方法如下：
SVG 文件可通過以下標(biāo)簽嵌入到HTML 文檔：<embed>蛉顽、<object>蝗砾、<iframe>。
使用<embed>標(biāo)簽引入 ------ <embed src="xxx.svg" type="image/svg+xml" />
①：優(yōu)勢(shì)：所有主要瀏覽器都支持携冤，并允許使用腳本悼粮。
②：缺點(diǎn)：不推薦在HTML4和XHTML中使用（但在HTML5允許）。
使用<object>標(biāo)簽引入 ------- <object data="xxx.svg" type="image/svg+xml"></object>
①：優(yōu)勢(shì)：所有主要瀏覽器都支持曾棕，并支持HTML4扣猫，XHTML和HTML5標(biāo)準(zhǔn)。
②：缺點(diǎn)：不允許使用腳本翘地。
使用<iframe>標(biāo)簽引入 ------- <iframe src="xxx.svg"></iframe>
①：優(yōu)勢(shì)：所有主要瀏覽器都支持申尤，并允許使用腳本癌幕。
②：缺點(diǎn)：不推薦在HTML4和XHTML中使用（但在HTML5允許）。
Tip:值得注意的地方是在使用單標(biāo)簽的時(shí)候<embed src="" />一定要有 ?/ ?閉合不然會(huì)報(bào)錯(cuò)Ｃ链Ｉ自丁！
SVG的代碼可以直接嵌入到HTML頁(yè)面中时鸵，或直接鏈接到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文件
可以用標(biāo)簽鏈接到一個(gè)SVG文件：鏈接到SVG文件彭雾。
<a href="circle1.svg">View SVG file</a>
五：SVG標(biāo)簽的元素屬性有那幾個(gè)碟刺？
在SVG標(biāo)簽中其自身所擁有的屬性就和Canvas的一樣就只有兩個(gè)屬性：width="";和height="";
六：對(duì)SVG默認(rèn)形狀的一個(gè)認(rèn)識(shí)？
SVG和Canvas一樣都是行內(nèi)塊級(jí)元素薯酝，默認(rèn)的寬高大小都是300px ?X ?150px;
七：對(duì)SVG的圖形的認(rèn)知半沽？(SVG Shapes)
SVG有一些預(yù)定義的形狀元素，可被開發(fā)者使用和操作：
-------矩形 <rect>
-------圓形 <circle>
-------橢圓 <ellipse>
-------線 ? ? <line>
-------折線 ?<polyline>
-------多邊形 <polygon>
-------路徑 ? <path>
SVG 矩形 ---- <rect>
實(shí)例1---------- <rect>?標(biāo)簽可用來創(chuàng)建矩形蜜托，以及矩形的變種 ?如下代碼顯示：
<svg width="600" hegiht="600" id="mySvg">
? ? ? ? ?<rect ? x="X軸起始坐標(biāo)" ?y="Y軸起始坐標(biāo)" ?rx="產(chǎn)生圓角的大小" ?ry="產(chǎn)生圓角的大小" ?width="矩形的寬度" ?height="矩形的高度" ?stroke="描邊的顏色" ?stroke-width="描邊的寬度" ?fill="填充的顏色" ? />
</svg>
SVG 圓形 ---- <circle>
實(shí)例2----------<circle>標(biāo)簽可用來創(chuàng)建一個(gè)圓 ? 如下代碼顯示：
<svg ?width="600" ?height="600">
? ? ? ? <circle? cx="X軸起始坐標(biāo)"? cy="Y軸起始坐標(biāo)"? r="圓的半徑"? stroke="描邊的顏色"? stroke-width="描邊的寬度"? fill="填充的顏色"? />
</svg>
SVG 橢圓 ---- <ellipse>
實(shí)例3----------<ellipse>標(biāo)簽可用來創(chuàng)建一個(gè)橢圓?
Tip：橢圓與圓很相似抄囚。不同之處在于橢圓有不同的x和y半徑，而圓的x和y半徑是相同的橄务。 如下代碼顯示：
<svg ? ?width="600" ?height="600" ?id="mySvg">
? ? ? ? <ellipse? cx="X軸起始坐標(biāo)"? cy="Y軸起始坐標(biāo)"? rx="X軸的半徑"? ry="Y軸的半徑"? stroke="描邊的顏色"? stroke-width="描邊的寬度"? fill="填充的顏色"? />
</svg>
代碼解析：
-------CX屬性定義的橢圓中心的x坐標(biāo)
-------CY屬性定義的橢圓中心的y坐標(biāo)
-------RX屬性定義的水平半徑
-------RY屬性定義的垂直半徑
SVG 直線 ----- <line>
實(shí)例4 ---------- <line>?標(biāo)簽可用來創(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 軸定義線條的結(jié)束
-------y2 屬性在 y 軸定義線條的結(jié)束
SVG 多邊形 --------- ?<polygon>
實(shí)例5 -------?<polygon>?標(biāo)簽用來創(chuàng)建含有不少于三個(gè)邊的圖形幔托。?
多邊形是由直線組成，其形狀是"封閉"的（所有的線條 連接起來）蜂挪。如下代碼顯示：
<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)建一個(gè)五角星
<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 屬性定義多邊形每個(gè)角的 x 和 y 坐標(biāo)。
SVG 曲線 ----- <polyline>
實(shí)例6 ------- <polyline> 標(biāo)簽元素是用于創(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>
實(shí)例7 -------- ?<path> ?標(biāo)簽元素用于定義一個(gè)路徑棠涮。
下面的命令可用于路徑數(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
注意：以上所有命令均允許小寫字母谬哀。大寫表示絕對(duì)定位，小寫表示相對(duì)定位严肪。
<svg width="600" ?height="600">
? ? ? ?<path ?d="M150 0 ?L75 ?200 ?L225 ?200 ?Z " ?/>
</svg>
代碼解析：
上面的例子定義了一條路徑史煎，它開始于位置150 0，到達(dá)位置75 200驳糯，然后從那里開始到225 200篇梭，最后在150 0關(guān)閉路徑。
SVG 文本 --------- <text>
實(shí)例8? ---------? <text>? 標(biāo)簽元素用于定義文本酝枢。 如下代碼顯示：
<svg ? width="600" ?height="600">
? ? ? <text? x="70"? y="15"? fill="red" ? transform="rotate(30 20,40)">I? Love? You</text>
</svg>
以上就是對(duì)SVG的大概了解的概況恬偷。
