I'd like to use inline svg code on my site (i.e. <svg>
tags instead of <img src="example.svg" />
), with a png fallback for browsers < IE9 and < Android 3. Following the concept of Responsive Design with Server Side components, I want to test specifically for those browsers using PHP, and provide a png if needed. I don't want to check for and provide a fallback client-side because the implementations I've seen require the png to be loaded by the browser regardless of whether or not it's actually needed.
I know browser sniffing is generally looked down upon, but even the go-to client-side feature detection library Modernizr includes some browser sniffing when necessary - https://github.com/Modernizr/Modernizr/commit/612ed03c2d688ee8aa952e345b374509e0482c0e
In this specific case - with a known set of unsupported browsers and a high likelihood of continued future support for this feature (svg) - what are the pitfalls I need to look out for?