嵌入CSS / SCSS數據URI中的SVG是否仍需要進行base64編碼？

Question

不久之前，我們開始將SVG包含為背景圖像CSS。 當時，由於IE的兼容性問題，我們發現僅將SVG用作

data:image/svg+xml;charset=UTF-8,<svg ...> ... </svg>

因此，我們必須將它們設置為base64：

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL...

現在我們已經放棄了對IE <11的支持，還是需要這樣做，還是可以像在第一個示例中一樣，開始在數據URI中簡單地使用SVG？

Answer 1

要繼續從評論中進行討論：

URL編碼 SVG字符串是一種既易讀又比base64短的折衷方案，但是有一些技巧可以避免不必要的編碼。 這是一篇博客文章，介紹了此技術：

https://codepen.io/tigt/post/optimizing-svgs-in-data-uris

..和完成這項工作的工具：

https://codepen.io/jakob-e/pen/doMoML
https://github.com/tigt/mini-svg-data-uri

function specialHexEncode(match) {
    switch (match) { // Browsers tolerate these characters, and they're frequent
        case '%20': return ' ';
        case '%3D': return '=';
        case '%3A': return ':';
        case '%2F': return '/';
        default: return match.toLowerCase(); // Compresses better
    }
}

var result = svg
    .replace(/\s+/g, ' ')  // Collapse whitespace
    .replace(/"/g, "'");   // Swap quotes

result = encodeURIComponent(result)             // Encode everything..
    .replace(/%[\dA-F]{2}/g, specialHexEncode)  // ..except a few special characters

return 'data:image/svg+xml,' + result;