HTML5. SVG - Scalable Vector Graphics

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Що таке SVG?


HTML елемент <svg>

HTML елемент <svg> є контейнером для SVG-графіки.

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


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

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

Елемент
<svg> 4.0 9.0 3.0 3.2 10.1

SVG Коло

Приклад:

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
Спробуйте самі »

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



Приклад:

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
Спробуйте самі »

SVG Закруглений прямокутник

На жаль, ваш браузер не підтримує вбудований SVG.

Приклад:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /
>

</svg>
Спробуйте самі »

SVG Зірка

На жаль, ваш браузер не підтримує вбудований SVG.

Приклад:

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /
>

</svg>
Спробуйте самі »

SVG Лого

SVG На жаль, ваш браузер не підтримує вбудований SVG.

Приклад:

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  На жаль, ваш браузер не підтримує вбудований SVG.
</svg>
Спробуйте самі »

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

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

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

SVG базується на XML, що означає, що кожен елемент доступний у SVG DOM. Ви можете приєднати обробники подій JavaScript для елемента.

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

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


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

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

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

SVG Підручник

Дізнатись більше про SVG можна, відвідавши Підручник по SVG.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.