Тег <svg>

Тег <svg> (укр. — “векторна графіка”) використовується в HTML для відображення масштабованої векторної графіки прямо у коді сторінки. Він дозволяє створювати інтерактивну, анімовану, чітку графіку будь-якого розміру, яка не втрачає якості при масштабуванні.

Атрибути

Специфічні атрибути

  • width — задає ширину області SVG (у пікселях або інших одиницях). Наприклад:
<svg width="300"></svg>
  • height — задає висоту області SVG. Наприклад:
<svg height="150"></svg>
  • viewBox — визначає внутрішню систему координат та дозволяє гнучко масштабувати графіку. Наприклад:
<svg viewBox="0 0 300 150"></svg>
  • preserveAspectRatio — контролює вирівнювання при масштабуванні. Наприклад:
<svg viewBox="0 0 300 150" preserveAspectRatio="xMidYMid meet"></svg>
  • xmlns — простір імен SVG (у HTML5 зазвичай не потрібен при вставці inline, але необхідний у standalone SVG-файлах). Наприклад:
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150"></svg>

Глобальні атрибути

  • id — унікальний ідентифікатор елемента. Наприклад:
<svg id="main-logo" width="100" height="100"></svg>
  • class — задає клас для стилізації через CSS. Наприклад:
<svg class="icon" width="100" height="100"></svg>
  • style — додає інлайн-стилі. Наприклад:
<svg style="border: 1px solid #000;" width="200" height="100"></svg>
  • title — додає опис елемента, що відображається при наведенні курсора. Наприклад::
<svg title="Діаграма" width="100" height="100"></svg>

Приклад використання

Повний приклад простої SVG-графіки:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Приклад</title>
  <style>
    .circle {
      fill: #4CAF50;
      stroke: #333;
      stroke-width: 3;
    }
  </style>
</head>
<body>

<h2>Малювання кола з текстом всередині:</h2>

<svg width="300" height="200" viewBox="0 0 300 200">
  <circle cx="150" cy="100" r="80" class="circle" />
  <text x="150" y="110" font-size="24" text-anchor="middle" fill="#fff">SVG</text>
</svg>

</body>
</html>

Додаткові моменти

  • SVG підтримує вкладені графічні елементи:
    • примітиви (<circle>, <rect>, <line>, <path>)
    • текст (<text>)
    • групи (<g>)
    • шаблони (<defs>, <use>)
    • анімації (<animate>, <animateTransform>)
  • Стилізується через CSS.
  • Підтримує JavaScript-обробку.
  • Підтримує інтерактивність.
  • Може вставлятись inline, через <img>, background-image.
  • Повністю підтримується усіма сучасними браузерами.