Векторная графика (SVG) описывает изображения с помощью математических формул — линий, кривых, многоугольников. Это позволяет масштабировать изображение без потери качества, так как оно перерисовывается заново при любом размере.

Растровая графика состоит из пикселей — маленьких точек с фиксированным цветом. При масштабировании растрового изображения качество ухудшается, появляются пикселизация и размытие.

В веб-разработке SVG используется для иконок, логотипов, диаграмм и анимаций, где важна четкость на любых разрешениях. SVG можно вставлять прямо в HTML как тег <svg>, стилизовать через CSS и управлять через JavaScript, что делает его очень гибким для интерактивных и адаптивных интерфейсов.

Пример вставки SVG в HTML:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Чем отличается векторная графика (SVG) от растровой? Как SVG используется в веб-разработке?