Как векторизовать логотип: из PNG в многоцветный SVG, бесплатно
Полная техника, а не просто смена формата: какой пресет выбрать, сколько цветов оставить, что даёт послойный SVG и как проверить результат. Бесплатно, без регистрации.
Что на самом деле значит векторизовать логотип
Векторизовать логотип - значит перестроить его из геометрических примитивов: пути вместо пикселей, чтобы он оставался резким от фавиконки 16 пикселей до вывески магазина. Сделанный правильно, SVG сохраняет каждый цвет оригинала как отдельный редактируемый слой. Если файл уже под рукой, бесплатный онлайн-конвертер логотиповсправится меньше чем за минуту; остальная часть руководства - о том, как получить результат, который можно отдать в типографию, разработчику или режущему станку.
Два соседних руководства позволяют этому остаться сфокусированным: конвертация любого растра разобрана в гиде конвертации любого изображения в SVG, а спасение маленького, размытого или пиксельного логотипа имеет свой собственный процесс восстановления - ссылка ниже. Здесь мы разбираем ремесло именно логотипа: количество цветов, послойный вывод и контроль качества.
Одно предупреждение: некоторые «конвертеры» выдают .svg, который на деле - ваш PNG, завёрнутый в base64-тег <image>. Откройте файл в текстовом редакторе: если вместо элементов <path> вы видите один гигантский кодированный блок - вам дали переименованную битмапу, а не вектор.
Реальные результаты конвертера
Три типа логотипов приходят на порог
Выбор пресета зависит от того, какой из трёх логотипов у вас в руках. Решите это первым - это главный рычаг качества из всех.
Одноцветный знак
Логотип, иконка, штамп: один цвет на ровном фоне. Самый лёгкий случай: пресет Чёрно-белый даёт одну чистую фигуру, минимально возможный файл и ровно то, что просят гравёры, плоттеры и шаблоны.
Плоский многоцветный логотип
От двух до шести заливных цветов, без градиентов - самый частый клиентский логотип. Пресет Poster создан для него: каждая цветовая зона становится собственным векторным путём, уложенным слоями. Именно этот случай портят общие гайды, сплющивая всё в чёрно-белое.
Эмблема с градиентами
Металлические блики, мягкие тени, 3D-эффекты. Трассировка может лишь приблизить градиенты цветными полосами. Пресет Photo справляется лучше всех, но ждите стилизованную постерную версию эмблемы, а не близнеца - и куда более тяжёлый файл.
Какой пресет для какого логотипа
Сопоставьте логотип со строкой и возьмите пресет - всё решение в одной таблице:
| Ваш логотип | Пресет | Что вы получите |
|---|---|---|
| Одноцветный логотип, иконка или штамп | Чёрно-белый | Одна чистая фигура, минимальный файл, готово для резки |
| 2-6 заливных цветов (большинство клиентских) | Poster | По одному редактируемому пути на цвет |
| Градиенты, металлик, мягкие тени | Photo | Градиенты приближены полосами |
| Логотип на пёстром или цветном фоне | Сначала подготовить | Обрежьте или удалите фон, затем трассируйте |
| Крошечный скриншот шириной меньше ~200 px | Найдите файл покрупнее | Никакой пресет не изобретает разрешение - см. гайд по размытым логотипам |
| Логотип с тонкими засечками или множеством деталей | Poster + больше деталей | Более высокая детализация путей сохраняет тонкие линии |
Любопытно, что происходит с пикселями при каждом выборе? Механика разобрана в что на самом деле делает векторизация.
Сколько цветов должен сохранить SVG?
Это решение, которое пропускают общие туториалы - а оно определяет и точность, и вес файла. Каждый лишний цвет добавляет путей; мастерство - остановиться на числе цветов, которые логотип реально имеет:
- 1-2 цвета: Чёрно-белый. Если бренд - один цвет плюс фон, цветная трассировка оплачивает лишь шум сглаживания. Одна фигура, файл-пёрышко.
- 3-8 заливных цветов: Poster. Золотая середина настоящих логотипов. Цвета бренда выживают как именованные слои, которые можно перекрасить; JPEG-дымка между фигурами поглощается, а не трассируется.
- Десятки оттенков: Photo. Только для эмблем с градиентом. Точность растёт, но и вес тоже: SVG в режиме Photo может весить в десять раз больше собрата из Poster и всё равно выглядеть стилизованным.
Правило большого пальца: посчитайте цвета из брендбука, добавьте один на фон - и остановитесь. Если вы не можете назвать назначение цвета, трассировщик не должен его рисовать.
Послойный SVG: почему один путь на цвет - это важно
Откройте хорошо трассированный логотип-SVG в текстовом редакторе - вы найдёте небольшую стопку элементов <path>: по одному на цвет, крупнейший первым. Эта структура не деталь реализации: именно она делает файл рабочим активом, а не картинкой актива.
Поскольку каждый цвет - отдельный путь, ребрендинг превращается в двухминутную правку: выделите слой, назначьте новую заливку, экспортируйте - в Inkscape, Illustrator или любом редакторе, открывающем SVG. В интернете заливка слоя через currentColor заставляет логотип автоматически следовать теме страницы. Сплющенная трассировка не даёт ничего из этого: каждая перекраска - трассировка заново.
Как векторизовать логотип бесплатно (4 шага)
Без аккаунта, без установки, без водяных знаков:
- Загрузите логотип - перетащите PNG, JPG, WebP или BMP. Самая крупная и чистая версия трассируется лучше всего.
- Выберите пресет по таблице выше: Чёрно-белый для одноцветных знаков, Poster для плоских многоцветных, Photo для эмблем с градиентом.
- Выставьте количество цветов под палитру бренда: примерно те цвета, которыми логотип нарисован, плюс фон.
- Проверьте превью по чек-листу ниже и скачайте SVG - настоящие элементы <path>, готовые для печати, веба или резки.
Под капотом конвертацию выполняет движок автотрассировки, производный от VTracer - трассировщика с открытым кодом на Rust. Ваш логотип перестраивается как послойные векторные фигуры - его никогда не заворачивают и не переименовывают.
Хорошая ли трассировка? Проверка качества за 60 секунд
Перед отправкой файла прогоните его через четыре проверки. Вместе они занимают минуту и ловят все типовые дефекты:
- Приблизьте до 400 %. Края должны оставаться гладкими кривыми. Лестницы или дымка означают слишком мелкий источник или слишком высокое число цветов.
- Сожмите до размера фавиконки. Если знак нечитаем при 16 px, трассировка верна, но логотипу нужна упрощённая иконка-вариант - протрассируйте отдельно только символ.
- Проверьте цвета. Каждый цвет бренда должен читаться как сам себя. Смещённые тона значат, что трассировщик потратил цвета на сглаживание - уменьшите количество и повторите.
- Взвесьте файл. Логотип-SVG должен весить несколько КБ. Десятки КБ - трассировщик нарисовал шум; этот вес поедет за файлом на каждую страницу, которая его загрузит.
Тест фавиконки - тот, который все пропускают, а потом жалеют: вектор, работающий только в полном размере, не защищает ничего, чего уже не защищал бы PNG высокого разрешения.
Когда трассировка логотипа не работает - и что делать вместо
Три ситуации приводят сюда людей, которым трассировщик, честно говоря, не подходит:
- Эмблемы с градиентами. Трассировка приближает градиенты полосами. Если блик - и есть бренд, попросите у клиента исходный вектор или оставайтесь в растре - полосатый SVG может выглядеть хуже резкого PNG.
- Единственный файл - скриншот 150 пикселей. Ни один пресет не изобретает пиксели, но апскейл - не единственный путь: процесс восстановления из гида по починке размытого логотипа выжимает из маленьких файлов куда больше, чем прямая трассировка.
- На самом деле это фото с текстом поверх. Фото требуют других пресетов и других ожиданий - гид фото в SVG покрывает эту территорию.
Разделительная линия: трассировка превращает чистые фигуры в более чистые. Когда в источнике нет чистых фигур, решение - лучший источник или перерисовка, а не новые настройки.
Illustrator против Inkscape против бесплатного онлайн-конвертера
Все три дороги ведут к SVG. Они различаются ценой, порогом входа и тем, что можно поправить после:
| Инструмент | Лучше всего для | На что смотреть |
|---|---|---|
| Adobe Illustrator | Полный ручной контроль: перерисовка путей вручную, точные цвета бренда, сдача в типографию | Подписка за то, что в большинстве случаев - один клик Image Trace |
| Inkscape (бесплатно) | Локальная трассировка, правка и чистка путей без затрат на софт | Порог входа полноценного редактора; многоцвет требует вкладки мультисканирования |
| Онлайн-конвертер | Один логотип, одна минута, без установки - пресеты под логотипы, послойный вывод | Пакетная обработка и глубокая чистка остаются на десктопе; для конфиденциальных марок проверьте политику приватности |
Честное замечание: Image Trace в Illustrator и «Трассировать растровое изображение» в Inkscape работают на том же типе движка, что и онлайн-трассировщик. Платный софт покупает ручную правку после трассировки - не лучшую автоматическую трассировку.
Один логотип, все варианты - и пакетный путь
Настоящая брендовая работа - никогда не один файл. Одна и та же конвертация закрывает весь набор:
- Варианты: только иконка, горизонтальная версия, инверсия для тёмных фонов - трассируйте каждый из своего растрового источника, один и тот же пресет, стабильный результат.
- Назначения: печать (от визитки до вывески), веб (от фавиконки до hero) и плоттеры или гравёры, идущие прямо по векторным путям.
- Передача: послойный SVG с одним путём на цвет - тот файл, который просят разработчики и типографии: конец письмам «пришлите версию покрупнее».
Конвертировать весь фирменный комплект разом - каждый вариант, каждый исторический логотип - именно это гид по пакетной конвертации автоматизирует бесплатным десктоп-приложением.
Связанные руководства по конвертации
Восстановление, теория и пакетная работа - гайды вокруг этого.
Частые вопросы
Как векторизовать логотип бесплатно?
Загрузите логотип в бесплатный онлайн-конвертер, выберите подходящий пресет (Чёрно-белый для одноцветных знаков, Poster для плоских многоцветных, Photo для эмблем с градиентом), выставьте количество цветов под палитру и скачайте SVG. Без аккаунта и водяных знаков; бесплатное десктоп-приложение делает то же локально для автономной работы.
Можно ли векторизовать логотип без Adobe Illustrator?
Да. Image Trace в Illustrator использует тот же тип движка автотрассировки, что и бесплатные инструменты: подписка покупает ручную правку путей, а не лучшую автотрассировку. Для разовой конвертации бесплатный онлайн-конвертер или Inkscape дают столь же корректный SVG.
Многоцветный логотип сохранит цвета в SVG?
С пресетом Poster - да: каждая цветовая зона становится собственным векторным путём, поэтому SVG сохраняет палитру как редактируемые слои, которые можно перекрасить в любом редакторе. Избегайте Чёрно-белого для цветных логотипов - он сплющивает всё в одну фигуру.
У SVG прозрачный фон?
Трассировка воспроизводит фигуры из вашего файла: если исходный PNG с прозрачным фоном, SVG его сохранит; если логотип лежит на сплошном фоне, этот фон тоже будет оттрассирован как фигура. Для чистой вырезки удалите фон перед загрузкой или сотрите слой фона потом в SVG-редакторе.
Безопасно ли загружать конфиденциальный логотип клиента?
Онлайн-конвертер обрабатывает изображение и уничтожает его - ничего не хранится. Для логотипов под NDA или строгим брендбуком приложение с открытым кодом выполняет ту же конвертацию целиком на вашей машине, офлайн.
Векторизуйте свой логотип сейчас - бесплатно, без регистрации
Загрузите PNG или JPG, выберите пресет и скачайте послойный многоцветный SVG меньше чем за минуту - без аккаунта, водяных знаков и Illustrator.
Поддержите разработку Open Source
PixelToPath бесплатен для использования. Если этот инструмент помог вам сэкономить время, угостите меня кофе.
❤️ Пожертвовать через Ko-fi