SVG Fallbacks

new_gist_file

<svg width="96" height="96">
    <image xlink:href="svg.svg" src="svg.png" width="96" height="96"/>
</svg>
And here the magic: browsers which support SVG will read the code as:

<svg width="96" height="96">
    <image xlink:href="svg.svg" width="96" height="96"/>
</svg>
ignoring src attribute and will show SVG image.

Browsers which do not support SVG will ignore unknown tag svg and thanks to image is replaced with img will read the code as:

<img src="svg.png" width="96" height="96"/>
and will show regular image.

For very simple images (e.g. icons), it is possible not to create a separate SVG file, just write all the content in HTML, that could be shorter than the file path.

<svg height="16" width="16">
    <path d="M5 1v14l9-7">
    <image src="next.png">
</svg>