В чем разница между SVG и PNG?

Разница между SVG и PNG

SVG и PNG — два совершенно разных формата изображений, каждый с собственными преимуществами и недостатками.

Основные различия

PNG (Portable Network Graphics):

• Растровый формат (состоит из пикселей)
• Хранит цвет каждого пикселя
• Фиксированный размер и разрешение
• Сжимается без потери качества (lossless)

SVG (Scalable Vector Graphics):

• Векторный формат (состоит из математических кривых и форм)
• Хранит инструкции рисования (линии, круги, пути)
• Масштабируется без потери качества на любой размер
• Это по сути XML-файл

Синтаксис и примеры

PNG — просто файл:

<img src="logo.png" alt="Logo" />

Это бинарный файл, который браузер просто отображает.

SVG — может быть встроен напрямую в HTML:

<!-- Встроенный SVG -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="blue" />
  <rect x="10" y="10" width="30" height="30" fill="red" />
</svg>

Или как файл:

<img src="logo.svg" alt="Logo" />

Масштабирование: главное отличие

PNG при масштабировании теряет качество:

// PNG 100x100 пикселей, попробуем увеличить
<img src="logo.png" width="500" height="500" />
// Результат: размыто, потеря информации
// Браузер не может додумать детали, которых нет

SVG масштабируется идеально:

// SVG любого размера
<img src="logo.svg" width="100" height="100" />
<img src="logo.svg" width="500" height="500" />
<img src="logo.svg" width="2000" height="2000" />
// Все одинаково четкое, браузер пересчитывает математику

Это критично для отзывчивых дизайнов и высокоплотных экранов (Retina).

Размер файла

PNG:

• Большие файлы для сложных изображений
• 1MB+ для фотографий
• Не зависит от сложности

Photo.png: 2.5 MB (фотография с деталями)
Icon.png:  50 KB (простой иконка)

SVG:

• Маленькие файлы для простых форм
• Может быть огромным для сложной графики
• Зависит от количества деталей и путей

Logo.svg:       2 KB (простой логотип)
Illustration.svg: 150 KB (сложная иллюстрация)
Chart.svg:      500 KB (граф со 1000 точек)

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

SVG идеален для:

• Логотипы
• Иконки
• Графики и диаграммы
• UI элементы
• Анимации
• Масштабируемые диаграммы

<!-- Классический вариант -->
<svg class="icon" viewBox="0 0 24 24">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
</svg>

PNG идеален для:

• Фотографии
• Сложные изображения с много деталями
• Изображения с не четкими границами
• Скриншоты
• Контент изображений от пользователей

<!-- Фотография -->
<img src="photo.png" alt="Beautiful landscape" />

Интерактивность и анимация

SVG поддерживает интерактивность:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="blue" 
    onmouseover="this.setAttribute(fill, red)"
    onclick="alert(Clicked!)" />
</svg>

PNG это просто картинка:

<!-- PNG не может быть интерактивным -->
<img src="image.png" onclick="alert(Clicked!)" />
<!-- Работает клик, но не на отдельные элементы -->

Анимация

SVG с CSS и JavaScript:

<style>
  circle {
    transition: fill 0.3s;
  }
  circle:hover {
    fill: red;
  }
</style>

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

PNG с CSS и JavaScript:

img {
  transition: opacity 0.3s;
}
img:hover {
  opacity: 0.8;
}

SVG анимации часто более плавные и экономные по памяти.

Производительность

PNG:

• Быстро загружается (если маленький размер)
• Просто отображается браузером
• Нет парсинга

SVG:

• Требует парсинга XML
• Может быть медленнее для очень сложных фигур
• Встроенные SVG замедляют парсинг HTML
• Но обычно быстрее для простых иконок

// Оптимально: SVG как файл, не встроенный
<img src="icon.svg" alt="Icon" />

// Менее оптимально: встроенный в HTML
<svg>...</svg>

Прямой сравнительный пример

<!-- ЛОГОТИП: используй SVG -->
<img src="company-logo.svg" alt="Company" />

<!-- ФОТОГРАФИЯ: используй PNG -->
<img src="team-photo.png" alt="Team" />

<!-- ИКОНКА: используй SVG -->
<svg viewBox="0 0 24 24" width="24" height="24">
  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</svg>

<!-- СКРИНШОТ: используй PNG -->
<img src="screenshot.png" alt="Screenshot" />

Доступность и SEO

PNG:

• Нужен alt текст
• Поисковики не понимают содержимое

<img src="logo.png" alt="Company Logo" />

SVG:

• Может содержать текст (индексируется)
• Может иметь title и desc элементы
• Лучше для SEO

<svg>
  <title>Company Logo</title>
  <desc>A blue circle with company name</desc>
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Вывод

• SVG: векторный, масштабируемый, маленький размер для простых форм, интерактивный
• PNG: растровый, фиксированный размер, хорош для фотографий
• В современном фронтенде: SVG для иконок и логотипов, PNG для фотографий и контента
• Лучшее решение: используй оба формата в зависимости от типа контента