В каком формате готовить логотип: SVG, PNG или WebP

Три формата — три разные задачи

SVG, PNG и WebP решают разные проблемы, и вопрос «что лучше» без уточнения задачи не имеет ответа:

• SVG (Scalable Vector Graphics) — векторный формат, логотип описан математическими кривыми, а не пикселями. Масштабируется без потерь на любой размер;
• PNG — растровый формат с поддержкой прозрачности. Логотип — это сетка пикселей фиксированного размера;
• WebP — современный растровый формат от Google, задуманный как замена JPEG и PNG для фотографий и сложных изображений за счёт лучшего сжатия.

Для логотипа, который в основе — плоская векторная графика (текст, простые формы, 1-4 цвета), SVG почти всегда лучший выбор. WebP создавался для другой задачи — там, где важно сжать фотореалистичное изображение с минимальной потерей качества, а не сохранить точность векторных линий.

Таблица сравнения

Когда SVG — правильный выбор

SVG подходит для подавляющего большинства логотипов, которые встречаются на сайтах: текстовый логотип, простой знак, комбинация из 1-4 плоских цветов без сложных теней и градиентов. В этом случае SVG даёт три практических преимущества:

• один файл закрывает все размеры показа — от favicon-подобных элементов до крупного баннера, без отдельной нарезки под ретину;
• файл весит в разы меньше растрового аналога того же визуального качества;
• цвет логотипа можно менять через CSS без пересборки файла — удобно для тёмной темы или сезонного оформления.

Ограничение SVG — сложная графика внутри файла делает его тяжелее и медленнее в отрисовке. Логотип с многослойными градиентами, мягкими тенями или фотографическими вставками в SVG превращается в громоздкий код на сотни строк, который браузеру дороже обработать, чем просто показать готовую картинку.

Когда нужен PNG, а не SVG

PNG остаётся нужен в трёх случаях:

• логотип содержит градиенты, мягкие тени, объёмные эффекты или растровые текстуры — попытка перевести это в вектор даёт файл, который либо огромный по весу, либо визуально отличается от оригинала;
• система, куда встраивается логотип, не поддерживает SVG — это редкость на современных сайтах, но встречается в старых письмах email-рассылок и некоторых интеграциях с внешними сервисами;
• нужен файл фиксированного размера для конкретной цели — иконка приложения, аватар в соцсети, где сервис в любом случае требует растровый файл заданных пикселей.

Логотип для сайта в этом случае готовят в PNG с прозрачным фоном, в размере в 2-3 раза больше видимого на экране — подробный расчёт пикселей под конкретное место показа разобран в материале про размер логотипа для сайта.

Почему WebP почти никогда не нужен для логотипа

WebP — не универсальная замена PNG, а формат, оптимизированный под другой тип контента: фотографии и сложные изображения с большим количеством оттенков, где выигрыш в сжатии заметен и достигает 25-35% по весу против PNG или JPEG того же качества. Логотип — это, как правило, малое количество плоских цветов на небольшой площади, и здесь выигрыш WebP относительно PNG почти исчезает: разница в весе между PNG и WebP-версией логотипа обычно 1-3 КБ, что не влияет на скорость загрузки страницы.

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

Что делать, если логотип получен в JPEG

Логотип в формате JPEG для сайта не подходит категорически — JPEG не поддерживает прозрачность, и вокруг знака появляется белый (или другого цвета) прямоугольник фона, который виден на любом фоне сайта, кроме белого. Если исходник пришёл от дизайнера или клиента в JPEG, есть два пути:

• если фон логотипа однородный (обычно белый) — можно вырезать его через удаление фона в графическом редакторе и пересохранить в PNG. Работает быстро, но края знака могут получить лёгкую окантовку от сжатия JPEG;
• если нужен чистый результат без артефактов — правильнее запросить у дизайнера исходный векторный файл (AI, EPS) или пересобрать логотип с нуля в векторе, если исходника не осталось.

Печать: почему ни один веб-формат не подходит

Для визиток, вывески, наружной рекламы или полиграфии SVG, PNG и WebP не используют — типографии работают с векторными форматами AI, EPS или PDF в цветовой модели CMYK, а не RGB, в которой готовятся файлы для экрана. Попытка отдать в типографию SVG-файл логотипа с сайта иногда срабатывает (некоторые типографии умеют импортировать SVG в Illustrator), но надёжнее сразу иметь отдельный исходник, подготовленный дизайнером специально под печать — с проверкой на CMYK-палитру и минимальными толщинами линий.

Частые вопросы