Векторизация логотипа из PNG в SVG — без потери мелких деталей

У вас есть логотип в PNG. Нужен SVG — для сайта, для подписи в почте, которая будет резкой на Retina, для типографии, которая хочет вектор для визиток. Заказать дизайнеру с нуля — дни. Авто-векторизация — секунды. Этот гид объясняет, как векторизовать чисто, где такие инструменты ломаются и как из этого выходить.

Инструмент: paste-to-download.com/vectorize — браузерный конвертер PNG/JPG в SVG, без upload, без водяного знака.

Зачем для логотипа нужен SVG

Логотип должен корректно выглядеть в любом размере. Favicon 32 × 32 и баннер выставки 4000 × 4000 — это один и тот же логотип, но растровый файл (PNG, JPG) умеет существовать только в одном размере — всё остальное либо пикселизировано (когда растягиваем), либо лишние байты (когда переразмерен).

SVG (Scalable Vector Graphics) описывает логотип математикой — кривые, заливки, обводки. Математика рендерится идеально в любом размере. Поддерживается везде, где есть современный браузер, плюс почти весь дизайн-софт.

Идеал: хранить мастер-логотип в SVG, экспортировать растровые версии по запросу.

Что на самом деле делает авто-векторизация

Векторизатор (его ещё называют «trace» или «rasterize») смотрит на растровое изображение и выделяет области с похожим цветом. Для каждой области он считает замкнутый путь по её контуру. Результат — один path на область, это и есть ваш SVG.

Качество результата зависит от:

Разрешения исходника — выше вход = больше деталей для трассировки
Резкости краёв — чистые края трассируются чисто; размытые дают волнистые пути
Количества цветов — меньше цветов = проще результат; больше цветов = больше путей
Артефактов сглаживания — мягкие края от растеризации создают ложные микро-области цвета

Понимая это, можно подготовить исходник, чтобы получить чистый вектор.

Шаг 1. Начните с самого крупного исходника

Золотое правило: если есть исходный векторный файл (AI, EPS, PDF, SVG) — используйте его. Не векторизуйте, когда у вас есть оригинал.

Если есть только растры, берите самый крупный и чистый:

PNG 2000 × 2000 всегда векторизуется лучше превью 200 × 200
Скриншот логотипа с сайта хуже исходника, который использовал сайт
Фото напечатанного логотипа (камерой с визитки) сильно хуже цифрового файла — пере-кодировка через JPEG плюс фотографический шум создают много фальшивых цветовых областей

Если исходник маленький или шумный — попробуйте сначала /upscale в режиме Lanczos, чтобы очистить и увеличить перед векторизацией.

Шаг 2. Очистите исходник при необходимости

Векторизаторы любят:

Чистый белый или прозрачный фон
Сплошные цвета (без градиентов и фототекстур)
Резкие края (сглаженные тоже ОК; размытые — нет)

Векторизаторы плохо работают с:

JPEG-артефактами (каждый блок 8×8 становится фальшивой областью)
Градиентами (интерпретируются как множество дискретных цветовых ступеней)
Drop shadow (векторизуются как последовательность колец с низкой alpha)
Фотофоном (каждый лист, каждое облако становится path)

Подготовка:

Удалите фон через /remove-background, если логотип на сложной подложке
Наложите лёгкое размытие, если в исходнике JPG-артефакты (контринтуитивно — смягчает ложные края перед трассировкой)
Поднимите контраст, если исходник блёклый
Поднимите насыщенность, если хотите, чтобы векторизатор чётко различал цветовые области

Шаг 3. Откройте инструмент векторизации и выберите режим

Откройте /vectorize. Скиньте логотип. Выберите режим:

High Contrast: для 1–2-цветных логотипов (чёрный на белом, чёрный на цвете). Даёт 1–2 path.
Color: для многоцветных логотипов с плоскими заливками (3–8 цветов). Один path на цветовую область.
Detailed: для логотипов со многими мелкими элементами или тонкой графикой. Больше path, более крупный результат.

Для большинства современных бренд-логотипов (чистые, плоские, 2–4 цвета) дефолт — Color. Для старомодного монограмм-стиля или одноцветных — High Contrast.

Шаг 4. Подстройка порога и количества цветов

Два критичных ползунка:

Порог (0–255): граница яркости, отделяющая тёмное от светлого. Выше порог = больше пикселей попадает в «тёмную» область. Дефолт 128 (средний серый). Подгоняйте, пока края логотипа не совпадут с оригиналом.
Количество цветов: максимум различных цветов заливки в SVG. 2-цветный логотип — на 2. 5-цветный — на 5. Слишком много — шум; слишком мало — сливаются разные цвета.

В векторизаторе paste-to-download оба ползунка дают живой превью. Подгоняйте, пока превью не совпадёт с оригиналом, потом экспорт.

Шаг 5. Экспорт SVG и проверка в браузере

Нажмите Vectorize & Download. Откройте получившийся .svg прямо в браузере (перетащите файл в адресную строку):

Должен выглядеть идентично PNG
Зум Ctrl+= (⌘+= на Mac) — на 1000% зуме края должны оставаться резкими
Меняйте размер окна — SVG ре-рендерится резко в любом размере

Если выглядит сломанным (зубчатые path, пропавшие цвета, странные формы) — вернитесь на шаг 4 и подберите другие настройки.

Типичные провалы и фиксы

«Края логотипа волнистые»

Исходник был или слишком низкого разрешения, или с артефактами JPG-сжатия. Попробуйте крупнее исходник или сначала прогоните через /compress в PNG (снимает шум JPG), потом векторизуйте.

«Несколько цветов слились в один»

Количество цветов задано слишком низко. Увеличьте, пока каждый цвет заливки оригинала не получит свой path.

«Вокруг логотипа ореол из промежуточных цветов»

Артефакты сглаживания. Уменьшите количество цветов (сожмёт ореол в основную заливку) или поднимите порог (уберёт светлые краевые пиксели).

«Мелкий текст внутри логотипа нечитаем»

Текст — самое сложное для векторизации из растра. Два варианта: (а) взять оригинальный шрифт и заверстать текст в SVG руками (название шрифта обычно гуглится; компании часто используют коммерчески доступные шрифты), (б) принять векторное приближение и доправить позже.

«Градиент в оригинале стал ступенчатым»

Векторизаторы не умеют легко представлять непрерывные градиенты. Придётся вручную заменить ступени на <linearGradient> или <radialGradient>. Для большинства логотипов это не стоит усилий; если градиент критичен — пересоздайте логотип в Illustrator/Figma по бренд-спеке.

Когда лучше нанять дизайнера

Авто-векторизация хорошо для:

Внутреннего использования (слайды, внутренние сайты, прототипы)
Первичной конверсии из печатных материалов
Небольших логотипов с простыми формами

Плохо для:

Финальных бренд-ассетов, которые будут использоваться годами
Логотипов с тонкими рисованными элементами
Печати в очень крупных размерах (баннеры, обёртки для машин)

Для финальных бренд-ассетов workflow такой: авто-векторизация → результат как стартовая точка → ручная доводка в Inkscape или Illustrator. Дизайнер, начинающий с авто-векторизации, тратит 30 минут вместо 3 часов.

Почему для логотипов важно, что обработка в браузере

Логотипы часто до запуска под NDA. Загрузка их в неизвестный сервис ради векторизации — риск утечки.

/vectorize полностью работает во вкладке браузера. Potrace-векторизатор скомпилирован в WebAssembly, работает локально, логотип не покидает устройство. Откройте Network: ноль исходящего трафика с данными логотипа.

Сводка

Начните с самого крупного чистого исходника
Уберите фон или подавите шум при необходимости
Откройте /vectorize, выберите режим
Подгоните порог и количество цветов, пока превью не совпадёт с оригиналом
Экспорт, проверка в браузере на нескольких уровнях зума

Результат: логотип, который идеально масштабируется от favicon 16 px до баннера выставки на 5 метров.