SVG или PNG для логотипа — что выбрать
Вы скачали логотип, вставили в шапку сайта, порадовались, а через неделю заметили, что на телефоне с хорошим экраном он стал слегка размытым, будто снят через запотевшее стекло. Или наоборот: логотип чёткий, но страница грузится вечность, потому что «картинка» весит два мегабайта. И то и другое — последствие одного выбора, который делают на автомате: SVG или PNG. Оба формата на экране выглядят одинаково, но устроены так по‑разному, что перепутать их значит заложить проблему, которая всплывёт позже.
SVG — вектор: логотип описан формулами (линии, кривые, заливки), поэтому масштабируется без потери качества и легко перекрашивается. PNG — растр: сетка пикселей фиксированного размера, зато формат понимает вообще любая программа, включая старую почту и офисные пакеты. Правильная модель проще: исходник и его отпечаток. Держите логотип в SVG и получайте из него PNG нужного размера.
Что лежит внутри файла
Чтобы выбирать осознанно, нужно понять одну вещь: SVG и PNG хранят принципиально разное. Один хранит инструкцию, как нарисовать, другой — уже готовый результат рисования. Всё остальное вытекает из этого различия.
SVG (Scalable Vector Graphics) — текстовый XML‑файл с математическим описанием фигур: координаты точек, кривые Безье, заливки и обводки. Когда браузер или редактор открывает SVG, он вычисляет пиксели заново, прямо сейчас, под конкретный размер экрана. Поэтому линия остаётся идеально чёткой хоть при 16 пикселях, хоть при 1600: инструкцию можно выполнить в любом масштабе.
PNG (Portable Network Graphics) устроен наоборот. Это растр: изображение представляет собой фиксированную сетку пикселей, у каждого записан свой цвет. Сетка задаётся один раз, в момент сохранения, и больше не меняется. Пока вы показываете PNG в исходном размере или меньше, всё чётко. Но стоит увеличить его сверх заложенного размера, и программе приходится достраивать несуществующие пиксели, угадывая цвет между соседями. Отсюда и то самое «мыло» на хорошем экране: логотип 200 пикселей растянули на 400, а взять недостающие данные неоткуда.
Именно из этой пары «инструкция против отпечатка» вырастают все практические отличия, ради которых и затевается выбор.
Что из этого следует на практике
Раз SVG хранит инструкцию, он ничего не теряет при масштабировании: каждый размер вычисляется с нуля. Раз PNG хранит готовую сетку, он может только терять при увеличении. Это первое и главное следствие, а за ним тянутся остальные.
Инструкция описывает форму компактно: «круг радиусом 45, залить зелёным» занимает несколько десятков байт, тогда как честная сетка пикселей того же логотипа весит в разы больше. Поэтому простой логотип в SVG обычно легче своего же PNG. Инструкция ещё и редактируема: цвет хранится отдельным значением fill, его можно поменять, не трогая форму (как это делается за пару кликов, показывали в разборе как изменить цвет логотипа). В PNG цвет впечатан в каждый пиксель и перекраска означает перерисовку.
Но у отпечатка есть своя сила, которую инструкция не повторит. PNG понимает буквально любая программа, от древнего почтового клиента до офисного пакета, потому что растр появился раньше и стал общим знаменателем. Ещё PNG честно хранит то, что вектору не описать формулой: фотографические градиенты, тени, сложные текстуры. Там, где SVG пришлось бы городить тяжёлую конструкцию, PNG просто записывает готовые пиксели.
Свести всё это в одну картину проще всего таблицей: здесь свойства просто существуют рядом и сравнивать их удобно построчно.
| Критерий | SVG | PNG |
|---|---|---|
| Тип | Вектор (формулы) | Растр (пиксели) |
| Масштабирование | Без потери качества, любой размер | Только вниз без потерь; вверх — размытие |
| Вес файла | Обычно меньше для простых логотипов | Больше, особенно в высоком разрешении |
| Перекраска | Меняете значения fill | Нужен редактор, перерисовка пикселей |
| Прозрачный фон | Да, нативно | Да, через альфа‑канал |
| Поддержка в почте и мессенджерах | Не везде корректно | Везде |
Редактирование в Figma /Illustrator | Полное: форма, узлы, цвет | Ограничено: картинка целиком, без отдельных объектов |
| Анимация | Возможна (SMIL, CSS) | Нет, нужен GIF или видео |
| Печать в типографии | Подходит без ограничений | Не подходит выше исходного разрешения |
Из таблицы видно, что SVG выигрывает почти по всем строкам. Возникает логичный вопрос: зачем тогда вообще PNG, если вектор объективно лучше? Ответ прячется в единственной строке, где стоит «не везде», то есть в поддержке.
Где побеждает SVG
Везде, где логотип показывает браузер, вектор становится очевидным выбором, и причина ровно та, с которой мы начали. На сайте SVG весит меньше и остаётся чётким на любом экране, включая Retina: отдельные @2x-версии подключать не придётся. В редакторах — Figma, Sketch, Illustrator — вектор можно разобрать на части, перекрасить, подвигать узлы; при работе над макетом в этом и состоит смысл формата. В типографии без вектора вообще нельзя: печать увеличивает изображение до размеров баннера, и только SVG переживёт это без потерь. Анимация логотипа (плавное появление, поворот, смена цвета) живёт прямо в SVG через CSS, без отдельного видеофайла.
Общий знаменатель простой: если изображение показывает программа, умеющая читать инструкцию, отдавайте ей инструкцию. Проблемы начинаются там, где такой программы нет.
Где нужен PNG
А нет её в самых консервативных углах цифрового мира. Почта — главный из них: часть клиентов, особенно корпоративные на базе Outlook
, не рендерит SVG вообще, и получатель увидит пустое место вместо логотипа. Презентации в PowerPoint и Google Slides работают с вектором через раз и теряют часть эффектов. Соцсети при загрузке аватарки или обложки всё равно потребуют растр: платформа сама пережмёт файл в свой формат. Наконец, сложные логотипы с фотореалистичными градиентами и текстурами в SVG распухают так, что растр оказывается и легче, и надёжнее.
Есть и технический случай, где PNG остаётся единственным вариантом. Если логотип встраивается в готовое изображение, например в OG‑картинку для превью в соцсетях, вокруг него уже растр, и вставлять туда вектор бессмысленно.
Заметьте: во всех этих случаях мы берём PNG потому, что среда не умеет в вектор. В этом и состоит ключ ко всей путанице, а заодно к типовым ошибкам.
Три ошибки, которые растут из одного непонимания
Почти все проблемы с форматами сводятся к одному: отпечаток используют как исходник или наоборот. Отсюда три классических промаха.
Самая частая ошибка — вставить в шапку PNG‑логотип на 512 пикселей и растягивать его CSS‑ом. На обычном экране это незаметно, а на Retina логотип «плывёт». Если для логотипа существует SVG, используйте в вебе всегда именно его, каким бы ни был размер макета.
Обратный промах — вставить SVG в письмо рассылки или презентацию. Часть почтовых клиентов не покажет ничего, и вместо логотипа получатель увидит пустоту. Для писем, слайдов и офисных документов берите PNG: ровно тот случай, где отпечаток надёжнее инструкции.
Если единственный файл — PNG 200×200, а нужен баннер 2000×2000, растягивание убьёт качество: пиксели размножатся без пересчёта. Выход один — найти логотип в SVG или перевести его в вектор; как это делается и где подводные камни, разбирали в статье как перевести логотип в вектор.
Все три ошибки исчезают, если держать в голове иерархию: SVG — исходник, PNG — производная от него. А раз так, то и конвертация должна идти в одну сторону.
Как получить PNG из SVG и почему не наоборот
Правильное направление ведёт от инструкции к отпечатку. Из SVG можно в любой момент отрисовать PNG любого размера и остаться в чётком качестве. В нашем каталоге на каждой странице логотипа обе кнопки — SVG и PNG — уже готовы, конвертировать вручную ничего не нужно. А если понадобился PNG нестандартного размера, откройте SVG в Figma или прямо в браузере и экспортируйте в нужном разрешении: так вы получите чёткую картинку под задачу. Полный разбор пяти способов лежит в статье «Как конвертировать SVG в PNG и обратно».
Обратный путь, из PNG сделать SVG, как раз тот самый компромисс, которого стоит избегать. Программа не знает исходных кривых и может только автоматически обвести контуры (это называется трассировкой) или предложить нарисовать логотип заново вручную. Первое портит сложные формы, второе стоит денег. Поэтому и звучит правило «храните исходник в векторе»: восстановить его из растра куда дороже, чем сгенерировать растр из вектора. Если у вас на руках только PNG, спасение описано в разборе «Как перевести логотип в вектор».
Что делать, когда PNG сохранили поверх исходника
Отдельный случай, который встречается чаще, чем кажется: вектор существовал, но потерялся. Дизайнер сдал проект, ушёл, и в папке компании остались только PNG для сайта. Формально логотип есть, фактически бренд лишился исходника и теперь при каждой новой задаче упирается в потолок разрешения.
Лечение начинается с поиска и только потом доходит до трассировки. Проверьте по очереди: архив переписки с дизайнером, облако компании, пресс‑кит на собственном сайте (туда вектор часто выкладывали для журналистов), файлы у типографии, которая печатала визитки. Вектор находится в одном из этих мест примерно в половине случаев, и это дешевле любой перерисовки. Заодно сразу положите найденный SVG в место, откуда его не унесёт следующая смена подрядчика.
SVG и PNG не единственные форматы
Стоит держать в голове, что этими двумя мир логотипов не ограничивается. Рядом живут векторные AI, EPS и PDF: их используют профессиональные дизайнеры и типографии для печати. Есть и растровый JPG, который в отличие от PNG не умеет прозрачность и потому для логотипов почти не годится, зато незаменим для фотографий. Когда какой из них уместен и чем они отличаются от нашей пары, подробно разложено в обзоре «В каком формате должен быть логотип».
Что выбрать в итоге
Вернёмся к тому размытому логотипу из начала. Его беда в том, что отпечаток попытались использовать как исходник: растянули готовую сетку пикселей туда, где нужна была инструкция. Держите эту иерархию в голове, и выбор перестанет быть гаданием. SVG — исходник, из которого рождается PNG любого размера. PNG — производная для тех сред, где вектор не открывается: почты, презентаций, части соцсетей и логотипов со сложными эффектами. Сомневаетесь — берите SVG: из него всегда можно получить PNG, а обратная дорога куда дороже.
Все логотипы в каталоге Trace Logo's доступны сразу и в SVG, и в PNG: исходник и производная в одном месте, скачивайте бесплатно.