—»     —»   Масштабируемая векторная графика (SVG): Добавление в неподдерживающий браузер
  Раздел: Образование и Изучение   Нет комментариев  

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



В предыдущих частях нашего руководства посвященного SVG мы как-то упомянули о несовместимости технологии со старыми браузерами, в которых альтернативным решением выступает Raphael.js.
Сегодня мы с вами хотим подробнее рассмотреть этот аспект.

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

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

Масштабируемая векторная графика (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 для того, чтобы определить, какая графика нам будет отображена.

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

Тем не менее, как мы уже говорили в других статьях, растровая графика не настолько гибка, как SVG. Так что, давайте рассмотрим другой вариант.

Применение Modernizr

Еще один метод заключается в применении Modernizr. Для тех, кто не знаком с библиотекой javascript, не стоит беспокоиться, так как у нас будет отдельная статья на эту тему. Сейчас просто следите за нашими действиями.

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

Включите Modernizr.js в HTML-документ следующим образом:

<script type="text/javascript" src="scripts/modernizr.js"></script>

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

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

if (!Modernizr.inlinesvg) {
document.write(
'<script type="text/javascript" src="scripts/raphael.js"></script>',
'<script type="text/javascript" src="scripts/svg.js"></script>'
);
}

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="280px" viewBox="0 0 500 280" enable-background="new 0 0 500 280" xml:space="preserve">
<path fill="#333333" d="M296.908,120.622c-8.77,6.201-13.158,13.676-13.158,22.41c0,10.458,5.425,18.479,16.262,24.076
c-2.908,8.435-7.122,15.764-12.65,22.009c-5.516,6.243-10.553,9.368-15.11,9.368c-2.147,0-5.075-0.718-8.794-2.133l-1.782-0.687
c-3.646-1.416-6.854-2.133-9.656-2.133c-2.641,0-5.535,0.555-8.679,1.665l-2.237,0.807l-2.818,1.154
c-2.218,0.884-4.468,1.326-6.725,1.326c-5.328,0-11.208-4.387-17.642-13.161c-9.273-12.567-13.905-26.264-13.905-41.085
c0-10.538,2.886-19.02,8.678-25.46c5.78-6.432,13.446-9.658,22.979-9.658c3.566,0,6.897,0.653,10,1.958l2.129,0.865l2.238,0.92
c1.992,0.84,3.601,1.264,4.825,1.264c1.569,0,3.316-0.364,5.231-1.094l2.929-1.151l2.19-0.804c3.483-1.262,7.34-1.896,11.555-1.896
C282.777,109.183,290.814,112.996,296.908,120.622z M273.238,82.575c0.108,1.344,0.167,2.378,0.167,3.102
c0,6.628-2.412,12.442-7.237,17.443c-4.823,5-10.438,7.494-16.837,7.494c-0.189-1.493-0.29-2.563-0.29-3.212
c0-5.635,2.239-10.924,6.726-15.864c4.482-4.939,9.671-7.838,15.575-8.678C271.754,82.787,272.395,82.696,273.238,82.575z"/>
</svg>

<div id="applelogo"></div>

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

<text x="210" y="250">This is SVG</text>

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

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

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

В завершение

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

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

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: векторная графика
Опубликовал Design FactoRy   Прочитано (раз): 4861   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930