SVG Bézier 곡선: 노드 추가 없이 꺾임 고치기
핸들을 정렬해 SVG 3차 Bézier 연결을 고치세요. 길이가 다른 핸들과 반사 핸들을 비교하고 S 명령을 이해하며 의도한 모서리를 보존합니다.
목차
일반적인 3차 Bézier 세그먼트 두 개가 만나는 곳의 의도하지 않은 꺾임을 없애려면 공유 앵커를 고정하고 인접 핸들을 앵커의 반대쪽에서 같은 직선 위에 정렬하세요. 길이가 달라도 곡선의 접선 방향은 같을 수 있습니다. 길이가 같은 반사 핸들은 추가 조건이며 모든 시각적으로 매끄러운 연결에 필요한 것은 아닙니다.
변경 전에 원본 모양을 확인하세요. 뾰족한 잎 끝, 홈이나 글자 모서리는 의도한 것일 수 있습니다. 아래 수정은 시작, 연결, 끝과 세그먼트 개수를 유지하면서 원하지 않는 방향 변화 하나를 대상으로 합니다.
연결을 제어하는 핸들 두 개 찾기
3차 SVG 명령에는 제어점 두 개와 끝점이 있습니다.
C firstControlX firstControlY secondControlX secondControlY endX endY세그먼트는 현재 지점에서 시작합니다. 첫 제어점은 시작에서 나가는 방향을, 두 번째는 끝점에 접근하는 방향을 안내합니다. MDN 경로 튜토리얼은 제어점과 3차 곡선 문법을 보여 줍니다. 소문자 좌표 쌍은 핸들 변경 전에 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단위 뻗습니다. 길이가 다른 핸들 편집보다 두 번째 세그먼트 모양이 더 바뀌므로 보존할 윤곽선과 둘 다 비교하세요.
모든 버전에는 3차 세그먼트 두 개와 곡선 위 앵커 세 개, 즉 시작·연결·끝이 있습니다. 제어점은 별도 좌표입니다. 비교는 직접 만든 브라우저 렌더링이며 PerfectVector 추적 결과나 편집기 노드 도구 스크린샷이 아닙니다.
방향과 핸들 길이 따로 확인하기
마지막 제어점이 A이고 연결점 J에서 끝나는 3차 곡선의 끝점 도함수는 3 × (J − A)입니다. J에서 시작하고 첫 제어점이 B인 다음 3차 곡선의 시작 도함수는 3 × (B − J)입니다.
예제의 들어오는 도함수는 모든 패널에서 (150, 0)입니다.
| 나가는 제어점 B | 나가는 도함수 | 연결 조건 |
|---|---|---|
(170, 50) | (60, −150) | 다른 접선 방향 |
(175, 100) | (75, 0) | 같은 방향, 다른 크기 |
(200, 100) | (150, 0) | 같은 방향과 크기 |
접선 방향 일치를 G1 연속성이라고 합니다. 각 3차 곡선에 일반적인 0~1 매개변수 구간을 쓰면 1차 도함수 일치는 C1 연속성입니다. Michigan Tech의 Bézier 도함수 설명은 이 끝점 조건을 유도합니다.
방향 검사는 끝점 도함수가 0이 아니라고 가정합니다. 앵커로 접힌 핸들은 1차 도함수가 0이므로 별도 검사가 필요합니다. 두 핸들이 연결점 같은 쪽에 있으면 진행 방향이 뒤집힐 수 있어 일직선이라는 조건만으로도 부족합니다.
정렬된 어느 예제도 연결부 곡률 일치를 보장하지 않습니다. 접선 모서리는 없어도 로고의 의도한 실루엣에 맞추려면 재조정이 필요할 수 있습니다. 선택 노드만 보지 말고 굽은 부분 전체를 확인하세요.
원하는 모양이 반사일 때만 S 사용하기
반사 버전은 더 짧게 작성할 수 있습니다.
<path fill="none" stroke="#137f74" stroke-width="5"
d="M30 150 C60 150 100 100 150 100
S240 50 270 50"/>여기서 S는 이전 3차 곡선의 마지막 제어점을 현재 지점 기준으로 반사해 첫 제어점을 추론합니다.
reflectedX = 2 × 150 − 100 = 200
reflectedY = 2 × 100 − 100 = 100S240 50 270 50의 나머지 쌍은 두 번째 제어점과 끝점입니다. 50/50 반사 핸들 버전이며 곡선을 바꾸지 않고 50/25 버전을 대신할 수는 없습니다.
SVG 3차 곡선 명령 명세는 반사 규칙을 앞선 C, c, S, s 명령으로 제한합니다. 앞 명령이 직선이나 2차 곡선이면 암시적 첫 제어점은 대신 현재 지점입니다.
예를 들면 다음과 같습니다.
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
매끄러운 연결에는 Bézier 핸들 길이가 같아야 하나요? 아닙니다. 0이 아닌 핸들은 길이가 달라도 접선 방향이 같을 수 있습니다. 공유 앵커에서 같은 직선의 반대쪽에 있어야 합니다. 길이가 같은 반사 핸들은 여기의 두 3차 세그먼트에 1차 도함수 일치를 추가합니다.
SVG S 명령이 곡선을 바꾸는 이유는 무엇인가요? S는 첫 제어점을 추론합니다. C나 S 뒤에서는 이전 3차 곡선의 마지막 제어점을 반사하고 다른 명령 뒤에서는 현재 지점을 사용합니다. 추론한 지점은 의도한 명시적 제어점과 다를 수 있습니다.
추적 로고의 모든 노드를 매끄럽게 해야 하나요? 아닙니다. 의도한 모서리, 끝과 홈을 보존하세요. 원하지 않는 꺾임을 국소적으로 수정하고 전체 실루엣을 원본과 비교하세요. 접선 연속 연결만으로 정확한 재구성이라고 판단할 수는 없습니다.
Sources
- MDN — SVG 경로 — 3차 곡선 제어점과 경로 명령 문법을 설명합니다.
- Michigan Tech — Bézier 도함수 — 끝점 접선과 곡선 연결 조건을 유도합니다.
- W3C — SVG 3차 Bézier 명령 — S의 반사 규칙과 대체 제어점을 정의합니다.
- Inkscape — 노드 유형 — 뾰족한, 매끄러운, 대칭과 자동 노드 동작을 구분합니다.
로고가 래스터로 시작하면 PerfectVector로 SVG 후보를 준비하고 연결부와 실루엣을 확인하세요. 의도한 모서리를 유지하면서 필요한 곡선만 고치세요.
