У вас логотип в виде PNG. Он выглядит нормально в шапке сайта, а потом кто-то просит его крупным — баннер, печать, футболка — и в увеличении он становится мягким и зубчатым. Это потолок растрового файла: он фиксированная сетка пикселей, и при увеличении дополнительной детали взять неоткуда. У SVG такого потолка нет. Он хранит логотип как фигуры и контуры, так что перерисовывается резко, будь он шириной 32 пикселя или два метра.
Перевести PNG-логотип в форму SVG значит обвести его — прочитать пиксели и нарисовать векторные контуры, следующие за краями. Для плоского логотипа это ровно тот инструмент, и он быстр.
Почему логотип хорошо обводится
Хороший логотип — идеальный вход для обводки. Обычно у него небольшое число сплошных цветов, чистые границы между ними и никаких мягких градиентов или фотографической текстуры. Трассировщик читает такое изображение чисто: находит каждый блок цвета, рисует плотный контур вокруг него и выдаёт SVG всего из горстки фигур. Маленький файл, чёткие края, полностью редактируемый после.
Иконки, простые иллюстрации, штриховая графика и рукописный леттеринг попадают в ту же счастливую категорию по той же причине — плоский цвет и определённые края.
Пошагово
- Начните с самого чистого PNG, что у вас есть. Более высокое разрешение и резкий источник обводятся лучше, чем крошечный размытый. Если у вашего логотипа прозрачный фон, сохраните его — обводка может это сберечь.
- Выберите пресет под логотип. Для двух- или трёхцветного знака Плоский / логотип держит число цветов низким, а фигуры простыми. Для более детальной иллюстрации Детальный допускает больше контуров. Для чистой штриховой графики или силуэта Чёрно-белый сводит его к двум тонам.
- Проверьте предпросмотр «до/после». Сравните обводку с оригиналом. Если края выглядят бугристыми или инструмент выдумал лишние цвета, попробуйте другой пресет — меньше цветов обычно даёт более чистый и меньший результат.
- Скачайте SVG и откройте в векторном редакторе, чтобы доработать при необходимости.
Поскольку это работает целиком в вашем браузере, логотип, который вы перетаскиваете, никогда не загружается — он читается с canvas на вашей машине, нет аккаунта, и он работает офлайн, как только страница загрузилась.
Очистка и перекраска после обводки
Вывод — обычный SVG из именованных контуров и заливок, так что вы не заперты в том, что выдала обводка. Откройте его в Illustrator, Inkscape или Figma — и вы можете изменить цвет целой области, отредактировав одну заливку, задать точный фирменный hex, удалить лишнюю фигуру, подхваченную трассировщиком, или подвинуть контур. Вот настоящая награда: логотип перестаёт быть фиксированной картинкой и становится редактируемым объектом любого размера.
Где это не поможет: фотографии
Будьте честны насчёт входа. Это обводит фигуры, а не фотографии. Если подать сюда фото — портрет, съёмку товара, пейзаж — оно всё равно выдаст SVG, но ужасный: тысячи тонких цветов аппроксимируются наложенными кляксами, файл раздувается далеко за пределы оригинального JPG, и он выглядит размазанным. Для всего с непрерывными тонами держите это в растровом формате и сжимайте вместо обводки. И это не ИИ, перерисовывающий ваш логотип во что-то новое — если исходный PNG размыт или зашумлён, обводка наследует это. Чистый, плоский, малоцветный логотип даёт чистый SVG; вот золотая середина.