Добавление масштабируемой векторной графики (SVG) в неподдерживаемом браузере
В предыдущем посте из этой серии мы упомянули о ловушке SVG со старыми браузерами и использовании Raphael.js в качестве альтернативного решения для графики. В этом посте мы подробнее рассмотрим этот вопрос..
Идея проста, мы по-прежнему будем использовать элементы SVG в качестве основного способа доставки графики на нашу веб-страницу, но в то же время мы также предоставим функцию отката так что он все еще может отображаться в неподдерживаемых браузерах.
Конечно, есть много путей, по которым мы можем пойти, но мы рассмотрим только два решения, которые, я думаю, являются лучшим общим решением. Итак, давайте посмотрим, как мы можем это сделать.
Использование элемента объекта
Помимо размещения его непосредственно в HTML-документе, есть несколько способов встроить SVG. Например, если мы храним графику в .SVG файл, мы можем использовать элемент.
Для демонстрации мы добавили логотип Apple с SVG на нашу веб-страницу. Однако неподдерживаемые браузеры останутся пустыми. Чтобы решить эту проблему, мы можем использовать растровое изображение следующим образом;
Таким образом, поддерживаемые браузеры по-прежнему будут принимать .SVG, в то время как неподдерживаемые браузеры будут содержать растровое изображение. Мы добавили “PNG” Отметьте под логотипом Apple, чтобы отслеживать, какая графика доставляется.
Однако, как мы уже упоминали в другом посте, Растровая графика не такая гибкая и масштабируемая, как SVG. Итак, давайте посмотрим на другое решение.
Использование Modernizr
Другой метод, который мы можем использовать, это с помощью Modernizr. Для тех из вас, кто не знаком с этой библиотекой JavaScript, не волнуйтесь, у нас будет специальный пост, посвященный этой теме. А пока просто будьте с нами.
Прежде всего, давайте подготовим некоторые необходимые библиотеки JavaScript, Modernizr.js и Raphael.js. Затем нам также нужно преобразовать наши .SVG с помощью этого инструмента ReadySetRaphael.js сохраните файл в формате, поддерживаемом Raphael, и сохраните вывод в отдельном файле. .JS файл; давай назовем это svg.js.
Включите Modernzr.js в HTML-документ, например, так:
И для двух других файлов, Raphaël.js а также svg.js, мы загрузим его условно, только при просмотре в неподдерживаемых браузерах.
С помощью Modernizr мы можем определить возможности браузера, в этом случае мы определим, способен ли браузер отображать SVG, а если нет, мы будем обслуживать скрипт:
if (! Modernizr.inlinesvg) document.write (''
