內聯SVG vs CSS背景Sprite

-1

我在我的應用程序中創建了幾個頁面（當前在我的前端運行Angular），每個頁面都包含大量徽標。我目前正在爲每個SVG標誌（將內聯SVG代碼放在一個模板中）創建指令，這使得代碼更具可讀性，但由於標誌的數量衆多，我開始懷疑它是否會更有意義改爲創建一個CSS精靈。內聯SVG vs CSS背景Sprite

我希望從性能的角度來看待這個問題。我知道CSS背景圖像被緩存，所以這是一個優點。如果我想對某些特定徽標進行不同的顏色或大小設置，SVG爲我提供了更大的靈活性，但如果在加載時間方面花費我相當多的成本，我寧願選擇背景圖片。

來源

2017-01-16 user3658800

-2

TL; DR：從編碼的角度來看，我會說保持簡單，從用戶體驗/ UI的角度來看，它取決於您的使用案例。

我會去背景圖片，除非與徽標的交互是用戶旅程的關鍵因素。

例如，如果在那裏顯示客戶端的數量，他們的高配置或作爲結果的狀態，那麼圖像就沒有問題。你不會經常改變它，也沒有必要設置這種情況，以便你可以操縱標誌太多。

如果您有一個使用徽標的完整交互，用戶將徽標更改顏色懸停，然後點擊即可展開並顯示更多信息 - 那麼SVG路線是有意義的，可能是值得的。

讓事情以用戶爲中心 - 是時候給你的成本去獲得對用戶的好處還不夠嗎？

來源

2017-01-16 09:18:08 ZaneDickens

我正在爲我工作的公司做這樣的事情。他們有數百張圖片可以很容易地壓縮成一個SVG精靈。我想答案取決於該項目，它會變大嗎？如果是的話，我認爲現在花時間實施精靈表是一個好主意，也可以用它來表示圖標。 here是一篇關於CSS技巧的精彩文章。

如果你會開始這樣做，我推薦使用Grunt並實現grunt-svgstore它爲你節省了大量的時間來創建精靈表，並且它非常簡單，就像這樣。

grunt.initConfig({ 
    svgstore: { 
    options: { 
     option like prefix ID with 'icon', indentation, etc. 
     } 
    }, 
    default : { 
     files: { 
     'dest/dest.svg': ['svgs/*.svg'], //destination, files to convert 
     }, 
    }, 
    }, 
});

來源

2017-07-05 13:57:40 OmarAguinaga

內聯SVG vs CSS背景Sprite

回答

相關問題