В чем разница между SVG и другими форматами изображений

«В чем разница между SVG и другими форматами изображений» — вопрос из категории HTML, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

SVG (Scalable Vector Graphics) — векторный формат, основанный на XML. В отличие от растровых форматов (JPEG, PNG, GIF), SVG использует математические формулы для описания фигур, что позволяет масштабировать изображение без потери качества.

Ключевые отличия:

  • Масштабируемость: SVG сохраняет четкость на любом размере, растровые изображения пикселизируются.
  • Вес: SVG часто легче для простых графиков и иконок, но может быть тяжелее для сложных сцен.
  • Редактируемость: SVG можно изменять через CSS/JS, встраивать прямо в HTML.

Пример встраивания:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Когда использовать:

  • Иконки, логотипы, графики.
  • Анимации и интерактивные элементы.
  • Адаптивный дизайн.

Для фотографий лучше подходят JPEG/PNG из-за детализации и сжатия.