SVG vs PNG: когда использовать вектор, а когда растр
SVG и PNG решают разные задачи. SVG описывает векторную геометрию и также может содержать встроенный растр; PNG хранит фиксированную сетку пикселей. Выбор зависит от исходного изображения, границ безопасности, доступности, процесса редактирования, особенностей отрисовки и измеренного размера файла.
Главное различие между SVG и PNG
Различие SVG и PNG напрямую соответствует более общему различию между векторной и растровой графикой.
SVG (Scalable Vector Graphics) основан на XML и может описывать фигуры, контуры, текст, фильтры, стили и встроенные ресурсы. Векторные части перерисовываются в итоговом размере, но чёткость всё равно зависит от геометрии, обводок, эффектов, выравнивания по пикселям и встроенных растровых изображений.
PNG (Portable Network Graphics) — растровый формат с фиксированной сеткой пикселей. Увеличение требует пересчёта и может дать размытость или заметные пиксели. Если исходник намного больше области показа, передача и декодирование требуют лишней работы, если только адаптивные варианты не позволяют браузеру выбрать подходящий файл.
Это различие влияет на всё: размер файла, масштабирование, процесс редактирования и типы изображений, для которых лучше подходит каждый формат.
Когда использовать SVG
SVG — сильный кандидат для проверенной векторной графики, когда понятны требования к безопасности, доступности, отрисовке и способу встраивания:
- Логотипы — один чистый SVG может использоваться в разных итоговых размерах без увеличения растра. Для очень маленьких знаков всё же может понадобиться оптическое упрощение, корректировка обводок или отдельный вариант.
- Значки — значки интерфейса, навигации и социальных сетей могут совместно использовать геометрию и стили. SVG бывает меньше набора растровых разрешений, но сложные контуры или многократная встроенная разметка могут дать обратный результат.
- Иллюстрации и схемы — технические схемы, блок-схемы, карты и инфографика с чистыми линиями и плоскими цветами. Текст SVG остаётся выделяемым, если хранится как текст, но доступность и индексирование требуют правильной разметки и встраивания.
- Анимация — элементы SVG можно анимировать с помощью CSS, JavaScript или механизмов SVG. Нужно учитывать предпочтения движения, нагрузку на процессор, CSP, доступность и сложность взаимодействия.
- Фавиконы — современные основные браузеры поддерживают SVG-фавиконы, но полный набор может включать растровые или ICO-варианты для других потребителей. Создать распространённые варианты из поддерживаемого изображения можно в генераторе фавиконов.
SVG широко поддерживается современными браузерами и распространёнными графическими инструментами. Популярность не означает, что конкретный ресурс обязательно должен быть векторным: сравнивайте сложность, безопасность, стратегию кэширования, доступность и качество отрисовки.
Когда использовать PNG
PNG — сильный кандидат, когда важны растровые пиксели без потерь или альфа-прозрачность, а итоговый размер укладывается в бюджет загрузки:
- Фотографии с прозрачностью — PNG поддерживает альфа-канал и кодирование пикселей без потерь, но детализированная фотография может быть большой. Сравните WebP или AVIF с альфа-каналом, если они поддерживаются; без прозрачности проверьте JPEG и современные форматы для фотографий.
- Снимки экрана — они содержат растровый интерфейс, сглаженный текст и градиенты. PNG может сохранить закодированные значения пикселей, а цветовые профили, метаданные, изменение размера и преобразование палитры остаются отдельными вопросами.
- Сложная многоцветная графика — детализированные цифровые рисунки, текстуры и фотореалистичные иллюстрации, которые нельзя упростить до чистых векторных фигур.
- Растровая графика с текстом — когда требуется точная отрисовка краёв текста на уровне пикселей, PNG не создаёт артефакты, свойственные форматам с потерями.
Размер файла и производительность
Для значков, логотипов и простых иллюстраций оптимизированный SVG или растровый вариант может оказаться меньше — это зависит от геометрии, размеров, повторов, сжатия и стратегии кэширования:
| Тип графики | PNG | SVG | Экономия |
|---|---|---|---|
| Простой значок | Один размер растра на каждый вариант | Часто компактная векторная геометрия | Измерьте оба |
| Логотип | Может потребоваться несколько разрешений | Часто хорошо подходит при наличии векторного исходника | Измерьте оба |
| Набор значков | Отдельные файлы могут добавить запросы и байты | У спрайта, внешних файлов и встроенной разметки разная стоимость кэширования | Измерьте всю страницу |
| Простая иллюстрация | Размер растёт с числом пикселей и детализацией | Размер растёт со сложностью контуров, стилей и фильтров | Зависит от содержимого |
Текстовое сжатие Brotli или gzip может уменьшить объём передачи SVG; результат зависит от разметки и настроек сервера. Сравнивайте сжатые байты при передаче, а не только размер исходного файла на диске.
Встроенный SVG не требует отдельного запроса, но увеличивает HTML и не кэшируется независимо. Внешний SVG может использовать кэш браузера. Векторной геометрии обычно не нужны варианты для разных плотностей экрана, однако сложному SVG или файлу со встроенным растром всё ещё может понадобиться адаптивная обработка. Выбирайте способ встраивания по измерениям всей страницы.
Для фотографий и детализированных текстур векторная трассировка обычно создаёт чрезмерно сложную геометрию или убирает детали. Встраивание исходного растра в SVG добавляет контейнер и часто накладные расходы base64, но не делает изображение векторным. Используйте подходящий растровый формат: PNG, JPEG, WebP или AVIF.
SVG vs PNG: сводная таблица
| Характеристика | SVG | PNG |
|---|---|---|
| Тип изображения | Векторное (фигуры и контуры) | Растровое (сетка пикселей) |
| Масштабирование | Векторные части перерисовываются; детали отрисовки всё ещё важны | Фиксированная сетка пикселей; увеличение может дать размытость |
| Прозрачность | Да | Да (альфа-канал) |
| Фотографическое содержимое | Обычно не подходит, кроме встроенного растра | Вариант без потерь с альфа-каналом; сравнивайте размер загрузки |
| Значки и логотипы | Отлично при наличии чистого проверенного векторного исходника | Подходит в заранее подготовленных пиксельных размерах |
| Анимация | Да (механизмы SVG/CSS/JS) | Расширение APNG |
| Редактирование кодом | Да (на основе XML) | Нет |
| Текст и доступность | Возможны при правильной разметке и встраивании | Нужен окружающий текст или эквивалент alt |
| Поддержка браузерами | Современные основные браузеры; правила встраивания различаются | Очень широкая |
| Размер файла | Зависит от геометрии и разметки | Зависит от размеров и содержимого |
Практический пример: обновление сайта компании
Представьте, что вы обновляете сайт компании. У вас есть фирменный логотип, 30 навигационных и функциональных значков, главная фотография и несколько снимков экрана продукта. Форматы можно распределить так:
- Логотип → SVG, если есть чистый векторный исходник. Один проверенный файл подходит для нескольких итоговых размеров; протестируйте обводки и читаемость в маленьком размере.
- Набор значков → SVG-спрайт или система компонентов позволяют повторно использовать геометрию. Проверьте доступность, кэширование, CSP и общий объём переданной разметки.
- Главная фотография → сравните JPEG, WebP и AVIF при одинаковых размерах и видимом качестве и сохраните необходимые аудитории запасные варианты. См. руководство по оптимизации изображений.
- Снимки экрана продукта → начните с PNG, если нужно сохранить декодированные пиксели, затем сравните другие варианты без потерь и приемлемую версию с потерями.
Конвертация между SVG и PNG
Поддерживаемые файлы можно преобразовать прямо в браузере без установки программ. Vizua обрабатывает выбранный файл в браузере и не отправляет его на наш сервер обработки изображений; службы самой страницы при этом могут использовать сеть:
- SVG в PNG — растрировать поддерживаемый SVG в доступном масштабе и проверить результат
- Векторизовать изображение — трассировать поддерживаемый растр в приблизительные контуры SVG; исходная векторная геометрия не восстанавливается
- Генератор фавиконов — создать распространённые варианты фавикона из поддерживаемого исходного изображения
Более подробно о подходящих размерах и бюджете байтов для конкретных страниц рассказано в руководстве по размерам файлов изображений.
Часто задаваемые вопросы
Может ли SVG полностью заменить PNG?
Нет. SVG отлично подходит для графики, значков и иллюстраций, но неэффективно представляет фотографии. Фотография в SVG будет либо огромной при встраивании растровых данных в base64, либо потеряет детали при трассировке в упрощённые фигуры. Используйте SVG для подходящего векторного содержимого, а PNG, JPEG или WebP — для фотографий и сложных растровых изображений.
Безопасно ли использовать SVG на сайтах?
SVG — активное содержимое на основе XML, которое может включать скрипты, обработчики событий, внешние ссылки, CSS, фильтры и другие возможности. Относитесь к недоверенному SVG как к коду: проверяйте по списку разрешённых элементов, очищайте поддерживаемым инструментом, отдавайте с подходящим типом содержимого и изоляцией и применяйте CSP. Надёжный источник снижает риск, но не заменяет проверку.
Почему мой SVG выглядит размытым?
Векторная геометрия перерисовывается в разных размерах без увеличения растра, но SVG всё равно может выглядеть мягким из-за дробного выравнивания, обводок, фильтров, преобразований, сглаживания, встроенного растра или дисплея. Проверьте viewBox, итоговые размеры, поведение обводок и наличие растрового содержимого.
Что выбрать для значков сайта: SVG или иконочный шрифт?
SVG часто удобен: каждому значку можно задать доступное имя или скрыть его, если он декоративный, а стили ограничить нужной областью. Но SVG не становится автоматически быстрее или доступнее: встроенная разметка увеличивает HTML, внешние спрайты можно кэшировать, а ARIA нужно настроить правильно. Сравнивайте требования конкретной системы значков.
Можно ли преобразовать PNG в SVG?
Да. Инструмент Vizua «Векторизовать изображение» преобразует растровые PNG и JPEG в приблизительные контуры SVG. Лучше всего он работает с логотипами, значками и простыми иллюстрациями с ограниченной палитрой и чёткими краями, а не со сложными фотографиями.
Преобразуйте свои изображения
Регистрация не нужна. Выбранный файл обрабатывается в браузере и не отправляется на наш сервер обработки изображений.