Трюки з SVG і підтримка старими браузерами
- підтримка браузерами
- Fallback
- Використання SVG зображення через тег img
- Використання SVG зображення через CSS властивість background-image
Раніше я не використовував SVG, оскільки робочі проекти були з підтримкою Internet Explorer 6/7. Та й не було потрібно підтримки ретини. Але зараз, через час, настав час використовувати SVG на повну.
підтримка браузерами
На даний момент, SVG підтримується всіма сучасними браузерами, починаючи з Inernet Explorer 9 ( CIU ). За даними сайту Can I Use, SVG підтримується в світі на 94.55% і на 83.13% в Росії. Найголовніша проблема - це IE 8, частка якого все ще досить велика.
Fallback
У нас є кілька варіантів використання SVG зображень в HTML сторінці:
- У тезі img - <img src = "test.svg" alt = "">
- Через CSS властивість background-image - background-image: url (test.svg)
- Вставити svg інлайн (не розглядається в статті) </ li>
Для перших двох способів є дуже витончені рішення. Почнемо зі способу в якому ми використовуємо тег img.
Використання SVG зображення через тег img
Замість звично коду, напишемо в нашому HTML наступний код:
<Svg width = "100" height = "100"> <image xlink: href = "test.svg" src = "test.png" width = "100" height = "100" /> </ svg>Після обробки цього коду браузером, який підтримує SVG, він проігнорує атрибут src і покаже векторну картинку test.svg.
<Svg width = "96" height = "96"> <image xlink: href = "test.svg" width = "100" height = "100" /> </ svg>А браузери, які не підтримують SVG, проігнорують невідомий тег SVG. Але через те, що img і image це одне і те-ж, то вони побачать цей код ось таким:
<Img src = "test.png" width = "100" height = "100">Тобто покажуть нашу png картинку. Ось така ось магія :-)
Використання SVG зображення через CSS властивість background-image
Тут є кілька рішень. Одне з них використовувати бібліотеку Modernizr і якщо в браузері не буде підтримки SVG, то можна буде задати фонове зображення іншого формату через клас у html no-svg.
Цей спосіб використовує multiple backgrounds для визначення підтримки SVG. Він практично ідеальний, за винятком стандартного браузера Android 2.3.
Тепер, я буду використовувати SVG набагато частіше. Залишилося тільки розібратися як експортувати його з фігур в Photoshop, але це зовсім інша історія.
Еше можна підписатися на email розсилку нових заміток. Чи не частіше одного разу на тиждень, без спаму.