Додавання масштабованої векторної графіки (SVG) у непідтримуваний браузер
На попередньому посту в цій серії ми трохи згадали про проблему SVG зі старими браузерами і використовуючи Raphael.js для подання графіки як альтернативного рішення. У цьому пості ми розглянемо це питання далі.
Ідея проста, ми як і раніше будемо використовувати елементи SVG як основний спосіб доставляти графіку на нашій веб-сторінці, але в той же час ми також надаємо резервну функцію таким чином, щоб він все ще міг відображатися в непідтримуваних браузерах.
Звичайно, є багато шляхів, які ми можемо прийняти, але ми розглянемо лише два рішення, які, на мою думку, є кращим загальним рішенням. Отже, давайте подивимося, як ми можемо це зробити.
Використання елемента об'єкта
Крім введення безпосередньо в документ HTML, існує декілька способів вбудовування SVG. Наприклад, якщо ми зберігаємо графіку .svg Файл, ми можемо використовувати елемент.
З метою демонстрації, ми додали логотип Apple з SVG на нашу веб-сторінку. Однак непідтримувані веб-переглядачі залишаться порожніми. Щоб вирішити цю проблему, ми можемо подавати графіку Bitmap наступним чином;
Таким чином, підтримувані браузери будуть як і раніше брати .svg, час непідтримувані веб-переглядачі матимуть графіку Bitmap. Ми додали “png” позначте під логотипом Apple, щоб відстежити, яка графіка доставляється.
Однак, як ми вже згадували в іншому пості, Графічні зображення не настільки гнучкі і масштабовані, як SVG. Отже, давайте поглянемо на інше рішення.
Використання Modernizr
Іншим методом, який ми можемо використовувати, є використання Modernizr. Для тих з вас, хто не знайомий з цією бібліотекою JavaScript, не хвилюйтеся, ми будемо мати виділений пост, щоб покрити його. На даний момент, просто слідкуйте за нами.
Перш за все, давайте підготуємо деякі необхідні бібліотеки JavaScript, Modernizr.js і Raphael.js. Потім, нам також потрібно конвертувати наші .svg файл із підтримкою Raphael за допомогою цього інструменту ReadySetRaphael.js і збережіть вихідний файл у окремому .js файл; назвемо це svg.js.
Включіть Modernzr.js у документ HTML, наприклад:
А для двох інших файлів, raphael.js і svg.js, завантажимо його умовно, лише тоді, коли він переглядається в непідтримуваних браузерах.
За допомогою Modernizr ми можемо виявити можливості браузера, в цьому випадку ми визначимо, чи здатний браузер відображати SVG, і якщо це не буде, ми будемо обслуговувати сценарій:
if (! Modernizr.inlinesvg) document.write ('' PHHSNEWS