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

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

svg.svg

svg.png

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

<svg width="96" height="96">
    <image xlink:href="svg.svg" src="svg.png" width="96" height="96"/>
</svg>

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

<svg width="96" height="96">
    <image xlink:href="svg.svg" width="96" height="96"/>
</svg>

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

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

<img src="svg.png" width="96" height="96"/>

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

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

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