SVG Path 시각화 & 곡선 인스펙터

SVG Path 시각화 & 곡선 인스펙터 소개

SVG 경로의 d 속성을 붙여 넣으면 명령 하나하나를 구간으로 나눠 그려 주고, 곡선의 제어점과 호의 중심을 함께 보여 줍니다. <svg> 코드 전체를 넣어도 첫 path의 d만 뽑아냅니다. 통계로 명령 종류별 개수, 하위 경로 수와 닫힘 여부, 경계 상자, 경로 길이를 계산하고, 인자가 모자란 명령 같은 오류는 위치와 함께 알려 줍니다.

정리 기능은 좌표를 전부 절대(대문자)나 전부 상대(소문자)로 바꾸고, 소수 자릿수(기본 3자리)를 줄이고, 보기 좋게 띄우거나 최대한 압축합니다. 경로 길이는 구간마다 72개 점으로 나눠 잰 근사값이라 브라우저의 getTotalLength()와 소수점 아래에서 조금 다를 수 있습니다.

명령 여섯 가지만 알면 대부분 읽힌다

경로는 “펜을 어디에 두고, 어떻게 움직이는가”의 목록입니다. 아이콘 파일에서 가장 많이 보는 명령은 아래와 같습니다. 나머지 H·V는 수평·수직 직선, S·T는 앞 곡선의 제어점을 대칭으로 이어받는 단축형입니다.

• M x y — 펜을 들어 옮깁니다. 새 하위 경로가 시작됩니다. M 뒤에 좌표가 더 이어지면 그것은 L로 취급됩니다.
• L x y — 현재 점에서 직선을 긋습니다.
• C x1 y1 x2 y2 x y — 3차 베지어. 제어점 두 개가 곡선이 출발하고 도착하는 방향을 정합니다.
• Q x1 y1 x y — 2차 베지어. 제어점이 하나라 모양이 단순하고, 폰트 윤곽(TrueType)에서 많이 씁니다.
• A rx ry 회전 큰호플래그 방향플래그 x y — 타원의 일부로 호를 그립니다.
• Z — 현재 하위 경로의 시작점으로 직선을 긋고 닫습니다. 채우기만 하면 닫지 않아도 칠해지지만, 선(stroke)의 모서리 이음 모양이 달라집니다.

호(A)의 두 플래그가 헷갈리는 이유

A 명령은 시작점과 끝점, 반지름만 줍니다. 두 점을 지나는 반지름 r짜리 원은 보통 두 개 있고, 각 원에서 두 점을 잇는 호는 짧은 쪽과 긴 쪽 두 가지입니다. 그래서 가능한 호가 네 개 생기고, 두 플래그가 그중 하나를 고릅니다. large-arc 플래그 1은 180°보다 큰 호, 0은 작은 호입니다. sweep 플래그 1은 각도가 증가하는 방향인데, SVG는 y축이 아래로 향하므로 화면에서는 시계 방향입니다.

반지름이 두 점 사이 거리의 절반보다 작으면 조건을 만족하는 원이 없습니다. 이때 스펙은 반지름을 딱 맞을 때까지 키우라고 정하고 있고, 이 도구도 그렇게 계산합니다. 반지름을 10으로 적었는데 반원이 그려진다면 이 보정 때문입니다. 반지름이 정확히 절반이면 가능한 호가 반원 하나뿐이라 large-arc 값은 결과에 영향이 없습니다.

플래그는 0과 1 한 글자라서 구분자 없이 붙여 쓸 수 있습니다. 압축된 파일에서 “a60 60 0 01100 0”은 플래그 0, 1 다음에 x=100, y=0입니다. 이 도구는 이 표기도 읽습니다.

절대 좌표와 상대 좌표

대문자 명령은 캔버스 원점 기준 좌표, 소문자는 현재 펜 위치 기준 이동량입니다. 아이콘을 다른 위치로 옮기려면 절대 좌표 경로는 모든 숫자를 고쳐야 하지만, 상대 좌표 경로는 첫 m만 바꾸면 됩니다. 최적화 도구가 결과를 대부분 소문자로 내는 것도 작은 이동량이 자릿수가 적어 파일이 줄기 때문입니다.

상대 c의 제어점은 “직전 제어점”이 아니라 그 구간의 시작점 기준이라는 점을 자주 틀립니다. 예를 들어 (10,10)에서 시작하는 C 20 20, 40 20, 50 10은 상대로 c 10 10 30 10 40 0이 됩니다. 세 쌍 모두 (10,10)에서 뺀 값입니다.

z 다음에 오는 소문자 m은 z가 돌아간 하위 경로 시작점을 기준으로 계산됩니다. 손으로 경로를 합치다가 도형이 엉뚱한 곳에 나타나면 이 부분을 확인해 보세요.

경로가 이상하게 보일 때 확인할 것

숫자 구분은 공백이나 쉼표뿐 아니라 부호와 소수점으로도 됩니다. “10-5”는 10과 -5, “.5.5”는 0.5와 0.5입니다. 사람이 읽기에는 헷갈리지만 규칙상 올바른 표기입니다. 반대로 L 뒤에 숫자가 하나만 있으면 오류이고, 브라우저는 보통 그 지점부터 경로 그리기를 멈춥니다.

구멍 뚫린 도형(도넛, 글자 O)이 꽉 차 보이면 fill-rule 문제일 가능성이 큽니다. 기본값 nonzero에서는 안쪽 하위 경로를 바깥과 반대 방향으로 그려야 구멍이 됩니다. evenodd로 바꾸면 방향과 상관없이 구멍이 생깁니다.

예시

사용 방법

1. d 문자열이나 SVG 코드를 붙여 넣거나 예제를 고릅니다.
2. 구간을 눌러 제어점, 호의 중심, 시작·끝 좌표를 확인합니다.
3. 좌표 방식과 소수 자릿수를 정해 정리된 경로를 복사합니다.

자주 묻는 질문