圖形圖標(biāo)幾乎是每個(gè)網(wǎng)站或應(yīng)用程序的重要組成部分。雖然圖標(biāo)的大小通常很小狱从，但為web圖標(biāo)選擇格式并非易事膨蛮。除了標(biāo)準(zhǔn)的圖像格式，Web開發(fā)人員還有兩個(gè)主要選項(xiàng)：SVG或圖標(biāo)字體季研。你應(yīng)該使用哪一個(gè)敞葛？讓我們看看這兩種格式在性能，靈活性和可訪問(wèn)性方面的比較与涡。

Web圖標(biāo)的演變

在CSS之前的時(shí)間惹谐，網(wǎng)絡(luò)圖標(biāo)必須是圖像。由于圖像文件很大驼卖，因此Web開發(fā)人員一直試圖找到顯示小圖標(biāo)的替代方法氨肌。例如，CSS精靈允許開發(fā)人員將所有圖標(biāo)保存在單個(gè)圖像文件中酌畜，但是由于圖標(biāo)字體在2012年左右到達(dá)現(xiàn)場(chǎng)怎囚，因此可訪問(wèn)性問(wèn)題導(dǎo)致它們不再受歡迎。但是桥胞，最近桩了，開發(fā)人員正在轉(zhuǎn)向使用可擴(kuò)展的矢量圖形或SVG，用于其Web圖標(biāo)埠戳。

什么是圖標(biāo)字體？

圖標(biāo)字體是可以使用CSS修改的文本文件蕉扮。因此整胃，它們比光柵圖像更好地縮放，因此更改圖標(biāo)字體的大小不會(huì)降低其視覺質(zhì)量喳钟。更改顏色或添加陰影就像編輯文本一樣簡(jiǎn)單屁使。您可以輕松找到要在您的網(wǎng)站上使用的免費(fèi)圖標(biāo)字體，或者您可以自己設(shè)計(jì)奔则。使用圖標(biāo)字體的一個(gè)缺點(diǎn)是蛮寂，大多數(shù)字體集包含您可能不會(huì)使用的圖標(biāo)，因此它們只占用空間易茬。

就像之前的CSS精靈一樣酬蹋，圖標(biāo)字體開始不受開發(fā)人員的青睞及老。正確顯示圖標(biāo)字體通常需要瀏覽器向服務(wù)器發(fā)出額外請(qǐng)求，這可能導(dǎo)致在圖標(biāo)仍在加載時(shí)圖標(biāo)上出現(xiàn)FOIT或隱藏文本的閃爍范抓。如果瀏覽器無(wú)法解釋字體骄恶，則用戶只會(huì)看到空字符。由于這些場(chǎng)景對(duì)于專業(yè)網(wǎng)站來(lái)說(shuō)是不可接受的匕垫，因此更多的開發(fā)人員現(xiàn)在轉(zhuǎn)向使用SVG僧鲁。

什么是SVG？

SVG（可縮放矢量圖形）允許矢量圖形顯示在瀏覽器中象泵。SVG正在迅速成為網(wǎng)絡(luò)圖標(biāo)和動(dòng)畫的新標(biāo)準(zhǔn)寞秃。它們不僅提供出色的縮放，而且它們通常比圖標(biāo)字體更快速偶惠，更可靠地呈現(xiàn)春寿。由于矢量圖形完全由代碼組成，因此不必從大型外部文件導(dǎo)入它們洲鸠。它們的尺寸也比典型的JPG或PNG以及大多數(shù)圖標(biāo)字體庫(kù)小得多堂淡。

充分利用您的SVG可能需要克服一點(diǎn)學(xué)習(xí)曲線，但獎(jiǎng)勵(lì)非常值得付出努力扒腕。

SVG如何工作

可以<img>在HTML中的常規(guī)元素中使用SVG绢淀，使用width和height屬性來(lái)調(diào)整尺寸。但是瘾腰，此方法在某種程度上限制了您自定義SVG的能力皆的。

如果您希望能夠直接從HTML中進(jìn)一??步自定義SVG圖標(biāo)，則只需將代碼直接粘貼到HTML文檔中即可內(nèi)聯(lián)SVG蹋盆。然后费薄，您可以通過(guò)使用CSS定位來(lái)更改顏色或應(yīng)用過(guò)濾器。以下是SVG圖標(biāo)的示例：

上面的代碼受Mozilla的啟發(fā)栖雾，在瀏覽器中顯示如下圖形：

雖然SVG代碼乍一看似乎令人生畏楞抡，但設(shè)計(jì)和控制SVG圖標(biāo)看似簡(jiǎn)單易行。實(shí)際上析藕，您可以使用Adobe Illustrator之類的程序來(lái)創(chuàng)建自己的矢量圖形以用作圖標(biāo)召廷。只需將它們保存為SVG文件，或者您可以在Illustrator界面中生成代碼账胧。您還可以將Google文檔中的繪圖導(dǎo)出為SVG文件竞慢。

圖標(biāo)字體仍然有用嗎？

圖標(biāo)字體遠(yuǎn)未過(guò)時(shí)治泥。雖然它們并不總是最有效也是最可靠的選項(xiàng)筹煮，但圖標(biāo)字體仍然相對(duì)簡(jiǎn)單且易于實(shí)現(xiàn)，因此許多開發(fā)人員繼續(xù)使用它們居夹。根據(jù)使用的圖標(biāo)數(shù)量败潦，在舊項(xiàng)目中為SVG切換圖標(biāo)字體可能不值得本冲。然而，SVG是未來(lái)的權(quán)威方式变屁，因此您可以放心使用它們眼俊。

比較SVG與圖標(biāo)字體

為了幫助您確定選擇哪種圖標(biāo)格式，讓我們看看兩個(gè)選項(xiàng)在不同部門中的比較方式粟关。

1.尺寸

如果您選擇內(nèi)嵌SVG以添加樣式疮胖，它們可以快速增加大小，并且代碼可能變得非常麻煩闷板。值得注意的是澎灸，內(nèi)聯(lián)SVG代碼不會(huì)被用戶的瀏覽器緩存。另一方面遮晚，可以緩存外部SVG文件性昭。如果單個(gè)頁(yè)面上有很多圖標(biāo)，那么圖標(biāo)字體可以提供比內(nèi)聯(lián)SVG更流暢的用戶體驗(yàn)县遣。當(dāng)然糜颠，如果您使用預(yù)制的圖標(biāo)字體集，那么您可能會(huì)在未使用的圖標(biāo)上浪費(fèi)資源萧求。

值得注意的是其兴，10個(gè)優(yōu)化的SVG圖標(biāo)可能比整個(gè)圖標(biāo)庫(kù)小得多。但是夸政，如果您只使用所需的圖標(biāo)創(chuàng)建自己的自定義圖標(biāo)庫(kù)元旬，則圖標(biāo)庫(kù)字體最終會(huì)變小。

2.表現(xiàn)

可以緩存圖標(biāo)字體守问，從而使它們直接從瀏覽器加載更快匀归。但是，它的缺點(diǎn)是它們會(huì)創(chuàng)建一個(gè)額外的HTTP請(qǐng)求耗帕。另一方面穆端，如果您正在內(nèi)聯(lián)SVG圖標(biāo)，則不需要其他HTTP請(qǐng)求仿便，但瀏覽器無(wú)法緩存這些請(qǐng)求徙赢。

但是，您可以將SVG文件包含在外部文件中探越，從而使它們可以通過(guò)瀏覽器進(jìn)行緩存。同樣窑业，在性能方面钦幔，速度的差異將取決于您的圖標(biāo)字體/ SVG的大小。嘗試使用兩者運(yùn)行性能測(cè)試以確定哪一個(gè)加載更快常柄。

3.靈活性

兩種格式都可以使用CSS進(jìn)行樣式設(shè)置鲤氢，但內(nèi)聯(lián)SVG可以為您提供更多選項(xiàng)搀擂，例如字形筆劃和多色圖標(biāo)。你甚至可以有動(dòng)畫的網(wǎng)頁(yè)圖標(biāo)卷玉。

4.瀏覽器支持

無(wú)論您為圖標(biāo)選擇哪種格式哨颂，都可能需要執(zhí)行一些額外步驟才能使它們與舊版瀏覽器兼容。由于它們已經(jīng)存在更長(zhǎng)時(shí)間相种，因此圖標(biāo)字體得到了更廣泛的支持威恼。使用IE 6或更高版本（可能包括所有人）的任何人都應(yīng)該能夠看到您的圖標(biāo)字體。如果您使用SVG寝并，那么您可能希望包含JS polyfill以支持使用IE 8或更低版本的那些箫措。

但是，在2018年衬潦，由于大多數(shù)用戶已經(jīng)遠(yuǎn)離舊版瀏覽器版本斤蔓，無(wú)論您選擇圖標(biāo)字體還是SVG，這都不應(yīng)該是一個(gè)問(wèn)題镀岛。在SVG圖標(biāo)和現(xiàn)代瀏覽器方面唯一缺乏支持來(lái)自IE和Edge弦牡，它們無(wú)法正確擴(kuò)展SVG文件（建議使用高度，寬度等規(guī)則）漂羊。

5.可擴(kuò)展性

雖然SVG和圖標(biāo)字體都是基于矢量的驾锰，但瀏覽器會(huì)將圖標(biāo)字體解釋為文本，這意味著它們會(huì)受到抗鋸齒的影響拨与。因此稻据，SVG往往看起來(lái)比圖標(biāo)字體更銳利。

6.定位

由于圖標(biāo)字體必須通過(guò)偽元素插入买喧，因此定位字體圖標(biāo)可能會(huì)非常棘手捻悯。您可能必須考慮行高，垂直對(duì)齊和字母間距以及其他因素淤毛，以使偽元素和實(shí)際字形完美匹配今缚。對(duì)于SVG，您只需設(shè)置大小即可低淡。

7.可訪問(wèn)性

與圖標(biāo)字體不同姓言，SVG具有內(nèi)置的語(yǔ)義敏感元素，因此您不必包含任何變通方法來(lái)使屏幕閱讀器可以訪問(wèn)您的字體蔗蹋。

SVG圖標(biāo)工具和資源

Mozilla的開發(fā)者網(wǎng)絡(luò)有一個(gè)非常?全面的SVG教程?何荚，解釋了如何使用內(nèi)聯(lián)CSS來(lái)設(shè)置圖標(biāo)的樣式。除了Adobe Illustrator之外猪杭，還有一些工具可以幫助您實(shí)現(xiàn)SVG圖標(biāo)餐塘。IcoMoon是預(yù)制SVG和字體圖標(biāo)的絕佳資源，IcoMoon應(yīng)用程序允許您創(chuàng)建自己的皂吮。如果您正在尋找開源的東西戒傻，Inkscape是一個(gè)免費(fèi)的矢量繪圖程序税手，可以導(dǎo)出SVG文件。Convertio等工具允許您將其他圖像格式轉(zhuǎn)換為SVG文件需纳。

值得注意的是芦倒，像Illustrator和Inkscape這樣的程序經(jīng)常將額外的信息嵌入到您不需要的導(dǎo)出的SVG文件中。因此不翩，您應(yīng)該通過(guò)SVGO或SVG Minifier之類的優(yōu)化工具運(yùn)行SVG圖標(biāo)兵扬，以便在將它們添加到您的網(wǎng)站之前將其修剪下來(lái)。

除了上面提到的資源外慌盯，還有各種各樣的圖標(biāo)網(wǎng)站周霉，提供高質(zhì)量的媒介作為付費(fèi)或免費(fèi)服務(wù)。查看我們的完整圖標(biāo)庫(kù)資源指南以及有關(guān)使用glyphicon CDN提高glyphicons速度的文章亚皂。

摘要

社區(qū)中仍然存在一些爭(zhēng)論俱箱，即圖標(biāo)字體是否優(yōu)于SVG，反之亦然灭必。事實(shí)是狞谱，在某些情況下，使一方或另一方“更好”的原因取決于使用它的環(huán)境禁漓。

但是跟衅，SVG往往是首選方法。它們具有更高的可擴(kuò)展性播歼，提供更好的用戶體驗(yàn)伶跷，并得到所有主流瀏覽器的支持。甚至一些頂級(jí)網(wǎng)絡(luò)性能專家也表示秘狞，在2018年叭莫，擺脫圖標(biāo)字體而轉(zhuǎn)向支持SVG至關(guān)重要。

請(qǐng)?jiān)谙旅娴脑u(píng)論中告訴我們您的想法烁试。您使用的是圖標(biāo)字體雇初，SVG圖標(biāo)還是兩者的組合？