Почему в автотрассированном SVG слишком много узлов (и как это исправить)

Вы превратили PNG в SVG, открыли файл для редактирования — а весь контур утопает в опорных точках. Сотни узлов теснятся вдоль кривых, которым хватило бы пяти-шести точек. Каждый раз, когда вы пытаетесь чуть сдвинуть форму, приходится бороться с десятком ручек, о которых вы вообще не просили.

Если это звучит знакомо, ваш векторизатор не сломан. Он делает ровно то, что делает большинство автотрассировщиков: переписывает пиксели, а не рисует формы. Разберем, почему так происходит, почему это тормозит работу сильнее, чем кажется, и как получать векторы, которые изначально чистые.

522 узла против 59 узлов

Что на самом деле значит "слишком много узлов"

Каждый контур в SVG состоит из опорных точек (их еще называют узлами), соединенных сегментами кривых. У каждой опорной точки есть пара ручек Безье, которые изгибают линию по обе стороны от нее. Несколько хорошо поставленных точек могут идеально описать длинную плавную кривую — в этом и смысл векторной графики.

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

Скорее всего, перед вами раздувание узлов, если:

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

Почему автотрассировщики насыпают столько узлов

Большинство инструментов трассировки — Illustrator Image Trace и движки на базе potrace, которые стоят за многими бесплатными онлайн-конвертерами, — работают так: они следуют за границей между цветами в растровом изображении и расставляют вдоль нее опорные точки.

Загвоздка в том, где проходит эта граница. В PNG есть сглаживание: мягкие полупрозрачные пиксели, которые делают края на экране более плавными. Для трассировщика такой мягкий край выглядит как слегка дрожащая линия, поэтому он добавляет точки, чтобы повторить каждое колебание. Он не спрашивает: "это дуга или прямой сегмент?" — он переписывает пиксельный контур вместе со всем шумом. Насколько агрессивно инструмент это делает, зависит от него самого — здесь сравниваем основные ИИ-векторизаторы изображений.

Это видно даже в данных контура. Примерно так выглядит один пучок пера у совы после трассировки и после чистого построения:

<!-- Автотрассировка: один пучок пера, 40+ точек -->
<path d="M312.4,98.1 C313.0,97.8 313.9,97.2 314.6,96.9 C315.2,96.7
316.1,96.4 316.8,96.2 C317.4,96.0 318.3,95.7 319.0,95.5 ...(и так далее) Z"/>
 
<!-- Чистый контур: тот же пучок, 6 точек -->
<path d="M312,98 C320,70 360,68 372,96 C378,112 340,140 312,98 Z"/>

Та же кривая. В одном случае это расшифровка каждого пикселя; в другом — форма.

Почему это замедляет работу

Раздутый контур не просто выглядит неопрятно в редакторе — он мешает тремя вполне конкретными способами.

В дизайнерских инструментах

В Illustrator или Figma каждая лишняя опорная точка — это то, что приходится обходить, избегать или чистить, прежде чем внести настоящее изменение. Чистую кривую можно изменить одной-двумя точками. Перерисовывать расшифрованный пиксельный контур значит бороться со всем скоплением сразу — и еще попробуйте сохранить плавность.

Выделено в Illustrator

На режущих машинах

Вот здесь проблема особенно ощутима. Cricut, Silhouette и лазерные резаки буквально следуют по контуру. Слишком много узлов — и машина дергается на каждом микросегменте: резы становятся грубее, время резки растет, а материал чаще рвется. Чистый контур режется плавно. Если файл готовится для лазера, конвертируйте его в SVG для лазерной резки и полностью избавьтесь от дрожания.

Как получить чистые узлы

Есть три выхода, в примерном порядке от самого болезненного к самому удобному:

1. Упростить после трассировки. Команда Illustrator Object → Path → Simplify может убрать часть опорных точек. Это помогает, но с потерями: инструмент аппроксимирует контур, поэтому может смягчать углы и искажать форму. К тому же вы все равно начинаете с раздутой трассировки.
2. Снизить детализацию трассировки. Большинство трассировщиков позволяют уменьшить сложность, но это грубый рычаг: снизите достаточно сильно, чтобы убрать узлы, — и начнете терять нужные детали.
3. Сразу начать с чистого результата. Настоящее решение — векторизовать инструментом, который изначально выводит чистые контуры, чтобы потом ничего не приходилось чистить.

Последний пункт — ровно причина, по которой мы создали PerfectVector. Вместо того чтобы переписывать пиксельную границу, его модель обучалась на реальных дизайн-файлах — там, где человек уже решил, где должны стоять опорные точки и какие сегменты являются одной кривой, а не тремя. Результат повторяет эту логику: плавные кривые Безье, учтенное сглаживание и количество узлов, похожее на то, что нарисовал бы дизайнер.

И дело не только в иллюстрациях: логотипы и леттеринг раздуваются точно так же, а сильнее всего это бьет там, где нужны четкие края и чистая резка винила.

235 узлов против 76 узлов

Попробуйте

Загрузите PNG или JPG в PerfectVector — без логина и без кредитной карты. Количество узлов и цветов будет видно прямо в результате, так что вы сможете сами оценить разницу еще до скачивания.