SVG 패스 도형 그리기

<path> 도형은 기본 도형에서 다뤘던 x, y, fill, stroke, stroke-width 속성 등을 설정할 수 있으며, 데이터(d) 속성을 통해 복잡한 도형을 그릴 수 있습니다. 이 도형은 클리핑 패스(Clipping Path)로도 사용할 수 있습니다.

패스 데이터가 복잡할 수록 도형의 모양 또한 복잡해집니다. 특히 커브가 많은 경우 특히 그렇습니다 . 하지만 각 매개변수가 작동하는 방식 및 구문을 기본적으로 이해하면 복잡한 패스 또한 해석 가능합니다.

굳이 머리 속으로 상상해 가며 복잡한 패스를 그릴 필요는 없습니다. 복잡한 도형은 Adobe Illustrator와 같은 벡터 드로잉 도구를 사용하세요.

패스 데이터(Paths Data)

패스 데이터(d) 속성은 복잡한 도형의 모양을 그리는데 사용됩니다. 속성 값을 살펴보면 상당히 복잡한데 숫자와 영문 이니셜(대, 소문자)이 포함된 것을 알 수 있습니다. 영문 이니셜은 패스를 그리는 moveTo, lineTo, closePath, curve 등을 의미하는 각 명령 이름을 나타냅니다.

<svg>
  <path 
    d="M248.761,92c0,9.801-7.93,17.731-17.71,17.731c-0.319,0-0.617,0-0.935-0.021c-10.035,37.291-51.174,65.206-100.414,65.206 c-49.261,0-90.443-27.979-100.435-65.334c-0.765,0.106-1.531,0.149-2.317,0.149c-9.78,0-17.71-7.93-17.71-17.731 c0-9.78,7.93-17.71,17.71-17.71c0.787,0,1.552,0.042,2.317,0.149C39.238,37.084,80.419,9.083,129.702,9.083c49.24,0,90.379,27.937,100.414,65.228h0.021c0.298-0.021,0.617-0.021,0.914-0.021C240.831,74.29,248.761,82.22,248.761,92z" 
    fill="#f9ef21" stroke="#f9cf01" stroke-width="7" stroke-linejoin="round" />
</svg>

이동(moveTo)

moveTo 명령(M, m)은 이동 명령으로 캔버스에 펜을 그림을 그리기 시작할 위치로 이동시키는 것과 같습니다. 즉, 패스의 시작이라고 이해할 수 있습니다. 대문자 M은 절대 좌표, 소문자 m은 상대 좌표를 의미합니다.

패스 도형을 그리기 위한 시작점(248.761, 92)으로 절대좌표 위치 이동(M)하려면 다음과 같이 코드를 작성합니다.

d="M248.761,92"

패스 닫기(closepath)

closepath 명령(Z, z)은 패스 그리기를 종료합니다. 그리기가 종료되면 현재 점에서 시작 점까지 직선을 그리게 됩니다. closepath 명령 뒤에 moveTo 명령이 있을 경우, 이전 패스 그리기를 종료한 후 새 패스 그리기 시작 점으로 이동한 것입니다. closepath 명령은 대소문자 역할이 동일합니다.

d="M240.831,74.29,248.761,82.22,248.761,92z"

선 그리기(lineTo)

lineTo 명령은 직선, 수평선, 수직선을 그릴 수 있습니다. 명령을 통해 현재 점에서 새 점으로 직선을 그립니다.

직선

L 및 l 명령은 현재 점에서 다음 점까지 직선을 그립니다. 대문자 L은 절대좌표, 소문자 l은 상대좌표입니다.

수평선

H 및 h 명령은 현재 점에서 수평선을 그립니다. 대문자 H는 절대좌표, 소문자 h는 상대좌표입니다.

수직선

V 및 v 명령은 현재 점에서 수직선을 그립니다. 대문자 V은 절대좌표, 소문자 v은 상대좌표입니다.

커브 그리기(curve)

커브를 그리는 명령은 3가지가 있습니다. 각 커브 명령의 기본 개념을 알아보고, 이해를 위한 다이어그램을 살펴봅니다.

Cubic Bézier (C, c, S, s)
Quadratic Bézier (Q, q, T, t)
Elliptical arc (A, a)

큐빅 베지어(Cubic Bézier)

3차 베지어 곡선(C, c) 명령은 점(x1, y1) 매개 변수를 곡선의 시작 부분 제어점으로 사용하고, 마지막 제어점으로 점(x2, y2) 매개 변수를 사용하여 현재 점에서 다음과 같은 모양의 곡선을 그립니다.

C x1 y1, x2 y2, x y

이 곡선의 시작점과 끝점 값을 조작하면 시작과 끝 위치에 영향을 주고, 첫번째 두번째 컨트롤 포인트 값을 조작하면 시작과 끝점을 기준으로 하는 곡선 모양과 위치에 영향을 줍니다.

3차 베지어 곡선을 그리는 코드는 다음과 같습니다.

<svg>
  <path d="M10,55 C35,30 80,0 120,55" fill="none" stroke="#333333" stroke-width="3" />
</svg>

cubic Bézier curve with SVG 데모를 사용해 공부하면 3차 베지어 곡선을 좀 더 쉽게 이해할 수 있습니다.

여러 베지어 곡선을 연결하여 확장된 곡선 형태를 만들 수도 있습니다. 한 선의 제어점을 다른 선의 제어점과 반대 방향으로 그어 완만한 경사를 만들어야 할 때가 많은데, 이 경우에는 간단한 형태의 3차 베지어 곡선 명령어인 S, s를 사용해서 구현할 수 있습니다.

S x2 y2, x y

머리로 이해하려 하기 보다는 아래 그림을 보고 이해하는 것이 빠를 겁니다.

S 명령을 사용한 3차 베지어 곡선을 그리는 코드는 다음과 같습니다.

<svg>
  <path 
    d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" 
    stroke="#eb6e4c" fill="none" stroke-width="6" stroke-linecap="round" />
</svg>

위에서 그린 3차 베지어 곡선의 좌표 그림은 다음과 같습니다. 이해를 위해 참고하세요.

대문자 C는 절대좌표 소문자 c는 상대좌표입니다. S와 s또한 동일합니다.

쿼드라틱 베지어(Quadratic Bézier)

3차 베지어 곡선보다 간단한 다른 형태의 곡선인 2차 베지어 곡선(Q, q, T, t)은 하나의 컨트롤 포인트를 제외하고는 3차 베지어 곡선과 유사합니다. 시작점과 끝점 사이에 위치한 컨트롤 포인트가 곡선의 모양을 결정합니다.

Q x1 y1, x y

2차 베지어(Quadratic Bézier) 곡선을 그리는 코드는 다음과 같습니다.

<svg>
  <path 
    d="M20,50 Q60,75 100,50" 
    fill="none" stroke="#b13138" stroke-width="6" stroke-linecap="round" />
</svg>

3차 베지어 곡선과 같이 2차 베지어 곡선 또한 반대로 연결하는 단축 명령어가 있습니다.

T x y

T 및 t 명령은 설정으로 그려지는 곡선은 아래 그림을 보고 이해해봅니다.

T 명령을 사용하여 그린 2차 베지어 곡선 코드는 다음과 같습니다.

<svg>
  <path 
    d="M10 80 Q 52.5 10, 95 80 T 180 80" 
    stroke="#9389bf" fill="none" stroke-width="6" stroke-linecap="round" />
</svg>

위에서 그린 2차 베지어 곡선의 좌표 그림은 다음과 같습니다. 이해를 위해 참고하세요.

2, 3차 두 종류의 곡선이 비슷한 결과를 만들어내긴 하지만, 3차 곡선의 경우 모양을 보다 자유롭게 수정할 수 있습니다. 둘 중 어느 것이 좋은지는 상황에 따라 다르며, 선 모양이 얼마나 대칭적인지에 따라 달라집니다.

엘립티컬 아크(Elliptical Arc)

타원형 호(A, a) 명령은 타원의 호(원이나 타원의 일부분)를 그립니다. x, y축 반지름이 주어졌을 때, 두 점을 연결할 수 있는 타원은 2개가 있으며, 각각의 타원에서 두 점을 잇는 패스 또한 2개씩 있기 때문에 어떤 상황에서든 네 종류의 호를 그릴 수 있습니다. 이러한 성질 때문에 호를 그리는 명령어는 많은 수의 매개 변수를 요구합니다.

rx ry
x rotation degree
large-arc-flag
sweep-flag
x y

A rx ry x축-회전각 큰-호-플래그 쓸기-방향-플래그 x y
a rx ry x축-회전각 큰-호-플래그 쓸기-방향-플래그 dx dy

타원형 호를 그리는 코드는 다음과 같습니다.

<svg>
    <path
      d="M105,20 a20,20 0 1,1 50,25"
      fill="none" stroke="#4286f0" stroke-width="8" />
</svg>

패스 데이터(d)에 설정된 값은 시작점(M105,20) 끝점(50,25), x축 회전각(0), 큰 호 플래그(1), 쓸기 방향 플래그(1) 순입니다. 아래 그림은 큰 호 플래그(Large Arc Flag), 쓸기 플래그(Sweep Flag) 옵션 값에 따라 4가지 호를 그릴 수 있음을 보여줍니다.

M, L, A 명령을 사용해 보다 복잡한 모양을 그릴 수 있습니다.

<svg width="400" height="400" viewBox="0 0 400 400">
  <path d="M10,315
           L110,215
           A30,50 0 0,1 162.55,162.45
           L172.55, 152.45
           A30,50 -45 0,1 215.1,109.9
           L315,10" 
        stroke="#4286f0" 
        fill="#4286f0" 
        stroke-width="4" 
        stroke-linecap="round"
        fill-opacity="0.2" />
</svg>