在CSS中編碼的SVG base64

我創建了一個標誌，我將在AI的網站上使用該標誌，並使用SVG Optimizer輸出優化文件。最初我將svg文件嵌入到HTML中，但是看到它是所有頁面上的固定標誌，我認爲最好將它從HTML中移除並作爲背景圖像插入到我的CSS中。當我插入base64編碼鏈接時，我的鏈接會逐行換行，可能是15行，這似乎太長了。在CSS中編碼的SVG base64

下面是我所擁有的一個片段。我明顯減少了剩餘的14條線。我的問題是：有沒有一種方法可以在不使用js的情況下縮短實際鏈接？類似於相對路徑，但是對於編碼的URI。

#logo { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJb...); }

來源

2014-09-12 Eric H

當然，你可以添加回車和空格，它仍然會工作。 Here's an example from the SVG test suite

<image x="40" y="5" width="100" height="98" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAABCAMAAAAfBfuPAAAABGdBTUEAAK/INwWK6QAAABl0RVh0 
    U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEsUExURfb/AK3/AAD/9/9sAIn/AN7/ABT/ 
    AAB//zD/AP9GAAD/s1H/AAD/H/8AxwD/bn8A/1wA/wD/XJv/AP8Ai//MAGP/ABMA/wD/LP8A6P8K 
    AP8AF/8A9QD/xAAA/wD1/9MA/wD/gABY/wD/Cf8ATJEA//+6AACT/wCn/+v/AAD/TAD/kf8AYKMA 
    //8kAAAk/wAV/y0A/3b/AP80AAD/O/cA//8A/wD///8An/8A2QD/Ev8AAMQA/+0A/7MA////AP8A 
    CuAA//8AJ24A/0sA//8AOAA0/wAK/wBF//8WAAgA/x8A///2AL//AP8AdTwA/wn/AP/bAP+AAP+U 
    AM//AP+nAP8AtADp/wD/o0D/AP/qAADb/wC5/wDL/wD/AAD/7QD/0gD/4CH/AABr//9ZAG2IeB4A 
    AABvSURBVHjaYrCyl3J0Udb2FTYP5bWQkDY1sXGQt7bVUeF3EnD2M/AS85R109dzdVdMYldTj46J 
    CpMzY4pLiJfhCtdS4BPUNBbnsVSK9WdL5IjgFjVkEWL0CWbVYLDzjgwQUQ0JCmRO5jTS9ZAECDAA 
    3aQTV3E5iioAAAAASUVORK5CYII="/>

來源

2014-09-12 18:08:06

感謝@Robert我想我的意思是，如果有縮短URI類似於你會如何，如果你得到一個IMG與路徑目錄，但不帶路徑目錄的CSS的方式（如這就說得通了）。例如，如果我從我的服務器獲取img，我會使用mysite.com/imgs/img1.jpg或../imgs/img1.jpg - 但是，因爲我正在使用編碼的base64 svg，所以我能夠使用或輸出類似url（data：image/svg + xml; base64，PD94b ..） – 2014-09-12 20:14:00

數據是數據，除了將其放入外部文件而不是數據url之外，您可以做的事情不多。 – 2014-09-12 21:03:08

在CSS中編碼的SVG base64

回答

相關問題