SVG 호 플래그: A 명령으로 올바른 곡선 그리기
SVG large-arc와 sweep 플래그가 같은 두 지점 사이 네 곡선 중 하나를 고르는 방식을 확인하세요. 작동하는 A 명령을 복사하고 반지름, 회전과 추적 그림을 수정합니다.
SVG A 명령의 두 플래그는 시작·끝점을 연결할 호를 선택합니다. 짧은 경로는 large-arc-flag를 0, 긴 경로는 1로 설정하세요. 타원 주위 방향은 sweep-flag의 0 또는 1로 선택합니다. 끝점과 반지름을 고정하고 두 숫자만 바꾸면 네 가능성을 모두 볼 수 있습니다. SVG 2 경로 명세는 네 호 선택을 정의합니다.
코드 편집 후 곡선 로고 경계, 배지 고리나 인터페이스 장식이 잘못 휘면 유용합니다. 원본이 PNG이면 먼저 벡터화로 편집 도형을 얻을 수 있습니다. A 명령은 별도의 의도적인 도형 편집입니다.
A 뒤의 값 일곱 개 읽기
절대 호 명령의 순서는 다음과 같습니다.
A rx ry x-axis-rotation large-arc-flag sweep-flag x yrx와 ry는 타원 반지름입니다. x-axis-rotation은 현재 좌표계에서 타원을 회전합니다. 두 플래그는 각각 0 또는 1입니다. 마지막 x y는 끝점입니다. 시작점은 앞선 명령, 보통 M x y가 남긴 현재 지점입니다. 소문자 a는 절대 끝점 대신 상대 끝점을 사용합니다. MDN 경로 튜토리얼이 명령 형식을 설명합니다.
예를 들어 M70 370 A140 110 0 0 1 280 420은 (70, 370)에서 시작해 반지름 140과 110을 사용하고 타원을 회전하지 않으며 sweep 1의 짧은 경로를 선택해 (280, 420)에서 끝납니다. 숫자는 SVG 사용자 좌표계이며 실제 인쇄 크기를 자동으로 보장하지 않습니다.
가능한 네 호 확인하기
SVG 파일 하나에서 이 원본 예제를 렌더링했습니다. 모든 패널의 시작은 (70, 370), 끝은 (280, 420), 반지름은 140 110, 회전은 0입니다. 플래그만 바뀝니다. 주황색이 시작, 녹색이 끝입니다. 직접 만든 경로 명령의 브라우저 방식 렌더링이며 PerfectVector 출력은 아닙니다.
| 플래그 쌍 | 이 예제에서의 선택 | 경로 세그먼트 |
|---|---|---|
0 0 | 끝점 아래의 짧은 경로 | A140 110 0 0 0 280 420 |
0 1 | 끝점 위의 짧은 경로 | A140 110 0 0 1 280 420 |
1 0 | 아래로 둘러가는 긴 경로 | A140 110 0 1 0 280 420 |
1 1 | 위로 둘러가는 긴 경로 | A140 110 0 1 1 280 420 |
‘위’와 ‘아래’는 이 시작·끝·좌표 배치를 설명합니다. 0, 1의 보편적인 의미가 아닙니다. 끝점 배치나 그룹 변환이 다르면 보이는 호도 다른 곳에 놓입니다. sweep 플래그는 선택 타원의 각도가 증가·감소하는 방향을 고릅니다. y축이 아래인 일반 SVG viewBox에서는 sweep 1이 흔히 시계 방향으로 보입니다. SVG 튜토리얼 인터랙티브 호 편집기로 다른 입력을 고정하고 방향 변화를 관찰할 수 있습니다.
패널 하나를 재현하려면 다음을 arc.svg로 저장하고 브라우저에서 여세요.
<svg xmlns="http://www.w3.org/2000/svg"
width="380" height="600" viewBox="0 0 380 600">
<path d="M70 370 A140 110 0 0 1 280 420"
fill="none" stroke="#1b64d8"
stroke-width="12" stroke-linecap="round" />
<circle cx="70" cy="370" r="9" fill="#ff704e" />
<circle cx="280" cy="420" r="9" fill="#0c8078" />
</svg>위 표를 사용해 회전 0 뒤의 두 숫자만 바꾸세요. 반지름이나 끝점도 함께 바꾸면 경로를 바꾼 편집이 무엇인지 알 수 없습니다.
잘못 휜 곡선 고치기
- 세그먼트를 찾으세요. 경로
d값에서 앞선 시작점,A명령과 끝점을 파악하세요. 여러 호 세그먼트가 있을 수 있으므로 잘못된 것만 편집하세요. - 길고 짧은 선택을 확인하세요. 작은 곡선이 갑자기 타원 대부분을 둘러가면
large-arc-flag를1에서0으로 바꾸세요. 계획한 고리 세그먼트가 짧은 연결로 줄면1을 시도하세요. - 측면이나 진행 방향을 확인하세요. 다른 것은 고정하고
sweep-flag를 전환하세요. 종종 끝점 사이 현의 반대쪽으로 호가 이동합니다. - 그림 전체를 확인하세요. 수정 세그먼트도 이웃과 어색한 각도로 만나거나
viewBox밖으로 나갈 수 있습니다. 의도한 표시 크기에서 다시 열고 필요에 따라 인접 도형이나 캔버스를 조절하세요.
어느 플래그 쌍도 원하는 실루엣과 맞지 않으면 아마 플래그 문제가 아닙니다. 반지름·끝점이 후보 타원을 결정하고 플래그는 그중 고릅니다. NaN 호 가이드는 반지름·끝점 변경이 기반 타원을 바꾸는 방식을 보여 줍니다.
회전과 반지름 제한
rx, ry가 다르면 x-axis-rotation이 중요합니다. 호 선택 전에 타원을 회전합니다. 반지름이 같으면 원을 회전해도 외곽선은 같습니다. 기울어진 타원 경계의 로고는 의도한 반지름·회전을 먼저 시도하고 플래그를 선택하세요. 그렇지 않으면 잘못된 타원의 올바른 측면을 고를 수 있습니다.
SVG 2 구현 참고 사항은 특수 사례를 정의합니다. 어느 반지름이든 0이면 직선으로 처리합니다. 끝점을 연결하기에 반지름이 작으면 렌더러가 호를 만들 만큼 키웁니다. 시작과 끝이 같으면 호를 생략합니다. 플래그를 바꿔도 변화가 없어 보이는 이유를 설명합니다. 렌더링만으로 입력 반지름이 보정 없이 실제 사용됐다고 증명하지 못할 수도 있습니다.
두 large-arc 값이 같아 보이는 경우는 왜 있나요?
선택 끝점이 타원을 각각 반 바퀴인 두 호로 정확히 나누면 어느 경로도 더 길지 않습니다. 이 특수 사례에서 large-arc 선택의 시각적 차이는 없습니다. 끝점 하나를 정반대 지점에서 옮겨 네 결과를 테스트하세요.
추적 곡선은 호 수식이 아니라 시작점으로 사용하기
래스터 로고가 깔끔한 원형 테두리를 보여도 복원 SVG는 명시적 A 대신 Bézier 세그먼트·앵커로 표현할 수 있습니다. 이미지 벡터화 도구는 보이는 도형을 재구성하며 원래 원 중심, 반지름이나 호 플래그를 반드시 추론하지는 않습니다. 벡터 원본이 있으면 다시 추적하지 말고 그 파일을 편집하세요.
PNG나 JPG만 있으면 PerfectVector로 이미지를 편집 가능한 벡터 경로로 변환하고 복원 윤곽선을 확인한 뒤 정확한 기하 재작성이 필요한지 정하세요. 배지 고리는 벡터 편집기에서 의도한 중심·반지름을 측정하고 일관된 도형이 중요하면 해당 곡선 부분만 교체하세요. 정확한 타원이 왜곡할 불규칙 그림은 검토한 추적을 유지하세요. SVG 편집 가이드는 시각 편집기·부분 코드 편집 선택을, 노드 정리 가이드는 추적 곡선 재조정이 어려울 때를 다룹니다.
이 작업 구분은 중요합니다. PerfectVector는 래스터 원본을 경로로 복원할 수 있지만 정확한 호 매개변수와 연결 검사는 디자인 결정입니다. 플래그 변경만 하려고 이미 깨끗한 SVG를 PNG로 바꿔 다시 추적하지 마세요.
SVG 전달 전
- 원본 또는 검토한 추적 원본의 사본을 유지하세요.
- 시작점, 끝점, 반지름, 회전과 플래그 두 값을 순서대로 확인하세요.
- 선택 경로를 확대와 실제 사용 크기 모두에서 비교하세요.
- 연결과 긴 경로의
viewBox경계 통과 여부를 확인하세요. - 대상 편집기·브라우저에서 전달 SVG를 다시 여세요. 올바른 스크린샷이 수신자의 의도한 경로 편집을 입증하지는 않습니다.
FAQ
SVG large-arc와 sweep 플래그의 의미는 무엇인가요? large-arc는 두 끝점 사이 짧거나 긴 후보 호를 고릅니다. sweep은 타원 주위 진행 방향을 고릅니다. 퇴화하지 않은 도형에서는 둘이 후보 네 개 중 하나를 선택합니다.
SVG large-arc 플래그를 바꿔도 시각 효과가 없는 이유는 무엇인가요? 끝점이 타원의 반대점이라 두 경로가 반 바퀴인지 확인하세요. 같은 끝점, 반지름 0이나 렌더러가 연결을 위해 조정한 반지름도 확인하세요. 매개변수 하나씩 바꾸고 렌더링 경로를 비교하세요.
이미지 벡터화가 원래 호 명령을 자동 복원하나요? 그렇게 가정하지 마세요. 추적은 래스터에서 편집 도형을 복원하지만 Bézier 곡선이나 많은 앵커를 쓸 수 있습니다. 원래 도형이 필요하면 벡터 편집기에서 정확한 원·타원을 다시 만드세요.
Sources
- W3C — SVG 2 경로 — 호 문법, 플래그 조합과 경로 도형을 설명합니다.
- W3C — SVG 2 구현 참고 사항 — 반지름 보정과 퇴화 호 처리를 설명합니다.
- MDN — SVG 경로 — 절대·상대 명령과 호 튜토리얼입니다.
- SVG Tutorial — 호 — 반지름, 회전과 플래그의 인터랙티브 시연입니다.
- NaN — SVG 경로 명령: 호 — 타원 맞춤과 플래그 결과의 인터랙티브 설명입니다.
래스터 문양을 다듬기 전 편집 원본이 필요하나요? 이미지를 벡터 경로로 변환하고 결과를 확인하세요. 정확한 반지름이나 sweep이 중요한 호는 다시 그리세요.
