嵌入CSS / SCSS数据URI中的SVG是否仍需要进行base64编码？

Question

A while back, we started including SVGs as background-image css. At the time, due to compatibility issues with IE we found just using SVGs as

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

So we had to base64 them:

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

Now that we have dropped support for IE < 11 does this still need to be done, or can I start simply using the SVG in the data URI as in the first example?

Answer 1

To continue the discussion from the comments:

A compromise that is both readable and shorter than base64 is to URL encode the SVG string, but with a few tricks to avoid encoding more than necessary. Here is a blog post explaining this technique:

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

..and tools to do the job:

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;