SVG: вывод в неподдерживающих его браузерах

В предыдущих уроках серии мы разбирались с основами использования SVG в веб проектах. Однако, в старых браузерах данный интересный элемент имеет ряд проблем. Пришла пора разобраться с методами решения задачи совместимости кода.

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

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

 

Используем элемент object

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

<object data='images/apple.svg'></object>

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

<object data='images/apple.svg'>
    <img src='images/apple.png'/>
</object>

В поддерживающих нужный функционал браузерах будет выводиться .svg, а в остальных - растровая картинка.

Но растровая графика не имеет всех возможностей векторного изображения, поэтому рассмотрим другое решение.

 

Используем Modernizr

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

Сначала подготовим необходимы компоненты - библиотеки JavaScript  Modernizr.js и Raphael.js. Затем нужно конвертировать файл .svg в поддерживаемый библиотекой Raphael формат с помощью инструмента ReadySetRaphael.js и сохранить в отдельный файл .js (например, svg.js).

Включаем файл Modernzr.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>'
);
}

Теперь добавляем SVG непосредственно в документ HTML и элемент div для кода Raphael.

 

Заключение

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


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/4JjuInzpEw0/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

SVG: вывод в неподдерживающих его браузерах | | 2013-01-16 22:42:22 | | Статьи Web-мастеру | | В предыдущих уроках серии мы разбирались с основами использования SVG в веб проектах. Однако, в старых браузерах данный интересный элемент имеет ряд проблем. Пришла пора разобраться с методами | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: