We use the background: linear-gradient(transparent, transparent) hack to only send SVGs to browsers that support them. This rule is ignored by other browsers which fallback to the PNGs defined in the previous rule. However IE9 supports SVGs but not linear gradients, so misses out the SVGs it could otherwise handle (it even supports background-size:contain).
It's very hard to fix. One could use an IE9 CSS selector hack (http://codemug.com/html/css-hacks-for-ie6ie7ie8ie9-and-ie10/) which would result in the SVG being repeated. Due to embedding that would be a bandwidth hit for everyone (lessened a bit by gzip). We could mark the IE9 selector as noembed to avoid that so that only IE9 users have to download individual SVGs (they are already downloading individual PNGs).
Hmm. That sounds reasonable. If you want to fix it, go ahead :D
You'll probably want to fix:
- .oo-ui-background-image-svg2() mixin in [oojs/ui]/src/styles/common.less
- .background-image-svg() mixin in [mediawiki/core]/resources/src/mediawiki.less/mediawiki.mixins.less
- ResourceLoaderImageModule::getCssDeclarations() in [mediawiki/core]/includes/resourceloader/ResourceLoaderImageModule.php