5.5 KiB
SVG의 <path> 요소와 d 속성
SVG에서 <path> 요소는 가장 강력하고 유연한 도구로, 직선, 곡선, 복잡한 모양을 자유롭게 그릴 수 있습니다. <path>의 핵심은 d 속성(Data)으로, 이 속성에 일련의 명령과 좌표를 작성해 경로를 정의합니다. d 속성은 명령어와 숫자 쌍(좌표 또는 매개변수)으로 구성되며, 이를 통해 간단한 선부터 복잡한 곡선까지 표현할 수 있습니다.
기본 구조
<svg width="200" height="200">
<path d="M10 10 L100 100" stroke="black" fill="none" />
</svg>
위 예시는 (10, 10)에서 시작해 (100, 100)까지 직선을 그립니다.
d 속성의 명령어 정리
d 속성에서 사용되는 명령어는 대문자(절대 좌표)와 소문자(상대 좌표)로 나뉩니다. 아래 표는 주요 명령어와 설명을 정리한 것입니다.
| 명령어 | 설명 |
|---|---|
M / m |
Move to: 펜을 (x, y)로 이동. 경로의 시작점을 지정. 예: M10 10 (절대), m10 10 (상대). |
L / l |
Line to: 현재 위치에서 (x, y)까지 직선을 그림. 예: L100 100. |
H / h |
Horizontal line to: 수평선을 그림. x값만 지정. 예: H50. |
V / v |
Vertical line to: 수직선을 그림. y값만 지정. 예: V50. |
Z / z |
Close path: 현재 경로를 닫음(시작점으로 직선 연결). |
C / c |
Cubic Bézier curve: 3차 베지어 곡선을 그림. (x1 y1, x2 y2, x y)로 제어점과 끝점 지정. |
S / s |
Smooth cubic Bézier: 이전 C의 두 번째 제어점을 반영해 부드럽게 이어지는 곡선. (x2 y2, x y). |
Q / q |
Quadratic Bézier curve: 2차 베지어 곡선. (x1 y1, x y)로 제어점과 끝점 지정. |
T / t |
Smooth quadratic Bézier: 이전 Q의 제어점을 반영해 부드럽게 이어짐. (x y). |
A / a |
Arc: 타원형 호를 그림. (rx ry x-axis-rotation large-arc-flag sweep-flag x y). |
- 대문자: 절대 좌표(캔버스 기준).
- 소문자: 상대 좌표(현재 위치 기준).
베지어 곡선(Bézier Curves)
1. 3차 베지어 곡선 (C)
3차 베지어 곡선은 두 개의 제어점과 끝점을 사용해 부드러운 곡선을 만듭니다.
<svg width="200" height="200">
<path d="M10 150 C50 50, 150 50, 190 150" stroke="blue" fill="none" />
</svg>
M10 150: 시작점 (10, 150).C50 50, 150 50, 190 150: 첫 제어점 (50, 50), 두 번째 제어점 (150, 50), 끝점 (190, 150).
2. 2차 베지어 곡선 (Q)
2차 베지어 곡선은 하나의 제어점을 사용하며, 더 단순한 곡선을 그립니다.
<svg width="200" height="200">
<path d="M10 150 Q100 50 190 150" stroke="red" fill="none" />
</svg>
Q100 50 190 150: 제어점 (100, 50), 끝점 (190, 150).
3. 부드러운 연결 (S, T)
S와 T는 이전 곡선의 제어점을 반영해 연속적인 곡선을 만듭니다.
<svg width="200" height="200">
<path d="M10 150 C50 50, 150 50, 190 150 S250 250, 300 150" stroke="green" fill="none" />
</svg>
S250 250, 300 150: 첫 번째C의 두 번째 제어점이 반영되어 부드럽게 이어짐.
아크(Arc, A)
A 명령어는 타원형 호를 그리며, 복잡한 매개변수를 사용합니다.
- 형식:
A rx ry x-axis-rotation large-arc-flag sweep-flag x yrx,ry: 타원의 가로/세로 반지름.x-axis-rotation: x축 기준 회전 각도.large-arc-flag: 0(작은 호) 또는 1(큰 호).sweep-flag: 0(반시계), 1(시계 방향).x,y: 끝점 좌표.
<svg width="200" height="200">
<path d="M50 150 A50 50 0 0 1 150 150" stroke="purple" fill="none" />
</svg>
(50, 150)에서(150, 150)까지 반지름 50인 호를 시계 방향으로 그림.
실무에서 자주 사용되는 <path> 예시
-
아이콘 (간단한 화살표)
<svg width="24" height="24"> <path d="M4 12 H18 M12 6 L18 12 L12 18" stroke="black" stroke-width="2" fill="none"/> </svg>수평선(
H)과 꺾인 선(L)으로 화살표를 표현. -
파도 모양 (베지어 곡선 활용)
<svg width="200" height="100"> <path d="M0 50 Q50 0, 100 50 T200 50" stroke="blue" fill="none" stroke-width="2"/> </svg>Q와T로 부드러운 파도 형태를 그림. -
하트 모양 (복합 경로)
<svg width="200" height="200"> <path d="M100 50 C75 0, 25 0, 25 50 C25 75, 50 100, 100 150 C150 100, 175 75, 175 50 C175 0, 125 0, 100 50 Z" fill="red"/> </svg>C와Z를 사용해 하트 모양을 완성.
결론
SVG의 <path> 요소는 d 속성을 통해 직선, 베지어 곡선, 아크 등 다양한 형태를 표현할 수 있어 실무에서 아이콘, 로고, 애니메이션 경로 등에 폭넓게 활용됩니다. 베지어 곡선은 부드러운 곡선을, 아크는 원형 경로를 다룰 때 유용하며, 명령어를 조합하면 거의 모든 2D 그래픽을 구현할 수 있습니다. 실무에서는 디자인 툴(예: Adobe Illustrator)로 만든 경로를 SVG로 내보내거나, 직접 코드를 작성해 정밀하게 조정하는 방식으로 사용됩니다.