SVG или PNG для логотипа: какой формат использовать (и когда)

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

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

PNG (Portable Network Graphics) — это растровое изображение: фиксированная сетка пикселей с заданной шириной и высотой. Он поддерживает прозрачность, поэтому логотип чисто ложится на любой цвет, но при показе крупнее, чем был экспортирован, пиксели растягиваются, а края смягчаются.

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

Сделайте SVG своим исходным файлом и вариантом по умолчанию для всего, что на экране:

• Сайты и веб-приложения — логотип в шапке, футере и главном экране. Современные браузеры отрисовывают SVG идеально чётко на любом экране, включая retina и 4K.
• Везде, где логотип должен масштабироваться, — адаптивные макеты и экраны высокой плотности.
• Как единственный источник, из которого экспортируется всё остальное.
• Фавиконы, поскольку современные браузеры принимают SVG-фавикон.

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

Используйте PNG, когда нужен растр фиксированного размера или площадка не принимает SVG:

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

SVG и PNG: сравнение

А что насчёт EPS, PDF, AI — и JPG?

SVG и PNG покрывают веб, но полный пакет логотипа обычно включает ещё несколько форматов:

• PDF — векторный формат, который принимает почти каждая типография и офисный инструмент. Это самый безопасный файл для передачи в типографию.
• EPS — устаревший векторный формат, который некоторые типографии всё ещё запрашивают. Воспринимайте его как экспорт для совместимости с печатью, а не как повседневный формат.
• AI (Adobe Illustrator) — рабочий/исходный файл. Если ваш логотип делал дизайнер, храните AI (или SVG) как редактируемый оригинал в архиве.
• JPG — избегайте его для логотипов. У JPG нет прозрачности, поэтому вокруг знака появляется фон-плашка, а его сжатие с потерями смазывает чёткие края. Он создан для фото, а не для логотипов.

Можно ли конвертировать PNG обратно в SVG?

Не по-настоящему чисто. Конвертация PNG в SVG означает трассировку пикселей в формы, что редко совпадает с оригиналом и часто даёт неопрятные контуры. Если у вас есть SVG, всегда начинайте с него. Если у вас есть только PNG низкого разрешения, обычно лучше пересоздать знак как вектор, чем автоматически трассировать его.

А что насчёт фавиконов и значков приложений?

Фавикон — это просто очень маленькая версия вашего логотипа, поэтому экспортируйте его из SVG: SVG-фавикон для современных браузеров плюс мелкие PNG (например, 32×32 и 180×180 Apple touch icon) для широкой совместимости. То же правило действует для значков приложений: генерируйте размеры, которые требует каждая платформа, из векторного исходника. См. как сделать фавикон из логотипа.

Короткий ответ

Проектируйте и храните логотип как SVG, используйте его в вебе, экспортируйте PNG для растровых размещений фиксированного размера, передавайте типографиям PDF или EPS и полностью пропускайте JPG. Сохраняйте векторный исходник — и вы сможете получить любой размер или формат позже без потери качества.

Создайте логотип и экспортируйте SVG, PNG и фавикон

Часто задаваемые вопросы

SVG лучше, чем PNG, для логотипов?

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

Теряет ли SVG-логотип качество при масштабировании?

Нет. SVG описывает формы математически, поэтому перерисовывается чётко в любом размере — от фавикона до билборда — никогда не становясь размытым или пиксельным.

Почему мой PNG-логотип выглядит размытым?

У PNG фиксированный размер в пикселях. Показ его крупнее, чем было экспортировано, или на экране высокой плотности растягивает эти пиксели и смягчает края. Экспортируйте PNG большего размера или используйте SVG.

Стоит ли использовать JPG для логотипа?

Нет. У JPG нет прозрачности (поэтому вокруг знака появляется фон-плашка), и он сжимается с потерями, что смазывает чёткие края знака. Используйте для логотипов SVG или PNG, но не JPG.

Какой формат передать типографии?

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