GuksuLog - SVG를 알아보자

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

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

1. SVG 기본 구조

SVG(Scalable Vector Graphics)는 웹에서 벡터 그래픽을 표현하기 위한 도구입니다.

주요 특징:

확대/축소 시에도 깨짐이 없습니다
XML 형식으로 작성됩니다
HTML 문서에서 <svg> 태그를 사용하여 정의할 수 있습니다

SVG 안에는 다양한 그래픽 요소를 추가할 수 있으며, 주요 태그로는 <circle>, <rect>, <line>, <path> 등이 있습니다.

예시: 간단한 원 그리기

<svg width="200" height="200">
  <circle
    cx="100"
    cy="100"
    r="80"
    fill="skyblue"
    stroke="black"
    stroke-width="2"
  />
</svg>

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

2. 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>

주요 속성:

x, y: 사각형의 시작 위치
width, height: 사각형의 크기
rx, ry: 모서리의 둥근 정도

2) `<line>` - 선

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

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

주요 속성:

x1, y1: 시작점 좌표
x2, y2: 끝점 좌표

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	부드러운 곡선 (이전 곡선의 연장)

3. SVG 애니메이션

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

stroke-dasharray

선을 점선으로 표현할 때, 선과 빈 공간의 길이를 지정합니다.

예시: stroke-dasharray: 5, 10

선이 5px
빈 공간이 10px
이 패턴이 반복됩니다

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>

애니메이션 동작 원리

stroke-dasharray="502": 원의 둘레만큼 점선 패턴을 설정합니다
stroke-dashoffset="502": 처음에는 완전히 숨깁니다
애니메이션으로 offset을 0으로 변경하면서 점차 그려집니다

정리

SVG의 주요 장점:

확대/축소 시에도 깨지지 않습니다
CSS와 JavaScript로 쉽게 제어할 수 있습니다
애니메이션 구현이 간단합니다
파일 크기가 작습니다

라이브러리 없이도 SVG를 활용하면 원하는 디자인을 자유롭게 구현할 수 있습니다!

SVG를 알아보자