Что такое SVG и когда его лучше использовать вместо растровых изображений?

SVG (Scalable Vector Graphics) — векторный формат на основе XML. Изображение описывается фигурами и путями, поэтому одинаково чётко выглядит при любом масштабе.

<svg width="100" height="100" viewBox="0 0 100 100" aria-label="Круг">
  <circle cx="50" cy="50" r="40" fill="tomato" />
</svg>

Преимущества

• Масштабируется без потери качества и обычно весит мало.
• Стилизуется через CSS (fill, stroke) и анимируется (CSS, SMIL, JS).
• Элементы доступны в DOM: на них можно вешать обработчики.
• Хорошо сжимается gzip/brotli, текст внутри индексируется.

Ограничения

• Не подходит для фотографий и сложных текстур — файл раздувается.
• Много узлов (тысячи) замедляют рендеринг: для таких случаев используют canvas.
• Встроенный SVG из недоверенных источников может содержать скрипты — его нужно санитизировать.

Способы подключения

• <img src="icon.svg"> — кэшируется, но стилизовать внутренности нельзя.
• Inline <svg> — полный контроль через CSS/JS, но увеличивает HTML.
• background-image в CSS — для декора.
• <use href="#icon"> — спрайт из повторяемых иконок.

Коротко для собеседования

SVG — векторный XML-формат для иконок, логотипов и схем: не теряет качество, стилизуется CSS и анимируется. Для фото и тяжёлых сцен выбирают растр или canvas; inline-SVG даёт управление, <img> — кэш.