該如何正確的使用SVG sprites,你真的懂了嗎

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

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

      大家都知道svg( Scalable Vector Graphics)可伸縮矢量圖形,SVG是一種採用XML 來描述二維圖形的語言,無論如何放大縮小都不會糊,而圖片當展示的尺寸大於圖片本身,就會糊了,糊了,糊了……


<div class="icon-sprite"></div>

.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就拿出來吹水,肯定是會被人噴的一臉口水的,SVG symbols/**SVG symbols**/SVG symbols **重要的事說三遍不過份吧**,這項技術基於兩個元素的使用:<symbol>和<use>

從ps或者Illustrator創建並導出SVG圖標,源碼大概是這樣的:

重點來了,那麼我們用symbols包裝後是這個樣子的:

那麼問題來了,我們直接在頁面上引用嗎?結果是否定的,什麼都不會顯示:


那麼該如何擺正姿勢,正確的使用它呢?高潮部分來了:




爲什麼圖標會顯示呢?因爲要顯示圖標,我們還需要使用<use>元素,通俗的講就是你定義了一組圖形對象(使用<symbol>元素)之後,可以使用<use>元素來對它進行無限次實例化展示。你使用xlink:href屬性來指定你想要展示哪一組圖標(相當於css圖片精靈中的background-position),這裏,我們要展示的是id爲#svg-github的<symbol>,

      大家可能還發現了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來找你,圖標不清晰的問題了啦,是不是很開心,有沒有~~

  以上就是今天的分享,寫了蠻久,最近纔在開始嘗試寫博客,新手上路中,如果文章中有不對之處,煩請各位大神斧正。如果你覺得這篇文章對你有所幫助,請記得點贊哦~,更多內容可關注我的公衆號(^_^)


作者:蘇南 - 首席填坑官

鏈接:https://honeybadger8.github.io/blog/

交流羣:912594095,公衆號:honeyBadger8

本文原創,著作權歸作者所有。商業轉載請聯繫`@IT·平頭哥聯盟`獲得授權,非商業轉載請註明原鏈接及出處。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章