Що таке технологія SVG?

Що таке технологія SVG?

  • технологія SVG допомагає створювати масштабовану векторну графіку
  • технологія SVG використовується для створення графіки в Інтернеті
  • технологія SVG – це рекомендація від W3C

Тег HTML <svg>

Тег HTML <svg>– це контейнер для графіки SVG.

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

Підтримка браузера

Цифри в таблиці визначають першу версію браузера, яка повністю підтримує цей <svg>елемент.

ТегBrowser SVGБраузерБраузер SVGБраузерБраузер
<svg>4.09.03.03.210.1

SVG круг

See the Pen SVG круг by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Прямокутник SVG

See the Pen Прямокутник SVG by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Прямокутник з заокругленими кутами SVG

See the Pen Прямокутник з заокругленими кутами SVG by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

SVG зірка

See the Pen SVG зірка by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Логотип SVG

See the Pen Логотип SVG by Vladislav Groniuk (@vladislav-groniuk) on CodePen.0

 

Відмінності між SVG і Canvas

SVG – це мова для 2D-графіки в XML формтаі.

Canvas малює 2D графіку, “на льоту” (за допомогою JavaScript).

SVG – це XML, і це означає, що кожен елемент доступний у SVG DOM(Document Object Model). Ви можете приєднати обробники подій JavaScript о потрібного вам елемента.

У SVG кожна намальована форма запам’ятовується як об’єкт. Якщо атрибути об’єкта SVG змінено, браузер може автоматично повторно відтворити форму.

Canvas малюється пікселем за пікселем. Коли малюється графіка у Canvas, вона забувається браузером. Якщо необхідно щось змінити у зображенні, то потрібно перемалювати всю сцену, включаючи будь-які об’єкти.

Порівняння Canvas і SVG

У таблиці показані деякі важливі відмінності між Canvas і SVG:

CanvasSVG
  • Залежить від роздільної здатності
  • Не підтримує обробники подій
  • Погано мо/ливості для рендеренгу тексту
  • Ви можете зберігати результат у вигляді картинки .png чи .jpg
  • Добре підтримує графічнонавантажені ігри
  • Незалежить від роздільної здатності
  • Підтримує обробники подій
  • Найкраще підходить для додатків з великою областю рендернега (наприклад Google Maps)
  • Повільний комплексний рендеринг (все, що використовує DOM, буде повільне)
  • Не підтримує ігри

Перекладач: Гронюк Владислав
Посилання на оригінал: https://www.w3schools.com/html/html5_svg.asp

Сподобався урок? Поділись з друзями!

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

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: