SVG Fallback Using Multiple Background Image CSS

Ben Schwarz proposes a technique for applying SVG background images. He suggests that “all browsers that support SVG background images also supports multiple background images.”

.module {
	background: url(‘logo.png’);
	background: none, url(‘logo.svg’);
}

This method correctly identifies that every browser that supports SVG backgrounds also supports multiple backgrounds images. However, it didn’t do the required reverse check to verify that every browser that supports multiple background images also supports SVG backgrounds. Unfortunately for this technique, that is not true. Android 2.x supports multiple backgrounds but not SVG. He’s willing to forgo the background for these browsers, but you’ll want to make sure that any text that sits on that background would still be legible without the images.

Instead of trusting corollaries exist, I think it’s better to do feature detection for SVG because you’re much more likely to get solid results. (Except when a browser incorrectly identifies having support, but then you can make special cases for those instances.)