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, спасение описано в разборе «Как перевести логотип в вектор».
SVG и PNG — не единственные форматы
Стоит держать в голове, что этими двумя мир логотипов не ограничивается. Рядом живут векторные AI, EPS и PDF — их используют профессиональные дизайнеры и типографии для печати, — и растровый JPG, который в отличие от PNG не умеет прозрачность и потому для логотипов почти не годится, зато незаменим для фотографий. Когда какой из них уместен и чем они отличаются от нашей пары — подробно разложено в обзоре «В каком формате должен быть логотип».
Что выбрать в итоге
Вернёмся к тому размытому логотипу из начала. Его беда была не в PNG как таковом, а в том, что отпечаток попытались использовать как исходник — растянули готовую сетку пикселей туда, где нужна была инструкция. Держите эту иерархию в голове, и выбор перестанет быть гаданием: SVG — исходник, из которого рождается PNG любого размера; PNG — производная для тех сред, где вектор не открывается, — почты, презентаций, части соцсетей и логотипов со сложными эффектами. Сомневаетесь — берите SVG: из него всегда можно получить PNG, а вот обратно дорога куда дороже.
Все логотипы в каталоге Trace Logo's доступны сразу и в SVG, и в PNG — исходник и производная в одном месте, скачивайте бесплатно.