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 весит меньше и остаётся чётким на любом экране, включая Retina: отдельные @2x-версии подключать не придётся. В редакторах — Figma, Sketch, Illustrator — вектор можно разобрать на части, перекрасить, подвигать узлы; при работе над макетом в этом и состоит смысл формата. В типографии без вектора вообще нельзя: печать увеличивает изображение до размеров баннера, и только SVG переживёт это без потерь. Анимация логотипа (плавное появление, поворот, смена цвета) живёт прямо в SVG через CSS, без отдельного видеофайла.

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

А нет её в самых консервативных углах цифрового мира. Почта — главный из них: часть клиентов, особенно корпоративные на базе Outlook, не рендерит SVG вообще, и получатель увидит пустое место вместо логотипа. Презентации в PowerPoint и Google Slides работают с вектором через раз и теряют часть эффектов. Соцсети при загрузке аватарки или обложки всё равно потребуют растр: платформа сама пережмёт файл в свой формат. Наконец, сложные логотипы с фотореалистичными градиентами и текстурами в SVG распухают так, что растр оказывается и легче, и надёжнее.

Есть и технический случай, где PNG остаётся единственным вариантом. Если логотип встраивается в готовое изображение, например в OG‑картинку для превью в соцсетях, вокруг него уже растр, и вставлять туда вектор бессмысленно.

Заметьте: во всех этих случаях мы берём PNG потому, что среда не умеет в вектор. В этом и состоит ключ ко всей путанице, а заодно к типовым ошибкам.

Почти все проблемы с форматами сводятся к одному: отпечаток используют как исходник или наоборот. Отсюда три классических промаха.

PNG вместо SVG на сайте

Самая частая ошибка — вставить в шапку PNG‑логотип на 512 пикселей и растягивать его CSS‑ом. На обычном экране это незаметно, а на Retina логотип «плывёт». Если для логотипа существует SVG, используйте в вебе всегда именно его, каким бы ни был размер макета.

SVG там, где его не поддерживают

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

Увеличение PNG сверх исходного размера

Если единственный файл — PNG 200×200, а нужен баннер 2000×2000, растягивание убьёт качество: пиксели размножатся без пересчёта. Выход один — найти логотип в SVG или перевести его в вектор; как это делается и где подводные камни, разбирали в статье как перевести логотип в вектор.

Все три ошибки исчезают, если держать в голове иерархию: SVG — исходник, PNG — производная от него. А раз так, то и конвертация должна идти в одну сторону.

Правильное направление ведёт от инструкции к отпечатку. Из SVG можно в любой момент отрисовать PNG любого размера и остаться в чётком качестве. В нашем каталоге на каждой странице логотипа обе кнопки — SVG и PNG — уже готовы, конвертировать вручную ничего не нужно. А если понадобился PNG нестандартного размера, откройте SVG в Figma или прямо в браузере и экспортируйте в нужном разрешении: так вы получите чёткую картинку под задачу. Полный разбор пяти способов лежит в статье «Как конвертировать SVG в PNG и обратно».

Обратный путь, из PNG сделать SVG, как раз тот самый компромисс, которого стоит избегать. Программа не знает исходных кривых и может только автоматически обвести контуры (это называется трассировкой) или предложить нарисовать логотип заново вручную. Первое портит сложные формы, второе стоит денег. Поэтому и звучит правило «храните исходник в векторе»: восстановить его из растра куда дороже, чем сгенерировать растр из вектора. Если у вас на руках только PNG, спасение описано в разборе «Как перевести логотип в вектор».

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

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

Стоит держать в голове, что этими двумя мир логотипов не ограничивается. Рядом живут векторные AI, EPS и PDF: их используют профессиональные дизайнеры и типографии для печати. Есть и растровый JPG, который в отличие от PNG не умеет прозрачность и потому для логотипов почти не годится, зато незаменим для фотографий. Когда какой из них уместен и чем они отличаются от нашей пары, подробно разложено в обзоре «В каком формате должен быть логотип».

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

Все логотипы в каталоге Trace Logo's доступны сразу и в SVG, и в PNG: исходник и производная в одном месте, скачивайте бесплатно.