Кривые Безье SVG: уберите излом без новых узлов

Чтобы убрать непреднамеренный излом на стыке двух обычных кубических сегментов Безье, оставьте общую опорную точку на месте и выровняйте соседние направляющие по одной прямой с противоположных сторон этой точки. Их длины могут различаться, хотя кривые имеют общее направление касательной. Равные отраженные направляющие задают дополнительное условие; они не нужны для каждого визуально гладкого стыка.

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

Найдите две направляющие, управляющие стыком

Кубическая команда SVG имеет две контрольные точки и конечную точку:

C firstControlX firstControlY secondControlX secondControlY endX endY

Сегмент начинается в текущей точке. Первая контрольная точка задает направление выхода из начала; вторая — подход к концу. Урок MDN по контурам иллюстрирует эти контрольные точки и кубический синтаксис. Для пар координат строчных команд следуйте относительным командам контуров SVG, чтобы определить базовую точку перед изменением направляющих.

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

Исправьте оригинальный пример из двух сегментов

Сохраните полный SVG как join-example.svg и откройте в браузере. Это оригинальный изогнутый знак с намеренным изломом в (150, 100).

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"
     viewBox="0 0 300 200">
  <path fill="none" stroke="#137f74" stroke-width="5"
    d="M30 150 C60 150 100 100 150 100
       C170 50 240 50 270 50"/>
</svg>

Входящая контрольная точка (100, 100) находится прямо слева от стыка. Выходящая (170, 50) — выше и справа. Кривая приходит горизонтально и уходит в другом направлении.

Измените только первую контрольную точку второго сегмента на (175, 100):

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     C175 100 240 50 270 50"/>

Обе соседние направляющие теперь лежат на горизонтальной прямой через стык. Входящая направляющая имеет длину 50 единиц, выходящая — 25. Направление касательной совпадает, хотя длины различаются.

Для отраженной пары вместо этого задайте контрольную точку (200, 100). Тогда обе направляющие отходят от общей опорной точки на 50 единиц. Это сильнее меняет форму второго сегмента, чем изменение с неравными направляющими, поэтому сравните оба варианта с контуром, который хотите сохранить.

У каждой версии два кубических сегмента и три опорные точки на кривой: начало, стык и конец. Контрольные точки — отдельные координаты. Это оригинальный рендеринг в браузере, а не трассировка PerfectVector и не снимок инструмента узлов редактора.

Проверяйте направление отдельно от длины направляющих

Для кубической кривой, заканчивающейся в стыке J с последней контрольной точкой A, производная на конце равна 3 × (J − A). Следующая кубическая кривая начинается в J с первой контрольной точкой B и имеет начальную производную 3 × (B − J).

В нашем примере входящая производная во всех панелях равна (150, 0):

Совпадение направлений касательных называется непрерывностью G1. Совпадение первых производных — непрерывностью C1 при обычном интервале параметра от нуля до единицы для каждой из этих двух кубических кривых. Материал Michigan Tech о производных Безье выводит эти условия на концах.

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

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

Используйте S только когда нужно именно отражение

Отраженную версию можно записать компактнее:

<path fill="none" stroke="#137f74" stroke-width="5"
  d="M30 150 C60 150 100 100 150 100
     S240 50 270 50"/>

Здесь S вычисляет первую контрольную точку, отражая последнюю контрольную точку предыдущей кубической кривой относительно текущей точки:

reflectedX = 2 × 150 − 100 = 200
reflectedY = 2 × 100 − 100 = 100

Остальные пары в S240 50 270 50 задают вторую контрольную точку и конец. Это вариант отраженных направляющих 50/50. Он не может заменить вариант 50/25 без изменения кривой.

Спецификация кубических команд SVG ограничивает правило отражения предшествующей командой C, c, S или s. Если предыдущая команда — линия или квадратичная кривая, неявная первая контрольная точка совпадает с текущей точкой.

Например:

M30 150 L150 100 S240 50 270 50

После линии последний сегмент ведет себя как C150 100 240 50 270 50. Его первая направляющая схлопнулась в начало. Он все еще может изгибаться, поскольку оставшаяся контрольная геометрия не коллинеарна; S после линии не заставляет сегмент быть прямым.

Наша браузерная проверка сравнила отраженный контур S с его явным эквивалентом C, затем пример линии с последующей S — с его явным развертыванием. Оба сравнения совпали в проверенных позициях. Это подтверждает примеры, а общее правило задает спецификация.

Сделайте то же исправление в редакторе узлов

Работайте с копией, выделите контур и покажите направляющие вокруг подозрительного стыка. Убедитесь, что есть одна общая опорная точка. Два отдельных конца, которые просто накладываются друг на друга, могут требовать исправления топологии до изменения направлений направляющих.

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

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

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

Сравните исправленную форму с исходником

Гладкий стык — одна из проверок качества. Он не доказывает, что трассированный логотип совпадает с оригиналом. Сравните силуэт, отверстия и намеренные углы с помощью списка проверок качества векторной трассировки.

Если доступен только PNG или JPG знака, векторизатор логотипов PerfectVector поможет подготовить редактируемый вариант SVG. Проверьте контуры, затем локально исправьте направляющие там, где остался непреднамеренный излом. Держите растровый образец рядом с редактируемым контуром, чтобы сглаживание не стерло нужную особенность.

Используйте существующий векторный оригинал, если он есть. Точная фирменная геометрия или сильно поврежденный исходник могут требовать ручного восстановления; руководство по векторизации логотипа объясняет выбор. Исправление одного стыка полезно, когда остальной контур уже подходит.

FAQ

Должны ли обе направляющие Безье иметь одинаковую длину для гладкого стыка? Нет. Ненулевые направляющие могут иметь разную длину при общем направлении касательной. У общей опорной точки они должны лежать на одной прямой с противоположных сторон. Равные отраженные направляющие дополнительно дают совпадающие первые производные двух использованных здесь кубических сегментов.

Почему команда SVG S меняет мою кривую? S вычисляет первую контрольную точку. После C или S она отражает последнюю контрольную точку предыдущей кубической кривой; после других типов команд использует текущую точку. Вычисленная точка может отличаться от задуманной явной контрольной точки.

Стоит ли сглаживать каждый узел трассированного логотипа? Нет. Сохраняйте намеренные углы, кончики и выемки. Исправьте непреднамеренный излом локально, затем сравните весь силуэт с исходником. Одна непрерывность касательной на стыке не доказывает точность восстановления.

Sources

1. MDN — SVG paths — Объясняет кубические контрольные точки и синтаксис команд контуров.
2. Michigan Tech — Bézier derivatives — Выводит касательные на концах и условия соединения кривых.
3. W3C — SVG cubic Bézier commands — Определяет правило отражения и запасную контрольную точку для S.
4. Inkscape — Node types — Различает поведение угловых, гладких, симметричных и автоматических узлов.

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