嵌入在 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

从评论中继续讨论：

一个既可读又比 base64 短的折衷方案是对 SVG 字符串进行 URL 编码，但有一些技巧可以避免编码过多。以下是一篇解释这种技术的博客文章：

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

..和完成这项工作的工具：

https://codepen.io/jakob-e/pen/doMoMLhttps://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;