Добавление масштабируемой векторной графики (SVG) в неподдерживаемом браузере

В предыдущем посте из этой серии мы немного упомянули о ловушке SVG со старыми браузерами и использованием Raphaël.js служить графикой в ​​качестве альтернативного решения. В этом посте мы подробнее рассмотрим этот вопрос.

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

Использование элемента объекта

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

Для демонстрации мы добавили логотип Apple с SVG на нашу веб-страницу. Однако неподдерживаемые браузеры останутся пустыми. Чтобы решить эту проблему, мы можем служить Растровая графика, следующим образом;

Таким образом, поддерживаемые браузеры будут по-прежнему принимать .svg, в то время как неподдерживаемые браузеры будут содержать растровое изображение. Мы добавили метку «png» под логотипом Apple, чтобы отслеживать, какая графика доставляется.

Однако, как мы упоминали в другом посте, растровая графика не такая гибкая и масштабируемая, как SVG. Итак, давайте посмотрим на другое решение.

Использование Modernizr

Другой метод, который мы можем использовать, это с помощью Modernizr, Для тех из вас, кто не знаком с этой библиотекой JavaScript, не беспокойтесь, у нас будет специальный пост, посвященный этой теме. Пока просто будьте с нами.

Прежде всего, давайте подготовим некоторые необходимые библиотеки JavaScript, Modernizr.js и Raphael.js. Затем нам также нужно конвертировать наш файл .svg в формат, поддерживаемый Raphael, с помощью этого инструмента, ReadySetRaphael.jsи сохраните вывод в отдельном файле .js; давайте назовем это svg.js.

Включите Modernzr.js в HTML-документ, например, так:

А для двух других файлов, Raphael.js и svg.js, мы будем загружать его условно, только когда он просматривается в неподдерживаемых браузерах.

С помощью Modernizr мы можем определить возможности браузера, в этом случае мы определим, способен ли браузер отображать SVG, а если нет, мы будем обслуживать скрипт:

if (! Modernizr.inlinesvg) {
document.write (
»,

);
}

Теперь нам нужно только добавить HTML-разметки следующим образом;

В приведенном выше фрагменте кода мы добавили SVG непосредственно в документ HTML и div для размещения кода Raphael. Чтобы еще раз заметить, какая графика легко доставляется, мы также поместили текст под логотип внутри элемента SVG.

Это SVG

Итак, вот что мы получим в браузерах.

svg apple

Чтобы увидеть его более четко, вы можете просмотреть демо по ссылкам ниже и убедиться, что вы пробовали его в разных браузерах; мы бы предложили IE8 / 7 и Google Chrome.

Последняя мысль

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

Спасибо за чтение этого поста, и мы надеемся, что вам понравилось.

Больше

Вам также могут быть интересны следующие посты:

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *