Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить елемент <svg>?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Елемент `<svg>` (Scalable Vector Graphics) використовується для **відображення векторної графіки прямо в HTML**.
Він дає змогу малювати **фігури, іконки, лінії, тексти й анімації**, які **не втрачають якість під час масштабування**, на відміну від растрових зображень (PNG, JPG).

---

### 1. Приклад простого SVG

```html
<svg width="200" height="100">
  <circle cx="50" cy="50" r="40" fill="skyblue" stroke="navy" stroke-width="4" />
</svg>
```

Що відбувається:

- `<svg>`: створює область для малювання 200×100 пікселів;
- `<circle>`: малює коло з центром (50,50) і радіусом 40;
- `fill`: колір заливки, `stroke`: обведення.

Результат: коло із синьою рамкою та блакитною заливкою.

---

### 2. Головна відмінність від `<canvas>`

| Особливість | `<canvas>` | `<svg>` |
|---|---|---|
| Тип графіки | Растрова (малюється пікселями) | Векторна (математичні фігури) |
| Масштабування | Втрачає якість | Масштабується ідеально |
| Доступ до елементів | Немає: усе малюється як «картинка» | Кожен об'єкт: окремий DOM-елемент |
| Використання | Ігри, анімації, графіки | Іконки, логотипи, схеми, діаграми |

Іншими словами:

- `<canvas>` малює «піксель за пікселем»;
- `<svg>` будує фігури за формулами.

---

### 3. Основні фігури SVG

| Елемент | Призначення | Приклад |
|---|---|---|
| `<rect>` | Прямокутник | `<rect x="10" y="10" width="80" height="50" fill="tomato" />` |
| `<circle>` | Коло | `<circle cx="50" cy="50" r="40" fill="gold" />` |
| `<ellipse>` | Еліпс | `<ellipse cx="80" cy="50" rx="60" ry="30" />` |
| `<line>` | Лінія | `<line x1="10" y1="10" x2="100" y2="100" stroke="black" />` |
| `<polygon>` | Багатокутник | `<polygon points="50,10 90,90 10,90" fill="lime" />` |
| `<polyline>` | Ламана лінія | `<polyline points="0,50 25,0 50,50" stroke="red" fill="none" />` |
| `<path>` | Довільна крива (найпотужніша фігура) | `<path d="M10 80 Q 95 10 180 80" stroke="purple" fill="none" />` |
| `<text>` | Текст | `<text x="20" y="50" font-size="20">Привіт, SVG!</text>` |

---

### 4. Вбудовування SVG

SVG можна вставляти в HTML **трьома способами**:

#### Прямо в код сторінки:

```html
<svg>…</svg>
```

#### Як окремий файл:

```html
<img src="icon.svg" alt="Іконка">
```

#### Як фон у CSS:

```css
background: url('pattern.svg');
```

---

### 5. Приклад з анімацією

SVG підтримує **вбудовані анімації**:

```html
<svg width="120" height="120">
  <circle cx="60" cy="60" r="40" fill="orange">
    <animate attributeName="r" from="10" to="40" dur="1s" repeatCount="indefinite" />
  </circle>
</svg>
```

Коло буде пульсувати.

---

### 6. Чому SVG важливий

- **Без втрати якості**: ідеально для Retina-екранів і адаптивних сайтів.
- **Мала вага**: зазвичай менша, ніж у PNG/JPG.
- **Стилізується через CSS**: можна змінювати колір, обведення, прозорість.
- **Анімується через CSS або JS.**
- **Доступний у DOM**: можна взаємодіяти з елементами через JavaScript.

---

### Підсумок:

| Властивість | Значення |
|---|---|
| Тег | `<svg>` |
| Тип графіки | Векторна |
| Переваги | Масштабованість, мала вага, інтерактивність |
| Основні елементи | `<rect>`, `<circle>`, `<path>`, `<text>` та ін. |
| Застосування | Іконки, логотипи, графіки, схеми, анімації |

---

**Простими словами:**
`<svg>` - це **вбудований у HTML векторний редактор**,
який малює фігури і текст не пікселями, а формулами.
Тому він завжди залишається **чітким, легким і масштабованим**, на будь-якому екрані.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати488 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.