Сегодня мы с вами хотим подробнее рассмотреть этот аспект.
Если вы не читали предыдущие части, то мы настоятельно рекомендуем вам с ними ознакомиться:
Масштабируемая векторная графика (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. Так что, давайте рассмотрим другой вариант.
Применение 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 в неподдерживаемых браузерах. Наконец, если у вас есть что добавить, то обязательно поделитесь с нами и другими читателями в комментариях.
Спасибо за чтение, и надеемся, что вам понравилось!
Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.