Один и тот же логотип в навигации сайта может быть высотой 24 пикселя, а на выставочном баннере — расширяться до двух метров. Выбор между PNG и SVG начинается со сценария: в вебе и продуктовых интерфейсах приоритет у SVG — знак записан путями и при любом размере перерисовывается программой; входам, принимающим только растр (аватары соцсетей, часть офисных документов), сдавайте прозрачный PNG; постеры, вывески и печатные материалы — SVG или экспортированный из него вектор, без мыла при увеличении. Если на руках пока только PNG, всё переделывать не нужно: сначала выясните формат, который требует сценарий, и доберите недостающий файл.
Главное
- Для веба, интерфейсов и всего, что многократно масштабируется и перекрашивается, — SVG: графика записана путями, при увеличении перерисовывается заново, края не плывут.
- Для входов, принимающих только растр (аватары соцсетей, часть офисных программ), — прозрачный PNG; добиваться поддержки SVG от платформы не нужно.
- Графическому знаку и логотипу стоит иметь SVG-мастер-файл; фото-маскотам и брендовым картинкам со сложными текстурами — PNG высокого разрешения.
- SVG не обязательно меньше PNG: размер зависит от сложности графики, и выбирают по назначению, а не по объёму файла.
Начните выбор с трёх сценариев
Три самые частые задачи покрывают почти все пути файлов логотипа.
Знак в навигации сайта. Логотипы в шапке, подвале и мобильном интерфейсе показываются в разных размерах на экранах разной плотности. SVG здесь идеален: браузер рисует по путям в реальном времени — от ширины маленькой иконки до широкого подвального баннера всё остаётся резким; сменить цвет можно прямо в файле или в коде, а тот же файл без потерь уходит дизайнеру на доработку.
Аватар соцсети малого размера. Загрузчики аватаров обычно принимают только JPG и PNG — готовьте прозрачный PNG: когда платформа обрежет аватар в круг или квадрат, вокруг знака не появится белый квадрат. Отображается аватар небольшим, растровой резкости хватает с запасом, SVG в этом сценарии не нужен.
Постеры и печатные материалы большого размера. Постеры, ролл-апы и вывески увеличивают знак в десятки раз. SVG решает масштабирование у истока: пути не зависят от разрешения, а размер вывода определяет потребитель. Маленький PNG при растяжении даёт мыло и лесенку — именно этому сценарию и нужен векторный файл.
В чём проявляется разница PNG и SVG
Корневая разница — способ записи графики. PNG — пиксельная сетка: каждая точка хранит цвет, и у файла есть фиксированное число пикселей; при увеличении сверх исходного размера программа лишь растягивает имеющиеся пиксели, края плывут и появляются ступеньки. SVG описывает графику путями и фигурами: откуда начинается линия, как изгибается кривая, каким цветом залита область; при увеличении программа перерисовывает картинку по описанию, и края остаются гладкими.
Прозрачный фон поддерживают оба формата, но по-разному. PNG хранит пустоты вокруг знака прозрачным пиксельным каналом; у SVG «подложки» нет вообще — графика и есть набор путей. Крупнее всего разница в дальнейшем редактировании: SVG открывается целиком под перекраску, правку опорных точек, разбор и пересборку; PNG обрабатывается попиксельно, и смена одного цветового пятна означает ретушь области в растровом редакторе.
Размер файла часто понимают неверно. Для простой графики SVG записывает несколько путей и обычно невелик; насыщенный градиентами и шумом растр после векторизации распадается на массу мелких путей и может весить куда больше исходного PNG. Верно не утверждение «SVG меньше», а «SVG простых фигур мал».
Таблица выбора формата по сценарию
Тип материала определяет выбор не хуже параметров формата. Рекомендации по трём частым типам брендовой графики:
| Тип материала | Особенности графики | Рекомендация | Причина |
|---|---|---|---|
| Графический знак, логотип | Чёткие контуры, немного цветовых пятен | SVG-мастер-файл плюс прозрачный PNG | Пути чисты и редактируемы, SVG покрывает масштабирование, PNG страхует входы без SVG |
| Фото-маскот | Сплошные градиенты, богатые тени | PNG высокого разрешения | Векторизация даст массу мелких путей, которые тяжело редактировать, и теряется главный смысл вектора — произвольное масштабирование через несколько путей |
| Брендовая картинка со сложными текстурами | Много деталей, зернистость | Растр как основа, точечная векторизация при необходимости | Целиком конвертировать обычно невыгодно; нужен больший размер — сначала переэкспортируйте растр в высоком разрешении |
Достаточно одного правила: чем чётче контуры и меньше цветовых пятен, тем выгоднее векторизация; чем ближе картинка к фотографии, тем правильнее оставить её в растре.
Как добрать SVG, когда есть только PNG
Если SVG нужен, сама конвертация — лишь малая часть дела. Загрузите PNG в Изображение в вектор: инструмент принимает PNG, JPG и WebP от 256 пикселей по ширине и высоте, после входа конвертирует по одному файлу за раз, готовый SVG скачивается. Полный процесс с экранами интерфейса на каждом шаге — в туториале той же серии «Как конвертировать PNG и JPG в SVG»; здесь он не повторяется.
После конвертации результат всё равно приводится в порядок по назначению. Панель результата даёт увеличение 1×, 2×, 4× — перед сдачей смотрите кривые, вырезы и тонкие линии. Две вещи примите заранее: текст станет контурами, и конвертация не вернёт редактируемый исходный шрифт — новую подпись набирают в дизайн-инструменте заново; качество краёв задаёт исходник, сильно сжатый PNG даст шероховатые края — сначала возьмите более чёткий оригинал. Методы подготовки таких исходников отдельно разобраны в статье «Что делать, если края логотипа после перевода в вектор шероховатые».
Как собрать пакет передачи файлов бренда
Когда формат решён, разложите логотип в набор именованных файлов — и любая сторона получит всё сразу, без повторных просьб. Минимальный рабочий пакет выглядит так:
| Файл | Назначение | Пример имени |
|---|---|---|
| SVG-мастер-файл | Единственный источник для веба, материалов, увеличения и правок | acme-logo.svg |
| Прозрачный PNG | Аватары соцсетей, офисные документы и другие входы только под растр | acme-logo-transparent.png |
| Предпросмотр на тёмном | Проверка читаемости знака на тёмном фоне | acme-logo-preview-dark.png |
| Предпросмотр на светлом | Проверка подачи знака на светлом фоне | acme-logo-preview-light.png |
Имена — единый префикс плюс суффикс назначения; при смене версии обновляйте номер, а не придумывайте новое имя, иначе в пакете рано или поздно уживутся logo-final-2.png и logo-итоговый.png. Превью на тёмном и светлом кладите в один каталог: получатель с первого взгляда проверит знак на обоих фонах.
Печатные файлы — отдельная история. Когда типография требует векторный PDF, конкретный цветовой режим или вылеты, производственные файлы готовит соответствующий дизайн-процесс: SVG остаётся источником, конвертация и экспорт делаются в дизайн-программе, а цветовые стандарты сверяются с типографией пункт за пунктом. Инструмент «Изображение в вектор» выдаёт SVG и печатные производственные файлы не создаёт.
Часто задаваемые вопросы
SVG всегда меньше PNG?
Нет, размер зависит от сложности содержимого. SVG простой графики — это несколько путей, обычно маленький файл; растр, богатый градиентами, тенями и шумом, после конвертации даст массу мелких путей и может весить даже больше. Критерий выбора — назначение и потребность в масштабировании, а не объём.
PNG мутнеет при увеличении — обязательно переводить в вектор?
Смотрите, что ждёт логотип дальше. Разовое увеличение — достаточно переэкспортировать PNG в большем разрешении; SVG стоит добрать, когда нужны постоянные масштабирования, перекраска целиком, печать или файл в роли долгосрочного мастер-файла. Фото-логотип и после конвертации даст плохо редактируемые мелкие пути — практичнее держать его растром высокого разрешения.
Типография просит PDF — что делать?
Выполните требования типографии соответствующим дизайн-процессом: SVG-мастер-файл открывается в дизайн-программе и экспортируется в указанный тип PDF; цветовой режим, вылеты и прочие параметры сверяются с типографией пункт за пунктом. Инструмент «Изображение в вектор» выводит SVG; производственный PDF для печати готовится на дизайн-этапе.
Когда есть только PNG — сначала доберите SVG
Начните с недостающего пункта пакета: если есть только PNG, сначала доберите SVG через Изображение в вектор, проверьте его в превью на тёмном и светлом фоне и решите, годится ли он на роль мастер-файла. После этого шага у трёх сценариев — сайта, аватара и постера — будут файлы своих форматов.
