도형을 그립니다. 모든 도형은 그리기(윤곽선)와 채우기 중 적어도 하나는 선택해야 합니다. 아래는 그리기와 채우기의 예시를 보여줍니다.

선 그리기(path)

path테그의 d 어트리뷰트
기호	절대	상대	설명
Movo To	M	m	뗀선 그리기
Line To	L	l	선 그리기
Horizon	H	h	수평 그리기
Verticalness	V	v	수직 그리기
return to Zero	Z, z		시작점으로
Quadratic Bezier	Q	q	2차 베지어 곡선
Quadratic Bezier	T	t	2차 베지어 곡선(연속)
Cubic Bezier	C	c	3차 베지어 곡선
Cubic Bezier	S	s	3차 베지어 곡선(연속)
Arc	A	a	원호 그리기

좌표(x, y)는 가독성을 위해서 ,(콤마)를 작성해도 되고, 작성하지 않아도 됩니다.

<path d="M100,50 L200,50 m0,50 l200,50" style="stroke:#000;" />
또는
<path d="M100 50 L200 50 m0 50 l200 50" style="stroke:#000;" />

선 긋기(L)

절대위치(100, 50)으로 이동
절대위치(200, 50)으로 선 긋기
상대위치(+0, +50) → (200,100)으로 선 긋기
상대위치(+200, +50) → (400,150)으로 선 긋기

<path d="M100 50 L200 50 m0 50 l200 50" style="stroke:#000;" />

수평(H), 수직(V)

절대위치(100, 50)으로 이동
가로로(x=350)까지 선 긋기
세로로(y=200)까지 선 긋기
상대위치(x=-150) → (x=350-150)으로 선 긋기
상대위치(y=80) → (y=200+80)으로 선 긋기

<path d="M100,50 H350 V200 h-150 v80" style="stroke:#000; fill:none" />

제자리 돌아오기(Z)

선그리기를 시작한 지점으로 회귀(가까운 점 X)
(200, 150)에서 x-=100; → y-=100; (Z로 이동) 다시 M 으로 이동
(200, 150)에서 y-=100; → x-=100; (Z로 이동) 다시 M 으로 이동

<path d="M200,150 h-100 v-100 Z M300,200 v-100 h-100 z" style="stroke:#000; fill:none" />

베지어 곡선(Q,T,C,S)

베지어 곡선은 n차 함수를 좀 더 직관적으로 작성하도록 도와줍니다. 이론적 이해는 베지어 곡선의 이해 문서를 참조하십시오.

@iseohyun.com CC-BY-SA

<path d="M100 80 C120,200 300,100 320,220" style="stroke:#000; fill:none" />

2차곡선은(시작점, 제어점, 종착점)을 필요로 합니다.
시작점은 이전노드를 사용합니다.
T는 제어점을 생략할 때 사용합니다. 제어점은 곡선의 제어점180도 위치에 있거나 참조 할 수 없을 때, 시작점으로 간주합니다.

타원(A)

mozila.org > SVG > Tutorial > Paths의 예제를 재구성하였습니다.

A(또는 a)(
rx, ry(타원반지름),
[0-360](회전각),
[0-1](예각-둔각),
[0-1](반시계-시계방향),
x2, y2(도착점)
)

<path d="M10 315  // 좌하단 시작
        L 110 215 // 대각 이동
        A 30 50 0 0 1 162.5 162.5 // 1번째 똑바로 선 타원
        L 172.5 152.5 // 대각이동
        A 30 50 -45 0 1 215 110 // 2번째 누운 타원
        L 315 10" // 마지막 대각이동
        ... // 중략
/>

도착점이 생각보다 가까우면, 타원의 중심점을 외각으로 미뤄주고,
도착점이 생각보다 멀면, 타원을 임의로 키워서 어쨌든 도착점에 도착할 수 있도록 계산해줍니다.

<path d="M10 315
          L 110 215
          a 30 50 0 0 1 30 -30 // 30, -30은 너무 가깝다.
          L 172.5 152.5
          a 30 50 -45 0 1 80 -80 // 80, -80은 너무 멀다.
          L 315 10"
          ... //중략
/>

예각/둔각, 시계방향에 대하여

화살표

<marker id="ah1" markerWidth="20" markerHeight="20" viewBox="0 0 20 10" orient="auto">
  <path d="M9 0 L0 4 0 -4z" />
</marker>

"M9,0 L0,4 0,-4z" 코드를 보면 앞으로 이동(M9,0), 화살표 왼쪽(L0,4). 화살표 오른쪽(4,0), 제자리(z)인 것을 확인 할 수 있습니다. 이를 원하는 직선에 다음과 같이 적용이 가능합니다.

<path d="M100 50 L300 180" marker-end="url(#ah1)"/>

도형 그리기

함수	인자
rect	x, y, width(폭), height(높이), rx, ry(둥근꼭지)
circle	r(반지름), cx, cy(중심점)
ellipse	rx, ry(반지름 넓이), cx, cy(중심점)
line	x1, x2(시작점), x2, y2(도착점)
polyline	points(점 나열:열린도형)
polygon	points(점 나열:닫힌도형)

선 특성

끝선 처리

stroke-linecap="[butt | square | round]"
stroke-linejoin="[butt | round | bevel ]"

점 선

stroke-dasharray="[0-9]+ [0-9]+..."
예) 5 5 : 5칠하고, 5비우고, 5칠하고, 5비우고...
3 6 9: 3칠하고, 6비우고, 9칠하고, 3비우고, 6칠하고, 9비우고 ...
stroke-dashoffset="[0-9]+" // 앞 뒤로 밀기 옵션(음수 가능)