Що таке svg? Підтримка старих браузерів.

Відео: Заглушка для застарілих браузерів

Отже, ось вже прийшла пора заключній статті. У нашому циклі уроків по SVG ми багато чого дізналися, і скоро я опублікую кілька прикладів, де ми будемо використовувати цю технологію для створення дуже красивих і якісних елементів на сторінці, але не варто забувати, що старі браузери не будуть підтримувати цю технологію і ось про те, як це виправити, я і розповім в цій статті.

Найпростіший спосіб - це зробити запасне растрове зображення і, якщо svg не підтримується, то виводити його.

Відео: 7 альтернативних браузерів!

data="Mysvg.svg"gt; 
src="Myimg.jpg"alt=""gt;

Ми зберігаємо наше svg зображення в файлі з розширенням .svg, і, якщо воно не підтримується, то виводимо звичайне растрове зображення у форматі .jpg(Або .jpg, .jpg ...) Такий спосіб хоч і працює, але ви повинні розуміти, що растрове зображення не зможе задовольнити всі наші потреби, як векторне.

другий спосіб - Raphael.js і Модернізр.

Перейдіть на сайт https://raphaeljs.com/ і https://modernizr.com/ і скачайте ці дві бібліотеки.

В HTML документі підключіть модернізр

Після цього перейдіть на сайт https://readysetraphael.com/, куди завантажте ваш .svg файл. Той код, який ви отримаєте, збережіть в який-небудь файл з розширенням .js(Myimage.js)

Тепер, за допомогою бібліотеки модернізр перевіримо, підтримує браузер svg чи ні і, в залежності від цього зробимо висновок, чи потрібно нам підключати raphael і myimage.js чи ні.

if(!Modernizr.inlinesvg){ 
 document.write( 
`, 
` 
) - 
}

Все, що нам тепер залишилося, це додати svg в документ і блок div c id рівним тому, що записаний в нашому файлі myimage.js в конструкторі Raphael першим параметром, щоб ця бібліотека працювала правильно.

Отже, сьогодні ми дізналися, як змусити svg працювати в старих браузерах. Дякую за увагу і побачимося в наступних статтях!

Поділися в соціальних мережах:

Схожі