Трюки с SVG и тегом <image>

Недавно Лиа Веру (Lea Verou) поделилась ссылкой на пост Джейка Арчибальда (Jake Archibald) Having fun with , в котором он в очередной раз обнаружил, что теги image и img практически синонимы, в процессе парсинга тег image заменяется на img всегда и во всех браузерах.
svg.svg svg.png

Именно это свойство тега image пару месяцев назад натолкнуло меня на мысль использовать его для graceful degradation SVG картинок в браузерах, не поддерживающих SVG. Идея предельно простая: подготовим SVG-файл для хороших браузеров и обычную растровую картинку для остальных. И напишем в HTML такой код:

Дальше произойдёт магия: браузеры, поддерживающие SVG, прочитают этот код как:

проигнорировав атрибут src, и покажут красивую векторную картинку.

Браузеры, не поддерживающие SVG, проигнорируют неизвестный им тег svg и, благодаря тому что image и img — это синонимы, прочитают код как:

и покажут обычную растровую картинку.

Для совсем простых картинок (например, иконок) можно обойтись без отдельного SVG-файла, указав всё содержание файла прямо в HTML-е. Зачастую это содержание короче, чем путь к файлу.