.background-image-svg() was a 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 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
Cons
- 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.
Pros
- 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
Dev notes
Mixin is relatively popular:
Skins
Wikimedia deployed