Итак, вот уже пришла пора заключительной статьи. В нашем цикле уроков по SVG мы многое узнали, и скоро я опубликую несколько примеров, где мы будем использовать эту технологию для создания очень красивых и качественных элементов на странице, но не стоит забывать, что старые браузеры не будут поддерживать эту техноло...
Итак, вот уже пришла пора заключительной статьи. В нашем цикле уроков по SVG мы многое узнали, и скоро я опубликую несколько примеров, где мы будем использовать эту технологию для создания очень красивых и качественных элементов на странице, но не стоит забывать, что старые браузеры не будут поддерживать эту технологию и вот о том, как это исправить, я и расскажу в этом материале.
Самый простой способ - это сделать запасное растровое изображение и, если svg не поддерживается, то выводить его.
<object data="mysvg.svg">
<img src="myimg.jpg" alt="">
</object>
Мы храним наше svg изображение в файле с расширением .svg, и, если оно не поддерживается, то выводим обычное растровое изображение в формате .jpg(или .png, .gif...) Такой способ хоть и работает, но вы должны понимать, что растровое изображение не сможет удовлетворить все наши потребности, как векторное.
Второй способ - Raphael.js и Модернизр.
Перейдите на сайт http://raphaeljs.com/ и http://modernizr.com/ и скачайте эти две библиотеки.
В HTML документе подключите модернизр
<script src="modernizr.js"></script>
После этого перейдите на сайт http://www.readysetraphael.com/, куда загрузите ваш .svg файл. Тот код, который вы получите, сохраните в какой-нибудь файл с расширением .js(myimage.js)
Теперь, с помощью библиотеки модернизр проверим, поддерживает браузер svg или нет и, в зависимости от этого сделаем вывод, нужно ли нам подключать raphael и myimage.js или нет.
if (!Modernizr.inlinesvg) {
document.write(
'<script src="raphael.js"><\/script>',
'<script src="myimage.js"><\/script>'
);
}
Всё, что нам теперь осталось, это добавить svg в документ и блок div c id равным тому, что записан в нашем файле myimage.js в конструкторе Raphael первым параметром, чтобы эта библиотека работала правильно.
Итак, сегодня мы узнали, как заставить svg работать в старых браузерах. Спасибо за внимание и увидимся в следующих статьях!
