Как перевести логотип в вектор — трассировка, отрисовка и когда что выбрать
Типография просит «логотип в кривых», конструктор сайтов в SVG, а у вас от логотипа остался один PNG с сайта десятилетней давности. Исходники потерялись вместе с дизайнером. Ситуация настолько частая, что «отрисовка логотипа в вектор» — отдельная услуга на фрилансе. Разберём, когда её можно сделать самому за десять минут, когда за вечер, а когда честнее заплатить.
Есть два пути. Автотрассировка (Inkscape, онлайн‑сервисы): быстро, но прилично работает только на простых одноцветных знаках с чёткими краями. Ручная отрисовка (Figma
, Illustrator
): дольше, но результат настоящий чистый вектор. Правило выбора: одноцветный знак без мелких деталей — пробуйте трассировку; градиенты, текст, мелочи — только отрисовка.
Сначала: а точно ли вектора нет?
Прежде чем восстанавливать логотип из растра, потратьте десять минут на поиски оригинала. Он существует чаще, чем кажется:
- Почта и архивы. Письма от дизайнера или студии, старые облака, папки «Логотип final». Ищите файлы.ai,.eps,.svg,.pdf.
- Подрядчики. Типография, которая печатала визитки, или агентство, делавшее сайт. У них в архивах часто лежит вектор.
- Сайт компании. Логотип в шапке может быть SVG, как проверить и вытащить, мы показывали в статье: «Как скачать логотип с сайта».
- Известный бренд? Тогда вектор точно есть в каталогах. В нашем каталоге логотипов сотни брендов в SVG.
Отдельно проверьте печатные макеты. Визитка, буклет или коммерческое предложение в PDF почти всегда хранят логотип вектором внутри: откройте такой PDF в Illustrator или Inkscape и вытащите знак обычной группой кривых. Тот же приём работает с презентациями — PPTX распаковывается как zip, а вставленные картинки лежат внутри папки media в исходном формате.
Найденный оригинал всегда лучше любой реконструкции.
Путь 1. Автотрассировка за 10 минут
Трассировка обводит границы пикселей кривыми по формальному признаку — перепаду цвета. Лучший бесплатный инструмент — Inkscape:
- Откройте PNG в Inkscape (File → Open).
- Выделите картинку → Path → Trace Bitmap.
- Для одноцветного логотипа выберите режим Single scan (Brightness cutoff), для цветного — Multicolor с количеством цветов по числу цветов в логотипе.
- Подвигайте порог (Threshold), глядя на предпросмотр. Цель — чёткие края без рваных дыр.
- Apply → уберите исходный растр → File → Save As → SVG.
После трассировки почти всегда нужна доводка: Path → Simplify (Ctrl+L) уберёт лишние узлы, которых алгоритм наставил на каждом пикселе, иначе файл будет весить сотни килобайт (почему это важно — в статье про оптимизацию SVG).
Онлайн‑альтернативы (vectorizer‑сервисы) делают то же самое без установки, но с ограничениями бесплатных тарифов и без тонких настроек.
- Маленький или сжатый исходник. Из PNG 200×200 или JPG с артефактами алгоритм обведёт искажения сжатия вместо самого логотипа. Минимум для вменяемого результата 500‑1000 px по длинной стороне.
- Градиенты. Трассировка разобьёт плавный переход на десятки «ступенек»-фигур.
- Мелкий текст. Буквы теряют форму: засечки и тонкие штрихи слипаются в пятна. Текст всегда перенабирают шрифтом.
- Фотографические элементы. Не векторизуются осмысленно в принципе.
Подготовка исходника: половина успеха трассировки
Прежде чем скармливать PNG алгоритму, потратьте пять минут на подготовку. Качество результата вырастет заметно:
- Найдите самую большую версию. Поиск по картинке (Яндекс/Google) по вашему PNG часто находит копии выше разрешением. Также проверьте веб‑архив сайта бренда.
- Увеличьте контраст. В любом редакторе поднимите контраст и уберите полутона у краёв — алгоритму проще искать границы.
- Очистите фон. Пятна, водяные знаки и текстуры фона превратятся в лишние фигуры. Замажьте их белым до трассировки.
- Обрежьте лишнее. Оставьте в кадре один знак: всё остальное со страницы каталога алгоритм обведёт наравне с ним.
- Для JPG — уберите артефакты. Лёгкое размытие (Gaussian Blur 0,5‑1 px) парадоксально улучшает трассировку JPG: алгоритм перестаёт обводить квадратики сжатия.
Путь 2. Ручная отрисовка за вечер
Подготовка вытягивает трассировку там, где знак изначально простой. Градиент, тонкий штрих и буквы не спасёт ни один порог, поэтому остаётся второй путь.
Честная реконструкция: растровый логотип кладётся на фон, и поверх него заново строятся фигуры. В Figma процесс такой:
- Вставьте PNG и заблокируйте слой, снизив непрозрачность до 30‑50%.
- Стройте поверх из геометрических примитивов: круги, прямоугольники, булевы операции (Union, Subtract). Пером (P) — только то, что не собирается из геометрии.
- Текстовую часть не обводите — определите шрифт (сервисы распознавания шрифта по картинке в помощь: WhatTheFont, FontSquirrel Matcherator) и наберите заново. Если шрифт платный и покупать не хочется — подберите близкий бесплатный.
- Цвета снимите пипеткой с крупных заливок исходника, а лучше найдите точные фирменные коды — как их искать, мы рассказывали в отдельной статье.
- Сверьте силуэты: наложите свой вектор на исходник и переключайте видимость. Расхождения виднее всего по краям и в изгибах.
- Экспортируйте SVG и соберите полный комплект файлов по гиду по форматам.
Звучит долго, но для логотипа средней сложности это 1‑3 часа даже без опыта. Бонус: в процессе вы получите идеально чистый файл, лучше многих «оригиналов».
Путь 3. Заказать отрисовку
Услуга «отрисовка в вектор» на фриланс‑биржах стоит недорого и делается за 1‑2 дня. Заказывайте, если логотип сложный (градиенты, иллюстрация, леттеринг), а времени нет. Приложите к заказу самый крупный найденный растр, название шрифта или его образец, фирменные HEX, если они известны, и список нужных форматов. Без этих данных исполнитель подберёт шрифт и цвета на глаз, а расхождение вылезет уже в типографии. Правки оговаривайте до начала работы: одна‑две итерации по силуэту у большинства исполнителей входят в цену.
Проверяйте результат: в файле должны быть кривые (<path>), текст в кривых или с приложенным шрифтом, цвета точными кодами. Один тег <image> внутри означает, что вам вернули тот же растр в другой обёртке.
Сравнение путей
| Трассировка | Отрисовка самому | Заказ | |
|---|---|---|---|
| Время | 10‑30 мин | 1‑3 часа | 1‑2 дня |
| Цена | бесплатно | бесплатно | недорого |
| Простой знак | ✅ отлично | ✅ отлично | ✅ |
| Градиенты, мелочи | ⛔ плохо | ⚠️ терпение | ✅ |
| Текст | ⛔ кляксы | ✅ перенабор | ✅ |
| Чистота файла | ⚠️ нужна доводка | ✅ идеальная | ✅ проверять |
Главная строка здесь последняя: она объясняет, почему быстрый путь редко оказывается конечным. Трассировка выдаёт результат за десять минут, а доводка до пригодного файла занимает потом столько же, сколько отрисовка простого знака с нуля.
После векторизации: доводка до товарного вида
Получить кривые — не финал. Чек‑лист доводки:
- Simplify (Ctrl+L в Inkscape) — убрать лишние узлы, поставленные на каждом пикселе.
- Выровнять геометрию. Почти‑круглые элементы замените честными кругами, почти‑прямые — прямыми: трассировка не знает, что дуга задумывалась идеальной, а вы знаете.
- Замкнуть контуры и убрать мусор. Приблизьте на 800% — найдёте микрофигуры-«пылинки» и разрывы контуров.
- Назначить точные цвета. Возьмите фирменные HEX из гайдлайна или исходного SVG вместо тех, что получились после трассировки (как их узнать — в статье про цвет).
- Прогнать через оптимизатор — финальный файл станет в разы легче по нашей инструкции по SVGO.
- Сравнить с оригиналом наложением — последняя проверка перед сдачей.
Векторизация нейросетями: состояние на 2026 год
Отдельного упоминания заслуживают ИИ‑векторизаторы — за пару лет они дошли от демонстраций до рабочих задач определённого класса. Модели, генерирующие SVG по растру, уже прилично справляются с плоскими знаками средней сложности: меньше «бусин» на кривых, чем у классической трассировки, осмысленные формы вместо слепой обводки пикселей. Слабые места прежние: текст (перенабирайте шрифтом всегда), тонкие декоративные детали и градиентные переходы. Практический режим: пробуйте ИИ‑вариант параллельно с Inkscape и берите лучший из двух как заготовку для ручной доводки. Этап доводки не отменяет ни один инструмент: чек‑лист выше одинаков для всех путей.
Частые вопросы
Онлайн‑конвертер «PNG в SVG» — это то же самое? Да, внутри та же трассировка, только без настроек. А некоторые сервисы просто заворачивают растр в SVG‑обёртку: файл меняет расширение, но вектором не становится. Проверка: откройте результат текстовым редактором, внутри должны быть <path>, а тег <image> выдаёт подделку.
Какие файлы отдать после векторизации? Минимум такой: SVG для веба, PDF или EPS для типографии, PNG на прозрачном фоне для документов. Добавьте версию в одну краску: печать на ткани, гравировка и штамп требуют силуэта без градиентов. Полный список разобран в гиде по форматам.
Логотип чужой. Можно ли его отрисовывать? Для использования по назначению (показать бренд в презентации, поставить иконку банка в список) — да, но отрисовка должна быть точной, без искажений. Подробно о правовой стороне в статье можно ли использовать чужой логотип.
Сколько узлов должно быть в хорошем векторе? Ориентир: простой знак, десятки узлов, не сотни. Откройте результат в Inkscape и нажмите N (редактор узлов): если кривая усыпана точками, как бусами — файл после трассировки не доведён. Плавная дуга описывается 2‑4 узлами.
Как отрисовать градиент? Снимите пипеткой оба крайних цвета исходника и постройте градиент заново инструментом редактора. Не пытайтесь «повторить пикселями». В SVG градиент — это математический объект <linearGradient> с точными стопами, он чище любой трассировки.
Коротко
Сначала ищите оригинальный вектор — он есть чаще, чем кажется. Не нашли: одноцветный простой знак — Inkscape Trace Bitmap плюс Simplify; всё остальное — ручная отрисовка поверх полупрозрачного исходника с перенабором текста. И в любом случае финальный файл — чистый SVG с точными фирменными цветами.
Для известных брендов пропустите весь этот процесс: в нашем каталоге логотипов уже лежат официальные векторы: скачивайте SVG и живите спокойно.