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

Узлов в SVG слишком много, когда векторизация повторяет каждую пиксельную ступеньку вдоль края вместо того, чтобы провести одну плавную кривую. Окружность, которой хватило бы четырёх или восьми узлов, получает шестьдесят. Файл тяжелеет, редактировать его мучительно, а плоттеры и лазеры замедляются и дёргаются на крошечных отрезках.

Решение — векторизовать заново с настройками в пользу плавных кривых: меньше узлов, плавнее кривые, меньше цветов и никакого мусора. Можно и упростить готовый SVG, но при этом обычно скругляются углы и сдвигаются края. Перетащите картинку ниже и включите Контуры и узлы, чтобы увидеть, сколько узлов в результате.

Попробуйте на своей картинке

Перетащите, вставьте или выберите изображение

⌘V вставить · ⌘O открыть · пакетно

Нет картинки под рукой? Попробуйте пример:

Плавный SVG с небольшим числом узлов

Что такое узел и почему важно их число

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

• Редактирование: каждый узел — то, что, возможно, придётся двигать. Логотип с парой сотен узлов легко поправить, с тысячами — нет.
• Резка и гравировка: станки движутся от узла к узлу. Сотни крошечных отрезков заставляют нож или лазерную головку дёргаться, оставляют неровный край и занимают больше времени.
• Размер файла: больше узлов — тяжелее файл. Это важно для иконок на сайте и для площадок с ограничением на размер загрузки.
• Внешний вид: кривая, разбитая на множество коротких кусочков, часто дрожит, и это заметно при увеличении дизайна.

Откуда в автоматической векторизации столько узлов

• Маленький исходник или низкое разрешение: в маленьком размере изогнутый край — это лесенка из пикселей, и векторизация идёт по ступенькам.
• Сжатие JPG и шум: пятнистые края и крапчатые области превращаются в десятки мелких фигур, и у каждой свои узлы.
• Слишком много цветов: градиенты и сглаженные края распадаются на тонкие полосы, и каждая полоса — ещё один контур.
• Настройки в пользу точности: векторизация, которая прилипает к каждому пикселю, сохраняет каждую пиксельную ступеньку как узел.

Пошагово: плавная векторизация с меньшим числом узлов

1. Возьмите самую большую и чистую картинку, какая есть. Чёткий PNG векторизуется с меньшим числом узлов, чем маленький сжатый JPG.
2. Откройте её в конвертере выше и включите Контуры и узлы, чтобы видеть узлы на результате.
3. В разделе «Цвета» задайте через Палитра ровно столько цветов, сколько их на самом деле в дизайне. Тогда оттенки, оставшиеся от сжатия, сольются с ближайшим цветом, а не станут лишними фигурами.
4. В разделе «Фигуры» увеличьте Мин. размер фигуры, чтобы убрать мусор, и сдвиньте Сложность к Меньше фигур, если мелкие детали не нужны.
5. В разделе «Контуры» сдвиньте Узлы к Меньше узлов, а Плавность — к Плавнее кривые. Для логотипов и надписей оставьте включёнными Острые углы, чтобы острия оставались чёткими.
6. Сравните с исходником в режиме Сравнение, затем нажмите Скачать и выберите SVG.

Как упростить готовый SVG в Inkscape или Illustrator

Если у вас есть только SVG, а исходной картинки нет, оба популярных редактора умеют сокращать узлы на выделенных контурах. В Inkscape это «Контур → Упростить». В Illustrator — «Объект → Контур → Упростить» (Object → Path → Simplify), там есть ползунок силы упрощения.

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

Сколько узлов — это нормально?

Зависит от дизайна, так что фиксированного числа нет. Для ориентира: в нашем бенчмарке на 30 логотипах, флагах, эмодзи, иконках и линейных рисунках Shapesoda с настройками по умолчанию дала медиану 96 узлов на картинку (в среднем 174). У других протестированных инструментов медианы на тех же картинках были от 156 до 406 узлов. Простой иконке нужны десятки узлов, а не тысячи; если двухцветный логотип вернулся с несколькими тысячами узлов, векторизация идёт по пикселям.

Меньше узлов для плоттеров и лазеров

Для Cricut, Silhouette или лазера число узлов видно на готовом изделии. Нож, который тащат через сотни крошечных отрезков, может рвать тонкий винил на каждом повороте, а лазер, постоянно замедляющийся и ускоряющийся, оставляет более тёмные пятна там, где тормозит. Прежде чем отправить файл на станок, откройте его с Контуры и узлы и посмотрите на кривые, которые будете резать. Нужны длинные ровные кривые с узлами на расстоянии друг от друга. Скопления узлов на пологой кривой — повод векторизовать заново с меньшим числом узлов. DXF — особый случай: кривые в нём хранятся цепочками коротких прямых. Их количество задаёт Кривые DXF: Меньше линий (компактно) для лёгкого файла, Много линий (плавно), когда кривые должны выглядеть идеально круглыми.

Другие признаки шумной векторизации

• Сотни мелких фигур там, где должна быть одна плоская область: уменьшите число цветов в «Палитре» или увеличьте «Мин. размер фигуры».
• Тонкие щели между цветами: переключите фигуры на Наложением (без швов) для печати и веба.
• Двойные линии в программе для лазера: читайте проблемы трассировки в LightBurn.
• Грубый результат трассировки в Illustrator или Inkscape: читайте не работает трассировка изображения в Illustrator и настройки векторизации растра в Inkscape.

Нужен только конвертер? Откройте Картинка в SVG, Растр в вектор или Иконки в SVG.