❶ SVG的SVG比較優勢
首先簡要解釋一下矢量圖像格式和點陣圖圖像格式的區別。矢量圖像用點和線來描述物體，所以文件會比較小，同時也能提供高清晰的畫面，適合於直接列印或輸出。而點陣圖圖像的存儲單位是圖像上每一點的像素值，因此一般的圖像文件都很大，會佔用大量的網路帶寬。SVG是一種矢量圖形格式，GIF、JPEG是光柵文件格式。有了兩者的概念後，SVG較GIF、JPEG的優勢顯而易見。
1．任意放縮。
用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。
2．文本獨立。
SVG圖像中的文字獨立於圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即使沒有安裝某一字體，也會看到和他們製作時完全相同的畫面。
3．較小文件。
總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下載也很快。
4．超強顯示效果
SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕解析度和列印解析度。
5．超級顏色控制。
SVG圖像提供一個1 600萬種顏色的調色板，支持ICC顏色描述文件標准、RGB、線X填充、漸變和蒙版。
6．交互X和智能化。SVG面臨的主要問題一個是如何和已經佔有重要市場份額的矢量圖形格式Flash競爭的問題，另一個問題就是SVG的本地運行環境下的廠家支持程度。
❷ SVG圖像在解析度上有什麼優勢
矢量圖像利用點和線等矢量化的數據描述圖像，並在圖形中包含色彩和位置信息。其最大的優點就是圖像的任意縮放對解析度沒有影響，或者說，在矢量圖中解析度的概念是模糊的。並且，矢量圖在顯示和輸出等過程中，與設備的解析度沒有關系。SVG作為矢量圖像格式，除具有矢量圖的優勢外，對點陣圖圖像也能加以正確表達。SVG是基於xml創建的xml是w3c制定的網路開發語言，它的功能遠遠超過現行的html語言。xml語言具有比html語言更好的管理和交互功能。xml將網站的內容和框架完全分離，通過定義結構數據類型，網站用戶能夠自主的利用客戶端程序顯示和處理數據，具備很好的擴展能力。SVG的語法和結構基於xml，因此同樣具備很好的擴展性。
❸ svg是什麼
什麼是SVG,
SVG的特點,
SVG較G
I
F、JPEG的優勢
一、什麼是SVG?
S
V
G(可放縮的矢量圖形)是W3C(World
Wide
Web
ConSor—tium國際互聯網標准組織)在2000年8月制定的一種新的二維矢量圖形格式，也是規范中的網路矢量圖形標准。W3C是作為一個國際X的工業聯盟而創建的，
目的是領導整個互聯網協作的發展和創新，
以實現科技的進步和共同發展。由於W3C聯盟關於SVG的開發工作組的成員都是一些知名廠商，
如Adobe、蘋果、Aut0De
sk、Bit
Fla
sh、Corel、惠普、IBM、ILOG、INSO、Macromedia、微軟、Netscape、OASIS、Open
Text、Quark、RAL(C
C
LRC)、S
un、V
i
S
i
0、施樂等，所以SVG不是一個私有格式，而是一個開放的標准。也就是說，它並不屬於任何個體的專利，而是一個通過協作、共同開發的工業標准。正是因為這點，才使得SVG能夠得到更迅速的開發和應用。
二、SVG的特點
1．基於XML
為了保證網路圖像能夠順利地和目前已經由W3C開發的D0M1，DOM2，CSS，XML，XPointer，XSLT，XSL，SMIL，HTML，XHTML技術，以及其他標准化技術，如ICC，URI，UNICODE，RGB，ECMAScr
ipt／JavaScript，Java協調一致，SVG是完全基於x
M
L(E
X
t
e
n
s
i
b
l
eMarkup
Language可擴展置標語言)，
並能和上述各項技術相融會的新一代的網路圖像格式。SVG並非僅僅是一種圖像格式，
由於它是一種基於XML的語言，也就意味著它繼承了XML的跨平台X和可擴展X，從而在圖形可重用X上邁出了一大步。如SVG可以內嵌於其他的XML文檔中，而SVG文檔中也可以嵌入其他的XML內容，各個不同的SVG圖形可以方便地組合，
構成新的SVG圖形。
2．採用文本來描述對象
SVG包括3種類型的對象：
矢量圖形(包括直線、曲線在內的圖形邊)、點陣圖像和文本。各種圖像對象能夠組合、變換，並且修改其樣式，也能夠定義成預處理對象。
與傳統的圖像格式不同的是，svG採用文本來描述矢量化的圖形，這使得svG圖像文件可以像HT札網頁一樣有著很好的可讀X。當用戶用圖像工具輸出svG後，可以用任何文字處理工具打開SVG圖像，並可看到用來描述圖像的文本代碼。掌握了svG語法的人甚至可以只用一個記事本便可以讀出圖像中的內容來。
svG文件中的文字雖然在顯示時可呈現出各種圖像化的修飾效果，但卻仍然是以文本的形式存在的，可以選擇復制、粘貼。由於SVG內的文字都以文本的形式出現在XML文件中，
這些信息可以為搜索引擎所用，而以往搜索引擎通常無法搜索到寫在點陣圖像中的文字。這些文本信息還可以幫助視力有殘疾而無法看到圖形的人，可以通過其他方式(如聲音)來傳送這些信息。
3．具有交互X和動態X
由於網路是動態的媒體，SVG要成為網路圖像格式，必須要具有動態的特徵，這也是區別於其它圖像格式的一個重要特徵。SVG是基於XML的，它提供無可匹敵的動態交互X。你可以在svG文件中嵌入動畫元素(如運動路徑、漸現或漸隱效果、生長的物體、收縮、快速旋轉、改變顏色等)，或通過腳本定義來達到高亮顯示、聲音、動畫等效果。
4．完全支持DOM
D0M(Document
Object
Model文檔物件模型)是一種文檔平台，它允許程序或腳本動態的存儲和上傳文件的內容、結構或樣式。由於SVG完全支持DOM，
因而SVG文檔可以通過一致的介面規范與外界的程序打交道。SVG以及SVG中的物件元素完全可以通過腳本語言接受外部事件的驅動，例如滑鼠動作，實現自身或對其他物件、圖像的控制等。這也是電子文檔應具備的優秀特X之一。
三、SVG較G
I
F、JPEG的優勢
首先簡要解釋一下矢量圖像格式和點陣圖圖像格式的區別。矢量圖像用點和線來描述物體，所以文件會比較小，同時也能提供高清晰的畫面，適合於直接列印或輸出。而點陣圖圖像的存儲單位是圖像上每一點的像素值，因此一般的圖像文件都很大，會佔用大量的網路帶寬。SVG是一種矢量圖形格式，GIF、3PEG是點陣圖圖像格式。有了兩者的概念後，SVG較GIF、JPEG的優勢顯而易見。
1．任意放縮。
用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。
2．文本獨立。
SVG圖像中的文字獨立於圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即使沒有安裝某一字體，也會看到和他們製作時完全相同的畫面。
3．較小文件。
總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下載也很快。
4．超強顯示效果
SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕分辨力和列印分辨力。
5．超級顏色控制。
SVG圖像提供一個1
600萬種顏色的調色板，支持ICC顏色描述文件標准、RGB、線X填充、漸變和蒙版。
6．交互X和智能化。
由於SVG是基於XML的，
因而能製作出空前強大的動態交互圖像。即SVG圖像能對用戶動作做出不同響應，
例如高亮、聲效、特效、動畫等。
❹ SVG有什麼優越性和技術難點、熱點
首先，它具有雙極性動態補償功能（瞬間切換到補償容性和感性，響應時間1ms）。SVG並入電網後，對電網的影響很小，不容易產生諧振。
第二就是SVG相對去傳統的電容補償，在諧波很大的時候電容補償對電容器的壽命影響很大，這樣就電容器經常更換就不經濟了，而SVG是有源設備，相當於一個電流源，所以影響不大。
最後，現在正出去更新換代的時期，SVG和SVC（TSC，TCR）等將取代傳統的電容補償。它的技術難點：無功電流的檢測和跟蹤的演算法，以及PWM分配問題控制IGBT，最後就是是IGBT的散熱問題。
熱點：現在就是在抄概念，SVG當然有它的優勢，但是價格和成本問題是每個用戶所關心的。
❺ svg是什麼格式
SVG是一種圖形文件格式，它的英文全稱為Scalable Vector Graphics，意思為可縮放的矢量圖形。它是基於XML，由World Wide Web Consortium（W3C）聯盟進行開發的。
嚴格來說應該是一種開放標準的矢量圖形語言，可讓你設計激動人心的、高解析度的Web圖形頁面。用戶可以直接用代碼來描繪圖像，可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能，並可以隨時插入到HTML中通過瀏覽器來觀看。
SVG的優勢在於：
1、SVG可被非常多的工具讀取和修改（比如記事本）。
2、SVG與JPEG和GIF圖像比起來，尺寸更小，且可壓縮性更強。
3、SVG是可伸縮的。
4、SVG圖像可在任何的解析度下被高質量地列印。
5、SVG可在圖像質量不下降的情況下被放大。
6、SVG圖像中的文本是可選的，同時也是可搜索的（很適合製作地圖）。
7、SVG可以與JavaScript技術一起運行。
❻ Svg 前端實踐總結
本文是學習和使用svg的一些總結，不介紹svg作圖的方法。
svg標簽元素參考： MDN - svg
結構化標簽也可參考： SVG中的結構化、分組和引用元素
svg的icon方案，參考： 騰訊干貨！超實用的高清圖標SVG解決方案全總結（下）
svg與普通html元素不同，需要指定命名空間，所以使用 createElement() 、 appendChilde() 抑或JQ的 append() 方法添加到dom上的svg元素是無法正常顯示的。需要用到 createElementNS(ns,'svg') ，另外有些svg標簽也需要單獨的命名空間，例如a標簽。為了避免每次添加這么長的命名空間，使用時可以簡單包裝下( NS_SVG 、 NS_XLINK 分別為svg和a標簽命名空間)：
SVG如果是嵌套在HTML中的話，即使用svg標簽，會和其他dom元素共用一個document對象，因此可以直接通過該對象來獲取到SVG元素對象；如果使用object、embed、iframe標簽來引入svg,則其中的內容會有自己document對象，此時的操作需要藉助 getSVGDocument() 方法：
對於object、iframe來引入的svg對象，還可以使用 contentDocumnet 屬性來獲取。當然，contentDocument不是專為svg設計的，同時可以獲取其他內嵌xml、html對象。
操作的前提需要滿足 同源策略(Same-origin policy) ，跨域將無法獲取document對象。
平移和縮放表面看起來很簡單，svg的平移縮放機制也不復雜，但是dom元素往往不固定寬度，應用場景也多變。例如有時候我們希望隨瀏覽器響應，svg按照比例自動縮放；有時候我們希望為svg添加手動縮放功能或者手動拖拽平移功能（類似於網路地圖的縮放平移機制）。
關於svg的viewBox相關知識，張鑫旭有篇文章講的很詳細： 理解SVG viewport,viewBox,preserveAspectRatio縮放 。這里談談在具體的應用場景中如何利用這些屬性。
❼ 什麼是SVG和SVG常用的形狀
什麼是SVG？
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用於網路的基於矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失
SVG 是萬維網聯盟的標准
SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體
與其他圖像格式相比，使用 SVG 的優勢在於：
SVG 可被非常多的工具讀取和修改（比如記事本）
SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
SVG 是可伸縮的
SVG 圖像可在任何的解析度下被高質量地列印
SVG 可在圖像質量不下降的情況下被放大
SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製作地圖）
SVG 可以與 Java 技術一起運行
SVG 是開放的標准
SVG 文件是純粹的 XML
代碼結構
[html] view plain print?
<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>
SVG提供的預定義形狀元素的使用和操作：
<rect>標簽可用來創建矩形，以及矩形的變種
<rect
x="20" y="20" rx="20" ry="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
代碼解釋：
1)rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
2)style 屬性用來定義 CSS 屬性
3)CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值）
4)CSS 的 stroke-width 屬性定義矩形邊框的寬度
5)CSS 的 stroke 屬性定義矩形邊框的顏色
6)x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器窗口左側的距離是 0px）
7)y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
8)CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的范圍是：0 - 1）
9)CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度（合法的范圍是：0 - 1)
10)rx 和 ry 屬性可使矩形產生圓角。
<circle> 標簽可用來創建一個圓
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
代碼解釋：
1)cx 和 cy 屬性定義圓點的 x 和 y 坐標。如果省略 cx 和 cy，圓的中心會被設置為 (0, 0)
2)r 屬性定義圓的半徑。
<ellipse> 標簽可用來創建橢圓
<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>
代碼解釋：
1)cx 屬性定義圓點的 x 坐標
2)cy 屬性定義圓點的 y 坐標
3)rx 屬性定義水平半徑
4)ry 屬性定義垂直半徑
<line> 標簽用來創建線條。
<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
代碼解釋：
1)x1 屬性在 x 軸定義線條的開始
2)y1 屬性在 y 軸定義線條的開始
3)x2 屬性在 x 軸定義線條的結束
4)y2 屬性在 y 軸定義線條的結束
<polygon> 標簽用來創建含有不少於三個邊的圖形
<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>
代碼解釋：
1)points 屬性定義多邊形每個角的 x 和 y 坐標
<polyline> 標簽用來創建僅包含直線的形狀
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
代碼解釋：
1)points 屬性定義每段線的每個角的 x 和 y 坐標
<path> 標簽用來定義路徑
<path d="M250 150 L150 350 L350 350 Z" />
下面的命令可用於路徑數據：
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 濾鏡 可用的濾鏡有：
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight
Gaussian Blur高斯模糊
<filter> 標簽用來定義 SVG 濾鏡。<filter> 標簽使用必需的 id 屬性來定義向圖形應用哪個濾鏡？
<filter> 標簽必須嵌套在 <defs> 標簽內。<defs> 標簽是 definitions 的縮寫，它允許對諸如濾鏡等特殊元素進行定義。
<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)"/>
代碼解釋：
1)<filter> 標簽的 id 屬性可為濾鏡定義一個唯一的名稱（同一濾鏡可被文檔中的多個元素使用）
2)filter:url 屬性用來把元素鏈接到濾鏡。當鏈接濾鏡 id 時，必須使用 # 字元
3)濾鏡效果是通過 <feGaussianBlur> 標簽進行定義的。fe 後綴可用於所有的濾鏡
4)<feGaussianBlur> 標簽的 stdDeviation 屬性可定義模糊的程度
5)in="SourceGraphic" 這個部分定義了由整個圖像創建效果
<linearGradient> 可用來定義 SVG 的線性漸變
<linearGradient> 標簽必須嵌套在 <defs> 的內部。<defs> 標簽是 definitions 的縮寫，它可對諸如漸變之類的特殊元素進行定義。
線性漸變可被定義為水平、垂直或角形的漸變：
1)當 y1 和 y2 相等，而 x1 和 x2 不同時，可創建水平漸變
2)當 x1 和 x2 相等，而 y1 和 y2 不同時，可創建垂直漸變
3)當 x1 和 x2 不同，且 y1 和 y2 不同時，可創建角形漸變
<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)"/>
代碼解釋：
1)<linearGradient> 標簽的 id 屬性可為漸變定義一個唯一的名稱
2)fill:url(#orange_red) 屬性把 ellipse 元素鏈接到此漸變
3)<linearGradient> 標簽的 x1、x2、y1、y2 屬性可定義漸變的開始和結束位置
4)漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個 <stop> 標簽來規定。offset 屬性用來定義漸變的開始和結束位置。
<radialGradient> 用來定義放射性漸變
<radialGradient> 標簽必須嵌套在 <defs> 中。<defs> 標簽是 definitions 的縮寫，它允許對諸如漸變等特殊元素進行定義。
<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)"/>
代碼解釋：
1)<radialGradient>
標簽的 id 屬性可為漸變定義一個唯一的名稱，fill:url(#grey_blue) 屬性把 ellipse 元素鏈接到此漸變，cx、cy 和
r 屬性定義外圈，而 fx 和 fy 定義內圈 漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個 <stop>
標簽來規定。offset 屬性用來定義漸變的開始和結束位置。
在svg中提供了如g元素這樣的將多個元素組織在一起的元素。由g元素編組在一起的可以設置相同的顏色，可以進行坐標變換
[html] view plain print?
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<g fill="dodgerblue">
<rect x="10" y="10" width="40" height="40" ry="10" />
<rect x="80" y="80" width="40" height="40" ry="10" />
<rect x="150" y="150" width="40" height="40" ry="10" />
</g>
</svg>
❽ SVG格式的優勢
在 2003 年一月，SVG 1.1 被確立為 W3C 標准。
參與定義 SVG 的組織有：太陽微系統、Adobe、蘋果公司、IBM 以及柯達。
與其他圖像格式相比，使用 SVG 的優勢在於：
●SVG 可被非常多的工具讀取和修改（比如記事本）
●SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
●SVG 是可伸縮的
●SVG 圖像可在任何的解析度下被高質量地列印
●SVG 可在圖像質量不下降的情況下被放大
●SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製作地圖）
●SVG 可以與 Java 技術一起運行
●SVG 是開放的標准
●SVG 文件是純粹的 XML
SVG 的主要競爭者是 Flash。
與 Flash 相比，SVG 最大的優勢是與其他標准（比如 XSL 和 DOM）相兼容。而 Flash 則是未開源的私有技術。
目前，不是所有的瀏覽器都支持 SVG，這也是 SVG 普及的最大障礙。Mozilla、Firefox 和 Opera 都支持 SVG，而微軟也計劃這么做。在微軟發布的Internet Explorer 9 中已經提供了對SVG 格式的支持。
SVG編輯器的數量正在增長，Adobe GoLive 5 也支持 SVG。
❾ 前端開發中，有哪些可以展現圖標的方案
前端開發中,常見的圖標展現方案
1. 最簡單的還是圖片，圖片
這個方案是使用最廣的方案，簡單有效。jQuery UI使用的就是這樣的方案。jQuery UI是把所有需要用到的小圖標放置在一張大的sprite圖片中。
2. 使用Web Fonts
通過Web Font技術來構建小圖標是目前使用最廣泛的代替普通圖片的方案。
3. 使用SVG
SVG是一種基於XML的圖形格式。這是一種可縮放的矢量圖形。SVG是由W3C制定的標准，在2003年成為了W3C的推薦標准。相比較其他的圖像格式，SVG的優勢在於：SVG可以被很多工具讀取和修改、SVG的尺寸更小、SVG圖像在任何的解析度下都可以高質量地列印。
4. 純CSS生成圖標
隨著CSS的不斷發展，使用CSS不僅僅可以產生一些四四方方的線框效果，同時可以產生一些曲線和傾斜效果。
以上就是我們在網頁中常見的圖標構建技術。在實際的使用中需要結合瀏覽器兼容來選擇合適的方案。
❿ SVG適合做UI組件嗎為什麼不適合
1、首先IE8不兼容
2、其次SVG但用來做布局，做疊層並不合適，UI界面一般比較規整，控制項可枚舉
3、SVG與HTML比並沒有優勢，最後SVG適合繪圖.