通過URI內聯SVG

我想在css中使用數據URI的我的SVG圖像。基本的方法是將完整的數據URI設置爲= css類的背景屬性的值。通過URI內聯SVG

.bg { 
    background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>'); 
}

我的問題是：如何將數據URI值分解爲單獨的文件，並在我的css類中引用該文件。目標：將所有的數據URI從基本樣式中分離出來，這樣它們就不會讓CSS變得太可笑了。

從來沒有使用URI來實現SVG，所以我也打開任何任何人都可能有的想法：通過URI實現SVG。謝謝一堆！ :)

P.S.如果有一個很好的方法來實現這個功能，我正在使用這個項目的gulp和bootstrap sass。

您將數據uri保存爲一個文件，然後引用它。當然，它不再是當時的數據URI，而只是一個URI。 –

這是超級基本的，但你會如何引用該文件。你會給該文件什麼擴展名？我如何才能在所述文件中引用一個SVG？ –

取決於你放在哪裏。明顯的擴展名是.svg不是嗎？我真的不明白最後一個問題。 –

我更喜歡使用grunt-grunticon，它可以爲你生成css類，如果需要的話，可以使用fallback來生成png。然後，您可以使用scss或sass來以您希望使用它的方式擴展圖標。例如@extend .icon-undo;

希望這會有所幫助。祝你好運。

2016-10-14 16:31:28 tuck

回答