你知道SVG Sprites是什么嗎，還在用css sprite就太low了

fevin 發布于2019-08-30 15:54 / 2619人閱讀

摘要：它是基于，由聯盟進行開發的。是一種采用來描述二維圖形的語言這個大家都知道，那么元素是什么呢單純翻譯的話，是符號的意思，然我的理解是元素用來定義一個圖形模板對象，它可以用一個元素實例化。

　　大家好，這里是@IT·平頭哥聯盟，我是首席填坑官——蘇南(South·Su)，今天要給大家分享的是SVG Sprites(也叫雪碧圖)，所謂雪碧圖，當然就不是我們常喝的雪碧飲料（Sprites）哦，哈哈～

　　當下流程的移動端，手機型號太多太多，今天工作項目中突然發現還有同事在使用以前大家曾經包括現在還很熟悉的CSS 圖片精靈，被我們的測試MM找來說圖片在iphone6、iphone plus、iphone x等大屏的手機全糊了，當時我就懵逼了，我說怎么會呢，后面一看，果然如此啊，看了下代碼，原來是用的圖片，我說為什么不用svg呢？？然后同事說一個一個的圖標好麻煩，我說可以用svg sprite啊，～～＞﹏＜，這個時候輪到同事一臉懵逼了……，所以想著可能是不是同樣還有很多同學也不知道SVG symbols呢，那么這就給大家分享一下：

SVG英文全稱為( Scalable Vector Graphics)，意思為可縮放的矢量圖形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）聯盟進行開發的。嚴格來說應該是一種開放標準的矢量圖形語言，可讓你設計激動人心的、高分辨率的Web圖形頁面。SVG是一種采用XML來描述二維圖形的語言這個大家都知道，那么symbol元素是什么呢？單純翻譯的話，是“符號”的意思，然我的理解是symbol元素用來定義一個圖形模板對象，它可以用一個元素實例化。symbol元素對圖形的作用是在同一文檔中多次使用，添加結構和語義，SVG是無論如何放大縮小都不會糊，而圖片當展示的尺寸大于圖片本身，就會糊了，糊了，糊了……

.icon-sprite {
    width: 45px;
    height: 45px;
    background-image: url(https://github.com/meibin08/img/sprite_icon.png);
    background-size: 100px 350px;
    background-position: 0 -60px;//**重點在于它**
    background-repeat: no-repeat;
}

　　在以前我們為了性能優化，多圖標合在一張圖上面，然后再使用css的 background-position，來定位，
好處是減少了頁面的加載，要命的問題是定位遇到兼容問題，1px.5px偏差時，搞的你死去活來，后來移動端更是不清晰，被人罵了又罵。

　　當后來有一天，在一個月黑風高、暴雨傾盆、雷電交加的夜晚，我獨自一人漫步在一片小樹林里，后來我發現了新大陸————SVG，當然如果僅僅svg就我也就不會拿出來吹水，因為肯定是會被人噴的一臉口水的，但是如果再加上它的小弟——symbols？ SVG symbols、SVG symbols、SVG symbols 重要的事說三遍不過份吧，雙重組合（屠龍、倚天）試問天下誰敢它爭鋒？特別是SVG它還下面還有很多小弟哦～，……有點扯遠了；這項技術基于兩個元素的使用：和

從ps或者Illustrator創建并導出SVG圖標，源碼大概是這樣的：

重點來了，那么我們用symbols包裝后是這個樣子的：

那么問題來了，我們直接在頁面上引用嗎？結果是否定的，什么都不會顯示：

那么該如何擺正姿勢，正確的使用它呢？高潮部分來了：


        
        1、使用方式一
        
        2、使用方式二，外鏈式引入

為什么圖標會顯示呢？因為要顯示圖標，我們還需要使用元素，
通俗的講就是你定義了一組圖形對象（使用元素）之后，可以使用元素來對它進行無限次實例化展示。你使用xlink:href屬性來指定你想要展示哪一組圖標（相當于css圖片精靈中的background-position），這里，我們要展示的是id為#svg-github的，

大家可能還發現了style="display:none",你可以把它理解為是css sprite里的圖片base64轉化后的文件，而方法二里的xlink:href="./icon.svg#svg-github"，可以理解為是css sprite里我們background-image 引入圖片一樣，而 #svg-github 就是background-position里的坐標，
還有顏色的改變，我們可以直接在svg內的 path上寫行內式 fill="#06c"、style="fill:#06c";都是可以的，在維護上，是不是比圖片更加方便呢？？？

當然啦，大家都懂的，越漂亮的妹子追的人越多啦，代碼也一樣，越好用的東西往往也是不可能那么完美啦，看到這里，是不是覺得想罵娘呢？白看你說這么多廢話，最后不能用，坑爹……
別慌，其實也沒有那么糟糕啦，SVG只在IE9以上支持；所以如果你需要支持IE8及以下的瀏覽器，你需要另外再寫一套降級（例如，使用png圖片方案），隨著科技的發展，IE9以上大多數人還是能接受啦，特別是手機端的用戶，再也不用擔心測試MM來找你，圖標不清晰的問題了啦，是不是很開心，有沒有～～

總結：
svg sprites相比css sprites，不管是在維護和開發的過程中，還是在用戶體驗、性能、項目迭代代碼維護上都比css sprites方便，更高效便捷;

svg sprites優缺點：

svg sprites使用xlink:href #id的方式獲取，便于維護和擴展，因為小圖的id不會隨便改動;

方便改變圖片顏色，通過設置fill:顏色值，隨意改變小圖顏色;

IE9以上支持。

css sprites優缺點：

css sprites使用background-position不便于維護和擴展、定位不精確等問題，例如：在后期項目迭代中我們需要刪除其中一個小圖，那么排在它后面的小圖位置都要移動，需要再次修改csss樣式，或每次都要打開PS刪除某圖標再導出;

無法修改小圖顏色，要UI設計師調整后替換，過程漫長效率低;

在移動端的大屏手機圖標會模糊，影響體驗。

　　以上就是今天的分享，寫了蠻久，最近才在開始嘗試寫博客，新手上路中，如果文章中有不對之處，煩請各位大神斧正。如果你覺得這篇文章對你有所幫助，請記得點贊哦～，如覺得不錯，記得關注我們的公眾號哦！！

更多文章：

做完小程序項目、老板給我加了6k薪資～
面試踩過的坑，都在這里了～
你應該做的前端性能優化之總結大全！
手把手教你如何繪制一輛會跑車
如何用CSS3畫出懂你的3D魔方？
immutability因React官方出鏡之使用總結分享！

作者：蘇南 - 首席填坑官
交流群：912594095，公眾號：honeyBadger8
本文原創，著作權歸作者所有。商業轉載請聯系@IT·平頭哥聯盟獲得授權，非商業轉載請注明原鏈接及出處。

云服務器 GPU云服務器 -sprites Sprites 百度一下你就知道了 svg-sprite-loader

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116962.html

淺探前端圖片優化

摘要：性能優化是前端開發必不可少的一環，而圖片優化又是性能優化中必不可少的一環，但不知道有多少開發者在網頁的開發過程中會注意圖片的使用，圖片使用不當可能會導致網頁加載卡頓網頁加載速度慢等問題，這篇文章將會將我以往對圖片的處理做個總結。性能優化是前端開發必不可少的一環，而圖片優化又是性能優化中必不可少的一環，但不知道有多少開發者在網頁的開發過程中會注意圖片的使用，圖片使用不當可能會導致網頁加...

CocoaChina 2019-08-30 15:54 評論0 收藏0
淺探前端圖片優化

摘要：性能優化是前端開發必不可少的一環，而圖片優化又是性能優化中必不可少的一環，但不知道有多少開發者在網頁的開發過程中會注意圖片的使用，圖片使用不當可能會導致網頁加載卡頓網頁加載速度慢等問題，這篇文章將會將我以往對圖片的處理做個總結。性能優化是前端開發必不可少的一環，而圖片優化又是性能優化中必不可少的一環，但不知道有多少開發者在網頁的開發過程中會注意圖片的使用，圖片使用不當可能會導致網頁加...

X1nFLY 2019-08-23 14:14 評論0 收藏0
前端硬核面試專題之 CSS 55 問

摘要：前言本文講解道前端面試的的內容。文章原文地址前端硬核面試專題之問。前端硬核面試專題的完整版在此前端硬核面試專題，包含數據結構與算法。 showImg(https://segmentfault.com/img/bVbv2GE?w=900&h=400); 前言本文講解 55 道前端面試的 CSS 的內容。復習前端面試的知識，是為了鞏固前端的基礎知識，最重要的還是平時的積累！注意：文章...

崔曉明 2019-08-30 15:44 評論0 收藏0
前端面試筆記 - css

摘要：是頁面渲染的一部分。一個就是一個整體，所有子元素都會在里面渲染，而不會影響外面的元素。常見為，根元素，，元素，或者設置了的元素列舉不同的清除浮動的技巧，并指出它們各自適用的使用場景。是一個把眾多小圖片打包成一個大圖以減少請求。 CSS 中類 (classes) 和 ID 的區別。 id唯一，class可以多個請問 resetting 和 normalizing CSS 之間的區別？你...

loonggg 2019-08-23 14:50 評論0 收藏0