Skip to main content

Що робить елемент <svg>?

HTMLJunior~2 хв читання
Запропонувати правку

Елемент <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 векторний редактор, який малює фігури і текст не пікселями, а формулами. Тому він завжди залишається чітким, легким і масштабованим, на будь-якому екрані.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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