svg 경로 패스 개념 종류 About svg path

svg에는 path를 이용해 선을 그리는 기능이 있다. path의 기능은 어렵지 않지만 이 중 몇가지가 개념적으로 어려울 수 있다. svg path 에는 10가지의 기능을 제공하며 좌표의 시작을 M으로 시작하여 Z으로 종료한다. 개념을 먼저 잡고 코드는 다음으로 미룬다. 

 

svg 경로 종류
About svg path

svg path를 이용하면 복잡한 선형곡선을 그릴 수 있다.

이것을 베지어곡선이라 한다.

점과 선을 이용해 그리는 것으로 복잡한 수식보다는 개념부터 알고 넘어가자.

svg path의 개념 중 가장 어렵기도 하지만 이해하면 어렵지 않다.

svg path의 기본 사용법은 아래와 같다.

<svg>
	<path/>
</svg>

먼저 svg path 종류부터 살펴본다.

svg path는 10가지가 있다.

 

svg path 종류 10가지

svg path는 영문자로 지정하여 선과 곡선 직선을 그리게 된다.

svg path 로 나타내는 직선이나 곡선은 선과 점의 개념이 아닌 점이 지나가는 경로를 선으로 표현한 것이다.

점이 지나가는 경로가 path 임을 알고 넘어가자.

 

시작점을 M으로 지정하여 좌표를 x y 형식으로 작성해 나간다.

좌표가 종료된 것을 표시하기 위해 path 마지막에 Z을 표기한다.

• 영문 대문자는 절대좌표, 소문자는 상대좌표를 의미한다.
• M, m : moveto
  그리기 시작점을 지정한다.
• L, l : lineto
  선을 그린다.
• H, h : horizontal lineto
  수평선을 그린다.
• V, v: vertical lineto
  수직선을 그린다.
• C, c : curveto
  큐빅 베지어 곡선를 그린다.
• S, s : smooth curveto
  매끄러운 곡선을 그린다.
• Q, q : quadratic Bézier curve
  사각 베지어 곡선을 그린다.
• T, t : smooth quadratic Bézier curveto
  매끄러운 사각 베지어 곡선을 그린다.
• A, a : elliptical Arc
  타원형을 그린다.
• Z, z : closepath
  그리기 경로의 종료

 

베지어 곡선 이해

베지어 곡선은 점과 선을 연결한 좌표들을 선을 연결한 후 그 선들의 교집합이 되는 하나의 점을 가지고 그린 것을 의미한다.

어렵다.

하지만, 여기서 중요한 것은 path 는 점이 이동하는 경로라는 것을 먼저 이해하는 것이다.

 

1차 베지어 곡선이다. Linear Bézier curve

좌표의 시작은 P0이며, 점은 P0에서 P1으로 움직인다.

1차 베지어 곡선

2차 베이어 곡선은 좌표가 세 개이다.

2개의 선분에는 각각 이동하는 점이 있다. ( 녹색선의 시작점과 끝점 )

이 2점이 이동하는 점을 선분으로 연결하고 이 선분을 이동하는 점의 경로를 선으로 그린 것이다.

2차 베지어 곡선

3차, 4차 베지어곡선은 각각 점이 4개, 5개 이다.

좌표가 설정된 것을 기준으로 순서대로 선이 그려진다.

더이상 선으로 그려지지 못하는 마지막 선을 지나가는 점이 path인 경로가 되는 것을 알 수 있다.

3차 베지어 곡선

4차 베지어 곡선

이 베지어 곡선을 이용하면 다양한 연산을 할 수 있는데

대표적으로 게임에서 캐릭터의 이동을 표현할 수 있으며, 시뮬레이션 등에서 사물이 이동하는 것을 표현할 수 있다.

 

위의 움직이는 베지어곡선을 유심히 보면 알 수 있는 것이 있다.

모든 점은 선으로 연결된다.

모든 선에는 이동하는 점이 있다.

모든 이동하는 선의 점을 연결하면 새로운 선이 그려진다.

더이상 선으로 표현되지 않는다면 마지막 선이 되고 이 선을 이동하는 점의 경로가 path 가 된다.