이전 회사에서 도넛차트와 막대차트를 구현할 일이 있었습니다. 처음엔 라이브러리를 사용하려고 했지만 요청받은 디자인을 반영할 수 없어서 SVG를 사용해서 직접 구현했었는데요.

그 당시에는 만들기 급급해서 SVG의 자세한 내용을 분석하지 못했던 아쉬움이 있어서 이번 기회에 자세히 분석해보려 합니다.

SVG 기본 구조

SVG(Scalable Vector Graphics)는 웹에서 벡터 그래픽을 표현하기 위한 도구이며 SVG는 확대/축소 시에도 깨짐이 없습니다. 기본적으로 XML 형식으로 작성되며, HTML 문서에서 <svg> 태그를 사용하여 정의할 수 있습니다. SVG 안에는 다양한 그래픽 요소를 추가할 수 있으며, 주요 태그로는 <circle>, <rect>, <line>, <path> 등이 있습니다.

예시: 간단한 원 그리기

출력 결과로는 파란색 내부와 검은색 외곽선을 가진 원이 그려집니다.

SVG 기본 요소와 속성

SVG에서는 다양한 도형을 그릴 수 있습니다.

1. <rect>

<rect/>를 사용하면 사각형을 만들 수 있습니다.

<svg width="200" height="200">
  <rect x="20" y="20" width="150" height="100" fill="lightgreen" stroke="black" stroke-width="2" rx="10" ry="10" />
</svg>

출력 결과:

2. <line>

<line>을 사용하면 선을 그릴 수 있습니다.

<svg width="200" height="200">
  <line x1="10" y1="10" x2="190" y2="190" stroke="green" stroke-width="4" />
</svg>

출력 결과:

3. <path>

<path>를 사용하면 사용자가 원하는 복잡한 도형을 그릴 수 있습니다.

<svg width="200" height="200">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="red" stroke-width="2" />
</svg>

출력 결과:

주요 경로 명령어:

• M x y: 시작 위치 이동 (Move to)
• L x y: 직선 그리기 (Line to)
• C x1 y1, x2 y2, x y: 큐빅 베지어 곡선 (두 개의 제어점과 끝점을 이용한 곡선)
• S x2 y2, x y: 부드러운 곡선

4. 애니메이션

SVG에서는 stroke-dasharray와 stroke-dashoffset 속성을 사용해서 선이 그려지는 애니메이션을 표현할 수 있습니다.

1. stroke-dasharray

선을 점선으로 표현할 때, 선과 빈 공간의 길이를 지정합니다. 예: stroke-dasharray: 5, 10은 선이 5px, 빈 공간이 10px로 반복됩니다.

2. stroke-dashoffset

선을 점차적으로 그려지는 효과를 구현할 수 있습니다.

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="none" stroke="red" stroke-width="4" stroke-dasharray="502" stroke-dashoffset="502">
  <style>
    circle {
      animation: draw 3s linear infinite;
    }
    @keyframes draw {
      from {
        stroke-dashoffset: 502;
      }
      to {
        stroke-dashoffset: 0;
      }
    }
  </style>
</svg>