SVG, встроенные в URI данных CSS / SCSS, все еще должны быть в кодировке base64?

Question

Некоторое время назад мы начали включать SVG в качестве фонового изображения css. В то время, из-за проблем с совместимостью с IE, мы обнаружили, что просто используем SVG как

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

Таким образом, мы должны были base64 их:

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

Теперь, когда мы прекратили поддержку IE <11, нужно ли это еще делать, или я могу просто начать использовать SVG в URI данных, как в первом примере? </p>

Answer 1

Чтобы продолжить обсуждение с комментариями:

Компромисс, который является и читаемым, и короче, чем base64, заключается в URL-кодировании строки SVG, но с несколькими хитростями, чтобы избежать кодирования более, чем необходимо. Вот сообщение в блоге, объясняющее эту технику:

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;