쿠...sal: [컴][그래픽] SVG 사용법 , path 를 이용해 그리기

svg 사용법 / 벡터 그래픽 / 백터 그리기

SVG

SVG 는 기본적으로 vector 그래픽이다. 그래서 그림을 어떻게 그리는지에 대한 설명이라고 보면 된다.

기본적으로 어떻게 그리는지에 대한 설명은 아래의 형식으로 작성된다고 생각하면 된다.

<command> x y <command> x y ...

command 의 정류는 여러가지가 있는데, 자세한 것은 ref.1 을 참고하자. 여기서는 간략하게 아래 3가지만 설명하도록 하겠다.

move to : M
line to : L
closepath : Z

SVG commands

참고로, command 들은 소문자, 대문자가 같이 존재하는데, 대문자는 절대좌표(absolute), 소문자는 상대좌표(relative) 를 뜻한다.

M, move to

move to 는 내 pointer 를 원하는 좌표로 옮기는 작업이다. 이 녀석으로 그리는 시작점을 정해주는 것이다. 마치 연필이 스케치북에 닿기 시작하는 곳을 이야기 한다.
M 의 사용법은 아래와 같다.

M 200,300 : 좌표(200, 300) 으로 pointer 를 옮겨라.

L, line to

move to (M) 로 시작점을 잡았다면 이제 line(선) 을 그려보자. 선을 그리는 것은 L 로 가능하다. L 이 뜻하는 바는 아래와 같다.

L 200,300 : 현재 좌표에서 좌표(200, 300) 까지 선을 그어라 의 뜻이다.

H, V

L 이랑 같이 알아두면 편한 녀석이다. 가로로 선을 그을 때는 L 대신에 H(horizontal line) 를 세로로 선을 그을때는 V(vertical line) 를 사용하면, 변하지 않는 좌표를 굳이 적을 필요 없이 간단하게 선을 그을 수 있다.

Z, close path

현재 좌표에서 첫 시작점까지 line 을 긋는 작업을 해준다. L 과 같지만, L 처럼 뒤에 "어느 좌표까지 line 을 그려라"" 라고 적을 필요가 없다.

"어느 좌표" 가 "첫 시작점" 으로 미리 정의되어 있는 개념이기 때문이다. 내가 그리던 path 를 종료해서 path 를 닫는다(close path) 라고 생각하면 된다. 이녀석은 대문자나 소문자나 의미가 같다.

아래 그림에 대한 SVG path 정보는 아래 와 같다.

M 10,10 L 10,20 L 20,10 Z

A

A x-radius,y-radius x-axis-rotation large-arc-flag sweep-arc-flag x,y

arc (타원 곡선)을 그리는 방법은 A 를 이용하면 된다. 곡선도 직선과 비슷하게 시작점과 끝점이 있어야 한다. L 에서와 마찬가지로 현재좌표를 시작점으로 해서 a 의 마지막 parameter 2개를 end point 로 지정한다.

M10,10 A ... 20,20

이러면 (10,10) 에서 시작해서 (20,20) 에서 끝나는 곡선이 그려진다.

곡선은 기본적으로 원에서 나왔다고 생각하자. 이런 개념으로 이 A command 를 바라보는 것이 이해하기가 조금 수월할 것이다.

M10,10 A10,10 ... 20,20

이렇게 그리면 (10, 10) 과 (20, 20) 을 지나는 x 반지름이 10, y 반지름이 10 인 타원을 그리게 된다. 그러면 좌표 2개와 반지름을 가지고 아래 "타원 방정식"을 이용하면 (10,10) 과 (20,20) 을 지나는 타원을 하나 그릴 수 있게 된다.

(10,10) 을 지나면서 "x반지름이 10 이 되는 타원의 모든 중심점"들
(10,10) 을 지나면서 "y반지름이 10 이 되는 타원의 모든 중심점"들

을 그리면 아래 그림처럼 "파란색 원" 이 되고,

(20,20) 을 지나면서 "x반지름이 10 이 되는 타원의 모든 중심점"들
(20,20) 을 지나면서 "y반지름이 10 이 되는 타원의 모든 중심점"들

을 그리면 아래 그림처럼 또 다른 "파란색 원" 이 된다.

이 두개의 "파란색원" 이 교차하는 지점이 (10,10) 과 (20,20) 을 모두 지나면서 x,y 반지름이 10 인 타원의 중심점이 된다.

이 2개의 타원을 그리면 "빨간 원" 이 된다.

그러면 아래 처럼 4개의 곡선이 가능하게 된다.

large-arc-flag / sweep-flag

이제 이 4개의 곡선중에 어느 것을 택할 것인지를 결정하는 것이 A command 의 parameter 에 있다.
M10,10 A10,10 0 1,0 20,20

위의 1,0 이 large-arc-flag,sweep-flag 이다.

large-arc-flag : large-arc-flag 는 위의 각각의 타원에서 한개는 크고 한개는 작은 경우가 생기게 된다. 그러면 large-arc-flag 가 '1' 이라면 이 두 개의 arc 중에서 큰 arc 를 사용하겠다는 뜻이 된다. 우연치 않게 정확히 같은 경우가 있을 때는 어떻게 처리되는지 모르겠다.
sweep-flag : sweep-flag 는 각도의 방향을 결정한다. sweep-flag 가 1 이라면, positve angle( 오른쪽 부분이라고 보면 된다.) 쪽을 선택한다는 뜻이 된다. 반대로 0 이면 negative angle 부분이 된다.

x-axis-rotation

이 녀석은 arc 를 그릴 때 타원을 그리게 된다고 위에서 이야기 했는데, 이 타원을 얼만큼 회전시켜라 라고 하는 부분이다.
그래서 내가 원의 모양(x,y 반지름이 같다면)이라면 이 x-axis-rotation 의 숫자가 변해도 arc 의 모양은 변화가 없을 것이다.

쿠...sal

[컴][그래픽] SVG 사용법 , path 를 이용해 그리기

SVG