The goal: use SVG wherever possible, falling back to a PNG (or SVG plug-in) when necessary. In particular, IE prior to 9 should use a PNG or SVG plug-in. IE9 (and Safari?) should use SVG except when the SVG includes filters.
XHTML is supported by modern browsers but not by IE (before 9?). It requires closing tags and use of name spaces. HTML5 is only supported at the moment by Firefox 4 and IE9.
This is a work in progress.
Note: I don't have access to the IE9 previews.
Support issues can be divided into two categories: feature detection and fallbacks.
The "modern" way to implement feature detection is to use the "hasFeature" query, which can be done via JavaScript or inside a <switch> SVG tag. It doesn't appear to be possible to use in HTML or XHTML directly.
The "hasFeature" query has problems since the browsers don't agree on the exact criteria for returning true. Firefox is very strict and thus returns false for requiredFeatures = "http://www.w3.org/TR/SVG11/feature#BasicFilter" even though it has rather good filter support.
Does not include svg filter support detection out of box but can be added. This however would be no better than "hasFeature" since Firefox would still report that it lacks filter support.
The <object> tag is a form of feature detection since if the <object> is not rendered, the content wrapped by the tag is exposed. This content can be a PNG. It is not clear in which cases this works. In particular, IE uses a non-standard set of attributes, requiring an IE test(?). (Also IE6 doesn't handle the fallback gracefully, adding extra junk.) It also appears that many browsers will only use the first child tag for the fallback.
Not recommended for many reasons... but maybe necessary.
Fallbacks can be divided into two types: static images (e.g. PNG) or using SVG plug-ins.
PNG fallback from <object> tag.
Plug-ins face the same problem of feature detection.
Alternative ways to create graphics. These are not applicative to our objective but are listed here for completeness.
SVG inserted via <object> tag. PNG used as backup.
Must include width and height in <object> tag to avoid scroll bars with Chrome.
SVG inserted via <embed> tag. Content between start and end tag is only hidden in XHTML. An error message will be displayed by Opera and Chrome if content not displayed by tag.
Must include width and height in <embed> to allocate correct space with Chrome.
SVG inserted via <iframe> tag. PNG used as backup(?).
Must include width and height in <iframe> tag to avoid scroll bars.
<iframe>, dropped from HTML 4.0 Strict and XHTML 1.0 Strict in favor of the <object> tag, has resurfaced in HTML5 as a way of "sandboxing" content from external sources.
SVG inserted via <img>.
Note: no interactivity: attribute onmousedown won't work, style hover won't work.
SVG inserted directly (HTML5 or XHTML).
Note that XHTML requires xmlns attribute for SVG and XLINK.