Чем отличаются форматы SVG, PNG и JPEG и для каких сценариев лучше подходит каждый из них?

Изображения в вебе делятся на два принципиально разных класса: векторные и растровые. Векторные описывают картинку математически — через линии, кривые и заливки, а растровые хранят её как сетку пикселей. Понимание этой разницы определяет, какой формат выбрать в конкретной ситуации.

SVG

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

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

PNG

PNG — растровый формат со сжатием без потерь. Поддерживает альфа-канал (прозрачность) и хорошо передаёт резкие границы и текст. Минус — большие размеры файлов для фотографий.

JPEG

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

Когда что применять

• SVG — иконки, логотипы, диаграммы, элементы интерфейса.
• PNG — скриншоты, изображения с прозрачностью, графика с чёткими краями.
• JPEG — фотографии, большие изображения с плавными градиентами.

Итог: выбирайте формат исходя из природы изображения — вектор для масштабируемой графики, PNG для точности и прозрачности, JPEG для фотографий с приоритетом на размер файла.