Если вы не читали предыдущие части, то мы настоятельно рекомендуем вам с ними ознакомиться:

Масштабируемая векторная графика (SVG) — Исследование
Масштабируемая векторная графика (SVG) — Оформление посредством CSS
Масштабируемая векторная графика (SVG) — Работаем с текстом
Масштабируемая векторная графика (SVG) — Анимация

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

Конечно же, есть множество различных способов, но мы с вами рассмотрим два решения, которые, как нам кажется, лучшие. Итак, давайте посмотрим, как мы можем это сделать.

При помощи элемента Object

Вместо того чтобы напрямую помещать его в HTML-документ, существует несколько способов встроить SVG. Например, если мы храним графику в .svg-файле, мы можем использовать элемент «object».

<object data=’images/apple.svg’></object>
В демонстрационных целях мы, посредством SVG, добавили логотип Apple на нашу страницу. Тем не менее, в тех браузерах, в которых отсутствует поддержка, страница останется пустой. Чтобы решить эту проблему, мы можем использовать растровую графику следующим образом:

<object data=’images/apple.svg’> <img src=’images/apple.png’/> </object>
Таким образом, поддерживаемые браузеры будет распознавать .svg, а браузеры без поддержки будут отображать растровый графический элемент. Под логотипом Apple мы добавили отметку png для того, чтобы определить, какая графика нам будет отображена.