Як використовувати SVG правильно (Частина 1)

Scalable Vector Graphics (Масштабована векторна графіка) тепер універсально підтримуються у всіх браузерах (настільних і мобільних).

Цей туторіал повністю розкаже, що таке , і як створювати дизайн та впроваджувати у своїй роботі з веб-дизайну.

Спершу – вісім причин, чому ви повинні використовувати SVG:

1. Вектори чіткі

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

SVG має ряд інших функцій: фільтри, шаблони, градієнти та маски, а також властивість viewBox для оформлення сцени, до того ж усе це анімується. SVG надзвичайно універсальний і підтримується всіма браузерами, починаючи з IE9.

2. Вони мають навігацію DOM

SVG всередині браузера має свій власний DOM (Об’єктна модель документа). SVG обробляється браузером як окремий документ, а потім розміщується всередині звичайної DOM сторінки. Це важливо для властивостей viewBox, оскільки ми можемо намалювати наше зображення на полотні будь-якого розміру, але потім відображати його в браузері на іншому, без оновлення властивостей усередині SVG. Цей окремий, навігаційний DOM – це те, як ми взаємодіємо з елементами всередині SVG за допомогою CSS та Javascript.

3. Він має доступний контент

SVG має теги, створені спеціально для доступності, основним з них є тег <title>. Тег заголовка разом з тегом “<desc>” слід використовувати для забезпечення резервного контенту.

Вміст цих тегів не відображатиметься браузером, але вони будуть доступні через API для доступу до браузерів. Ви можете (і повинні) також використовувати правильні ARIA властивості, де це можливо, наприклад, якщо ви приховуєете елемент SVG.

4. Його розподільна здатність незалежна та респонсивна

Класичний логотип Coca-Cola виготовлений за різними адаптивними розмірами

Через векторну природу SVG зображення незалежне від розподільної здатності. Зображення виглядає чіткими на будь-якому дисплеї з якісними дисплеями щільності ~285 ppi на смартфонах і на ~85 ppi стандартних моніторів.

За допомогою SVG ми можемо забути про створення зображень “@2x.png” (якщо вам не потрібно підтримувати IE8) і створити один файл для всіх наших іконок (докладніше про це пізніше). Зображення SVG також можна масштабувати так само, як ми масштабуємо всі інші елементи у відповідному дизайні.

5. Він анімується

Елементи усередині SVG можуть бути анімованими для створення справді чудового інтерактивного досвіду. Також анімація може бути використана для додавання трохи краси до інтерфейсу, зображення або іконки.

Анімацію можна створити за допомогою CSS, API веб-анімацій у Javascript або тегом <animate>” у SVG. Анімація SVG – цікавий елемент у розробці. Але треба знати, що Google не підтримує SMIL – анімаційний тег SVG, у 45 за анімацію відповідає CSS та API веб-анімація.

6. Він може змінювати стилі

Використовуючи імена класів або ідентифікатори, ви можете “стилювати” елементи всередині SVG лише з використанням дещо інших властивостей, ніж ті, які ми звичайно будемо використовувати; замість “color” використовуємо “fill”, а замість “border” використовуємо “stroke”. Є деякі обмеження щодо стилізації SVG, які пов’язані з тим, як ви використовуєте SVG на сторінці. Якщо ви використовуєте SVG як тег зображення, то ви не зможете стилізувати елементи всередині Internet Explorer, однак, поліфіль svg4everybody виправить цю проблему.

7. Він інтерактивний

Використовуючи Javascript, ми можемо взаємодіяти з елементами всередині SVG завдяки навігаційному DOM. Це дозволяє нам створювати інтерактивні елементи за допомогою SVG так само, як і в HTML та CSS.

Ми також можемо застосувати анімацію через Javascript, використовуючи новий API веб-анімації, що дозволяє запрограмувати як прості, так і складні взаємодії та анімації. Також є декілька доступних для використання бібліотек Javascript, які були створені для прискорення робочих процесів SVG.

8. Розміри файлів можуть бути невеличкими

Через векторну природу SVG (будучи зображенням, намальованим із набору координат), розміри файлів під час оптимізації будуть дуже маленькі, якщо порівнювати їх із майже будь-яким іншим типом файлів зображення.

Існує кілька способів оптимізації SVG – від інструментів командного рядка до ручного видалення точок і груп, але SVGOMG має графічний інтерфейс та безліч варіантів настройки, що показує вам візуально зміни, внесені під час оптимізації.

Очевидно, що SVG має достатньо переваг, щоб використовувати його у своїх проектах.

ДАЛІ БУДЕ!

Також буде ЦІКАВО:

Вам сподобалося?

Читайте щотижня наші кращі статі про дизайн!

email рассылки

Корисна розсилка!

Все найцікавіше про дизайн і дизайнерів!
А ще свіжі вакансії і трішки гумору)

Ваш email:
email рассылки
Позначки:

Залишити відповідь