`.background-image-svg()` was a [[ https://pauginer.com/post/36614680636/invisible-gradient-technique | fantastic solution ]] and has provided peace of mind on the usage of SVGs with PNG fallbacks for browsers since 2013 (3a4f17059).
But it's time – as it is true for every technical solution in this world – to say goodbye.
The original article states, the browsers currently [[ https://caniuse.com/#feat=svg-css | being supported by this technique are basically ]]
- Internet Explorer 8 and
- Android 2.1-2.3
Original testcase: http://pauginer.github.io/invisible-gradient-technique/
Reduced testcase: https://codepen.io/Volker_E/full/JjdZVpj – you should see
- “SVG” labelled when SVG is visible
- “PNG” labelled when PNG is visible
We need to rethink this support out of practicality and current realities, which I've just proposed in T248061
- Icons in icon-only interactive elements might not be visible to these users, but we have sparely put such elements into our interfaces outside of Grade A support.
- Removal of PNG fallbacks and duplication of work for designers/implementors
- Removal of extra mixin calls, it will be enough to rely on normal `background-image` property.
- Removal of CSS code, with an impact slightly smaller, but still measurable similar to 792ba935677
- Additionally IE 9 would start showing SVGs as the technique is currently excluding it and let it show PNGs