**
Определения · Различия · Примеры
Формат PNG (Portable Network Graphics) был утверждён в качестве стандарта W3C в 1996 году как замена устаревшему GIF. SVG (Scalable Vector Graphics) стал рекомендацией консорциума в 2001 году.
Ключевые различия в таблице
| Критерий | PNG | SVG |
|---|---|---|
| Тип графики | Растровый (пиксельный) | Векторный (описание формулами) |
| Масштабируемость | Теряет качество при увеличении | Бесконечно масштабируется без потерь |
| Поддержка прозрачности | Полная (альфа-канал) | Полная |
| Анимация | Нет (статичный формат) | Поддерживается через SMIL или CSS |
| Вес файла | Зависит от разрешения и сложности | Зависит от количества элементов |
| Редактирование | Пиксельные редакторы (Photoshop) | Векторные редакторы (Illustrator, Inkscape) |
| Типичное применение | Фотографии, скриншоты, сложная графика | Логотипы, иконки, диаграммы, интерфейсы |
Подробный разбор форматов
PNG — это растровый формат с поддержкой сжатия без потерь. Каждое изображение состоит из фиксированной сетки пикселей. Размер файла напрямую зависит от количества этих пикселей: скриншот в 4К может весить несколько мегабайт. Основное преимущество PNG — точное отображение сложных визуальных сцен, где важна детализация каждого пикселя.
SVG — это текстовый файл на основе XML, описывающий графику командами (линия, круг, путь). Браузер или программа рисует изображение «на лету» согласно этим инструкциям. Поскольку нет привязки к пикселям, одно и то же SVG-изображение может быть отображено на экране смартфона и на рекламном билборде без потери чёткости контуров.
Различие стирается, когда речь идёт о небольших, простых иконках для веба. В этом случае и PNG с высоким DPI, и SVG обеспечат резкость. Однако для адаптивного дизайна, где один элемент должен выглядеть идеально на всех разрешениях, SVG остаётся безальтернативным решением.
Типичные ошибки при выборе
- Использование PNG для логотипа на сайте. Это приводит к размытию на retina-экранах и увеличению количества HTTP-запросов при использовании нескольких размеров.
- Сохранение фотографии в SVG. Векторный формат не предназначен для фотореалистичных изображений. Попытка описать фотографию векторами создаст файл гигантского размера.
- Игнорирование веса сложного SVG. Векторный файл с тысячами узлов и градиентов может быть тяжелее оптимизированного PNG, что негативно скажется на скорости загрузки страницы.
Часто задаваемые вопросы
Что лучше для веба: PNG или SVG?
Выбор зависит от контента. SVG идеален для простой графики: иконок, логотипов, схем. PNG подходит для сложных изображений с множеством деталей и плавными переходами цветов, таких как фотографии и реалистичные иллюстрации.
Можно ли конвертировать PNG в SVG?
Автоматическая конвертация растрового PNG в векторный SVG (трассировка) возможна, но результат часто требует ручной доработки. Программа создаёт множество сложных векторных путей, пытаясь повторить пиксели, что редко даёт чистый и лёгкий файл.
Почему SVG иногда не отображается на сайте?
Причины могут быть в ошибке синтаксиса XML-файла, неправильных настройках сервера (MIME-тип должен быть image/svg+xml) или использовании в коде SVG элементов, которые не поддерживаются старыми браузерами.
**