Настоящие векторные контуры, а точность возвращается в виде числа

Если поискать по этой теме, большинство найденных решений вообще не векторизуют изображение. Они просто берут ваш PNG, кодируют его в base64, вставляют как тег изображения внутрь SVG-оболочки и возвращают обратно. Расширение меняется, а пиксели — нет. При увеличении изображение размывается точно так же, как исходный PNG, а при открытии в Illustrator вы не сможете ничего редактировать. Проверить это просто: откройте файл в текстовом редакторе. Если видите сплошную стену base64 — вам просто переименовали файл.

Что делает этот инструмент на самом деле

Фигуры. Трассировщик находит границы на вашем изображении и записывает их как настоящие SVG-контуры, сгруппированные по цвету, чтобы вы могли масштабировать результат бесконечно и редактировать каждую кривую в Illustrator, Figma или Inkscape. Для двухцветного логотипа размером 267 на 87 пикселей результат содержал 8 контуров, ни одного base64 в файле, а оба исходных цвета сохранены как точные hex-значения. Размер SVG также был 267 на 87, так что он идеально заменяет исходный PNG на странице.

Точность измеряется, а не утверждается

Каждый результат сопровождается оценкой точности, и это не предположение. Готовый SVG снова преобразуется в пиксели и сравнивается с оригиналом по каждому пикселю, а получившийся процент вы видите в результате. У двухцветного логотипа — 99,5. На тестовой выборке все простые изображения набирают 99 и выше, а три из них — ровно 100,0. Реальный производственный логотип, бело-красный текст на прозрачном фоне, трассируется с точностью 99,7 в файл 9,5 KB с 3 цветовыми слоями и 19 контурами.

Почему трассированные логотипы часто выглядят неправильно и как это исправляется

Антиалиасинг — причина, по которой большинство трассировщиков создают ореол из точек вокруг каждой буквы. Мягкие оттенки по краю — это не цвета дизайна, а размытость, и если трассировщик воспринимает их как цвета, он аккуратно трассирует и размытость. Здесь цвета определяются на исходном разрешении изображения, так что такие оттенки распознаются как размытые края и убираются, а не превращаются в отдельные фигуры. Другая классическая проблема — микроскопические зазоры между соседними цветами, которые видны как тонкие светлые линии. Цветовые слои строятся с перекрытием, чтобы такие зазоры не появлялись.

Прозрачность и контур, который обычно всё портит

Пиксели с прозрачностью ниже 50% считаются фоном и не попадают ни в одну трассированную фигуру, так что SVG остаётся прозрачным там, где был прозрачным ваш PNG. Более сложная задача — кайма: однопиксельное кольцо фонового цвета, которое большинство трассировщиков оставляют вокруг прозрачного логотипа — на белом фоне оно незаметно, а на тёмном сразу бросается в глаза. Здесь оно удаляется с помощью trapping — техники из полиграфии. Каждый цветовой слой увеличивается на один пиксель только вдоль границы с прозрачностью, чтобы кайма была перекрыта, не смещая края внутри изображения.

Маленькие и слегка размытые изображения — это обычный случай

У большинства, кто ищет векторную версию, нет чистого исходника. Есть только маленький PNG, экспортированный когда-то давно. Именно для такого входа и настроен движок: маленькое сглаженное изображение увеличивается перед трассировкой, чтобы трассировщик получил субпиксельную информацию о реальных границах, и кривые следовали формам, нарисованным дизайнером, а не ступенькам маленького файла. Логотип 267 пикселей трассировался при ширине 1024, и это указано в результате. Честный предел: трассировка может восстановить только то, что ещё сохранилось в пикселях. Фавиконка 30 пикселей почти не содержит информации о своих кривых, и никакой инструмент не придумает детали, которых никогда не было.

Фотографии работают, и инструмент честно предупреждает, что не должен

У фотографии нет форм, которые можно восстановить. Это непрерывный тон, поэтому трассировка даёт постеризованное приближение: интересно как художественный стиль, но неверно как копия. Оценка точности это явно показывает. Тестовая фотография набрала 95,4% против 99,5% у простого логотипа, и если логотипу хватило 2 цветовых слоёв и 8 контуров, то фотографии понадобилось 16 слоёв и 9 899 контуров. В результате также есть пометка, что изображение — непрерывный тон, и что PNG остаётся наиболее точным форматом. Если вы хотите постеризацию специально, задайте количество цветов вручную и получите этот эффект.

Цвета или чисто чёрно-белое изображение

По умолчанию палитра определяется автоматически из вашего дизайна, так что двухцветный логотип трассируется как два чистых слоя, а не два слоя плюс ореол из оттенков сглаживания, выдающих себя за цвета, а более сложные изображения могут содержать до 16 цветов. Вы можете задать количество цветов вручную от 2 до 32: меньше — для более чистого, стилизованного результата, больше — для точного совпадения цветов. Для отсканированных подписей, штампов и линейной графики есть отдельный чёрно-белый режим, который автоматически выбирает порог из гистограммы изображения или принимает значение от вас в диапазоне от 1 до 254 и возвращает чёткий чёрный рисунок на прозрачном фоне.

Что происходит с вашими файлами

Несколько изображений трассируются с одинаковыми настройками и возвращаются одним ZIP-архивом под исходными именами файлов. Файлы передаются по зашифрованному соединению и удаляются с сервера через час после готовности результата.

Что вы получаете

• Настоящие SVG-контуры, сгруппированные по цвету, редактируемые в любом векторном редакторе
• Измеряемый процент точности для каждого файла, а не просто обещание высокого качества
• Антиалиасинг удаляется, а не трассируется в виде ореола из точек
• Сохранение прозрачности, а однопиксельная кайма фона удаляется с помощью trapping
• Автоматическое определение палитры, возможность задать количество цветов и чёрно-белый режим для линейной графики
• Без регистрации, без водяных знаков, файлы удаляются с сервера через час

Что дальше?

Нужно сделать наоборот и превратить вектор в пиксели для формы загрузки или письма? Преобразовать SVG в PNG позволяет отрендерить его в любом нужном размере. Перед отправкой трассированного файла Сжать SVG удалит из него служебные данные редактора, а Сжать PNG обработает исходный растр, если вы хотите сохранить и его.