第一次來認認真真的研究了下svg圖片，之前只是在網上見過，但都是一晃而過也沒當回事，最近網站改版看到同事有用到svg格式的圖片，想想自己干了幾年的重構也沒用過，這些細節的知識是應該好好研究研究了。暫時還沒研究得完全透切，先記下目前為止所看到的吧不然又給忘了。
svg可縮放矢量圖形（Scalable Vector Graphics），顧名思義就是任意改變其大小也不會變形，是基於可擴展標記語言（XML），他嚴格遵從XML語法，並用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式，可以用記事本打開，應該更多的使用場景是手機端，因為手機分辯率差異化大。
大家常聽說的就是矢量圖和位圖兩種格式了，矢量圖像用點和線來描述物體，所以文件會比較小，同時也能提供高清晰的畫面，適合於直接打印或輸出，改變其大小圖不會變形；而位圖圖像的存儲單位是圖像上每一點的像素值，因此一般的圖像文件都很大，會占用大量的網絡帶寬。SVG是一種矢量圖形格式，GIF、JPEG，png等都是位圖，改變其尺寸大小圖像會變形或會出現馬賽克模糊等情況。有了兩者的概念后，SVG較GIF、JPEG的優勢顯而易見。
svg的優勢：
1．任意放縮。
用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。
2．文本獨立。
SVG圖像中的文字獨立於圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即使沒有安裝某一字體，也會看到和他們制作時完全相同的畫面。
3．較小文件。
總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下載也很快。
4．超強顯示效果
SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕分辨力和打印分辨力。
5．超級顏色控制。
SVG圖像提供一個1 600萬種顏色的調色板，支持ICC顏色描述文件標准、RGB、線X填充、漸變和蒙版。
6．交互X和智能化。SVG面臨的主要問題一個是如何和已經占有重要市場份額的矢量圖形格式Flash競爭的問題，另一個問題就是SVG的本地運行環境下的廠家支持程度。
自己動手實例：
1.先准備好要用到的圖片的矢量圖，再AI里拼合好一張圖后先保存一張AI格式的源文件，再導出一張svg格式的圖片（AI里有該格式）；
2.在css里的應用方法就跟CSS Sprites拼合的png格式的圖一樣，定位位置在AI里可以獲取到。
1 <ul> 2 <li class="one"></li> 3 <li class="two"></li> 4 <li class="three"></li> 5 <li class="four"></li> 6 </ul>
li{width:159px; height:66px; background:url(tubiao.svg) no-repeat;} .one{background-position:0 0;} .two{background-position:0 -72px;} .three{background-position:0 -171px;} .four{background-position:0 -270px;}
可惜的是，svg不是所有瀏覽器都能支持，目前他的支持情況：
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持內聯 SVG。
解決辦法：
1）ie8及其以下瀏覽器單獨使用png格式的圖片（推薦）；
2）Internet Explorer 8或更早版本，可通過安裝Adobe SVG Viewer以支持SVG。