SVG and <image> tag tricks

A few days ago Lea Verou shared a link to Jake Archibald's post Having fun with <image> where he once again found out that image and img are nearly the same, all browsers replace image with img while parsing HTML.

svg.svg

svg.png

A couple of months ago this property of image tag gave me the idea to use it for graceful degradation of SVG images in browsers which do not support SVG. The idea is extremely simple, we will have a SVG image for modern browsers and regular raster image for others. And write the following code:

<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>