Що таке svg? Основи.

Вітаю всіх з Днем Перемоги! А сьогодні я пишу першу статтю з серії, в якій ми дізнаємося, що таке SVG і як його використовувати.

SVG (Scalable Vector Graphic) - це мова для опису двовимірної графіки, заснований на XML. Дана технологія поступово набирає обертів, а пов`язано це ось з чим:

• При зміні масштабу svg фігури завжди перемальовував, завдяки чому ви завжди будете бачити гладке і красиве зображення без пикселизации
• Браузеру не потрібно запитувати картинку у сервера, тому що він сам її малює, отже, продуктивність підвищується
• Можна стилізувати об`єкти за допомогою CSS, як звичайні html елементи, або за допомогою jаvascript
• Можна редагувати або анімувати за допомогою CSS і jаvascript
• менший розмір

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

Для початку варто відзначити, що всі наші фігури повинні бути в тезі svg, а тепер давайте намалюємо лінію. Для відображення лінії служить тег line, який має такі атрибути:

• x1 - Початкова x координата
• x2 - Кінцева x координата
• y1 - Початкова y координата
• y2 - Кінцева y координата
• stroke-width - Ширина лінії
• stroke - колір лінії

Але що, якщо нам потрібно намалювати відразу кілька ліній? Використовувати кілька тегів line було б не дуже красиво. Для цього існує тег polyline.

У тега polyline є атрибут points, де ми вказуємо координати x і y через кому, потім робимо пробіл і пишемо координати наступної точки і так далі. Зауважте, що тут є атрибут fill, в якому ми можемо вказати колір в будь-якому з форматів css, яким буде залито простір між лініями. Якщо ж ви хочете, щоб простір між лініями було порожнім, то вкажіть значення none.

Перейдемо до більш складним фігурам і намалюємо прямокутник.

Для того, щоб намалювати прямокутник, потрібно використовувати тег rect, де в атрибутах width і height вказати ширину і висоту соотвественно, а інші атрибути вам вже знайомі і виконують абсолютно ті ж функції, що і з лініями.

Переходимо далі і спробуємо намалювати коло

Для відтворення кола служить тег circle і атрибути cx, cy і r для завдання координат центру кола і його радіусу.

Інший елемент - еліпс малюється точно так же, як і коло, але там ми можемо самі задавати радіуси по осі x і по осі y. Для його відтворення служить тег ellipse

Відео: Основи роботи з canvas і svg

Якщо вам потрібно виводити багатогранні фігури, такі як п`ятикутник, то скористайтеся тегом polygon

Атрибут points у тега polygon працює так само, як і атрибут points у тега polyline.

Якщо об`єкт дуже складний, то ви можете скористатися будь-яким редактором векторної графіки і намалювати його там, а потім просто вставити ось таким чином

SVG підтримується IE c 9 версії, Mozilla Firefox з 1.5, Google Chrome з 3.0 і оперою з 8.0.

Відео: Як конвертувати PNG to SVG. 2 перевірених способу

На цьому стаття підійшла до кінця. Вийшла вона великий, але простий. У наступній ми продовжимо вивчати цю цікаву технологію, а на цьому все. Успіхів!