SVG(Scalable Vector Graphics)란 XML 기반의 벡터 그래픽 형식으로, 웹 페이지와 어플리케이션에서 벡터 기반의 그래픽을 표현하기 위해 사용됩니다. HTML이 헤더, 표와 같은 요소를 제공하는 거처럼 SVG는 원, 사각형, 곡선 등을 그릴 수 있는 요소를 제공합니다.
SVG 장점
SVG는 이미지가 아니기 때문에 크기를 조절하여도 이미지가 깨지지 않습니다. 또한 간단한 이미지 같은 경우 JPG나 PNG 같은 비트맵 파일에 비해 크기가 작습니다. 이러한 이유로 아이콘이나 로고에 많이 쓰입니다. 이미지 뿐만 아니라 JS와 CSS와 결합하여 애니메이션을 만들 수 있고, 차트와 그래프를 표현하여 데이터도 시각화할 수 있습니다.
SVG 사용법
SVG 시작
<svg> 태그를 먼저 작성해줍니다. 속성으로는 width와 height가 있으며 SVG 이미지의 너비와 높이를 지정하는 속성입니다. 단위는 px 또는 상대적인 비율로 값을 설정할 수 있습니다.
C x1 y1, x2 y2, x3, y3 (혹은 c dx1 dy1, dx2 dy2, dx3 dy3): 베지어 곡선은 3차(Cubic) 곡선입니다. 현재 위치에서 첫 번째 제어점인 x1, y1로 방향을 향하고 두 번째 제어점인 x2, y2까지 완만한 곡선을 그립니다. 그리고 마지막 x3, y3을 끝점으로 하여 그리기를 마칩니다.
<path d="M 10 100 C 50 10, 100 10, 95 100 S 140 190, 180 100" stroke="blue" fill="transparent"/>
베지어 곡선을 연결하여 긴 곡선을 만들고 싶을 때 S 혹은 s 명령어를 사용합니다.
S x2 y2, x3 y3 (혹은 s dx2 dy2, dx3 dy3): S 명령어의 첫 번째 제어점(x1, y1)은, 앞선 C나 S 명령어의 마지막 제어점(x2, y2)을 뒤집은 것으로 설정됩니다. 이를 통해 유연하고 자연스러운 연결된 곡선을 만들 수 있습니다.
T x2 y2 (혹은 t dx2 dy2): 3차 베지어 곡선의 S와 같은 기능입니다. 첫 번째 제어점(x1, y1)이, 앞선 Q나 T 명령어의 제어점(x1, y1)을 뒤집은 것으로설정됩니다. 만약 T 명령어가 단독으로 쓰일 경우 앞선 제어점은 시작점의 좌표로 간주되어, 직선만 그릴 수 있게 됩니다.
원호: A, a
<path d="M 300 200 h -150 a 150 150, 0, 1, 0, 150 -150 z"
fill="yellow" stroke="blue" stroke-width="5" />
<path d="M 275 175 v -150 a 150 150, 0, 0, 0, -150 150 z"
fill="blue" stroke="blue" stroke-width="5" />
A rx ry x-axis-rotation large-arc-flag sweep-flag x y:
rx ry: Arc에 해당하는 타원의 반지름, 이때 타원의 중심은 알아서 계산하여 결과가 나옵니다.
x-axis-rotation: x축 회전 각도
large-arc-flag: 호의 각도가 180도 이상이면 1, 아니면 0
sweep-flag: 호의 진행 방향(시계 방향 기준)이 양의 각도이면 1, 음의 각도이면 0
x y: Arc의 끝점
원호는 타원의 일부분이기 때문에 이러한 개념을 갖고 원호를 생성합니다.
원호의 시작점과 끝점이 있다고 가정해봅니다. 그리고 크기가 정해져있는 타원을 앞선 두 점을 지나게 배치한다고 하였을 때 놓을 수 있는 경우는 두 가지 입니다.
