개발자를 위한 SVG 가이드: 어디서나 완벽하게 작동하는 확장 가능한 그래픽

화면에 표시된 다채로운 벡터 일러스트레이션

SVG(Scalable Vector Graphics)는 브라우저가 구조화된, 스타일 지정 가능한, 스크립트 가능한 XML로 기본 인식하는 유일한 이미지 포맷입니다. SVG로 만든 로고는 1× 모니터, 4K 디스플레이, 대형 광고판 — 모두 동일한 파일 하나로 선명하게 렌더링됩니다. SVG를 이해하면 더 역량 있는 프론트엔드 개발자가 될 수 있습니다.

SVG가 다른 이유

래스터 포맷(JPEG, PNG, WebP)은 이미지를 픽셀 격자로 저장합니다. 확대하면 흐릿해집니다. SVG는 이미지를 도형의 수학적 설명으로 저장합니다:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#3b82f6" />
  <text x="50" y="55" text-anchor="middle" fill="white" font-size="14">Hello</text>
</svg>

이 코드는 "Hello" 텍스트가 담긴 파란색 원을 렌더링합니다 — 어떤 크기에서도 완벽하게 선명합니다.

SVG를 사용해야 할 때:

로고와 아이콘 (모든 크기에서 선명하게 유지되어야 할 때)
일러스트레이션과 다이어그램
차트 및 데이터 시각화 (D3.js는 SVG를 출력)
애니메이션 및 인터랙티브 그래픽
UI 아이콘 (아이콘 폰트보다 훨씬 우수)

SVG를 사용하지 말아야 할 때:

사진 및 복잡한 사실적 이미지 (JPEG/WebP 사용)
스크린샷 (PNG 사용)
SVG에 수천 개의 노드가 있을 때 (Canvas보다 느려짐)

SVG 핵심 요소

도형

<!-- Rectangle -->
<rect x="10" y="10" width="80" height="60" rx="8" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2"/>

<!-- Circle -->
<circle cx="50" cy="50" r="30" fill="#3b82f6"/>

<!-- Ellipse -->
<ellipse cx="50" cy="50" rx="40" ry="20" fill="#10b981"/>

<!-- Line -->
<line x1="0" y1="0" x2="100" y2="100" stroke="#1e293b" stroke-width="2"/>

<!-- Polygon -->
<polygon points="50,10 90,90 10,90" fill="#f59e0b"/>

<!-- Polyline (open shape) -->
<polyline points="10,80 30,20 50,60 70,30 90,70" fill="none" stroke="#ef4444" stroke-width="3"/>

Path — 범용 도형

<path> 요소는 이동, 선, 곡선, 호 명령어로 구성된 미니 언어를 사용해 어떤 도형이든 표현할 수 있습니다:

<path d="M 10 80 Q 50 10 90 80" fill="none" stroke="#8b5cf6" stroke-width="3"/>

Path 명령어:

M x,y — 이동 (펜 올리기)
L x,y — 선 그리기
H x — 수평선
V y — 수직선
Q cx,cy x,y — 2차 베지어 곡선
C cx1,cy1 cx2,cy2 x,y — 3차 베지어 곡선
A rx,ry rot large-arc sweep x,y — 호
Z — 경로 닫기

path를 직접 손으로 작성하는 경우는 거의 없습니다 — 디자인 도구가 내보내 줍니다. 하지만 읽을 수 있으면 디버깅과 최적화에 도움이 됩니다.

viewBox: 반응형 SVG

viewBox 속성은 반응형 SVG의 핵심입니다:

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 200×100 좌표 공간에 그려진 콘텐츠 -->
</svg>

요소에 width/height를 지정하지 않으면, SVG는 반응형 이미지처럼 컨테이너를 채웁니다. CSS에서 width: 100%를 설정하면 완벽하게 확장됩니다.

.logo svg {
  width: 100%;
  height: auto;
}

웹에서 SVG를 사용하는 세 가지 방법

1. 외부 파일 (`<img>`)

<img src="logo.svg" alt="Company logo" width="200" height="80">

✅ 간단하고, 캐싱 가능하며, 어디서나 작동
❌ CSS로 스타일 지정 불가, 스크립트 불가

2. CSS background

.icon {
  background-image: url('icon.svg');
  background-size: contain;
  width: 24px;
  height: 24px;
}

✅ 장식용 아이콘에 적합
❌ SVG 내부 CSS 스타일링 불가, 접근성 없음

3. 인라인 SVG (가장 강력)

<button>
  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
    <path d="M5 4l7 6-7 6" fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
  Next
</button>

✅ 완전한 CSS 제어, 스크립트 가능, 텍스트 색상을 상속하는 currentColor 사용
❌ 캐싱 안 됨, HTML 크기 증가

UI 컴포넌트의 아이콘에는 인라인 SVG가 최선입니다. 스프라이트 시트(<symbol> 요소와 <use> 참조가 포함된 단일 <svg>)를 사용하면 스타일 지정 기능을 유지하면서 캐싱도 활용할 수 있습니다.

CSS로 SVG 스타일링하기

인라인 SVG는 HTML 요소처럼 CSS에 반응합니다:

.icon {
  width: 24px;
  height: 24px;
  color: #3b82f6; /* currentColor를 제어 */
}

.icon:hover {
  color: #1d4ed8;
}

SVG 내부에서는 하드코딩된 색상 대신 currentColor를 사용하세요:

<path fill="currentColor" d="..."/>
<path stroke="currentColor" d="..."/>

이제 아이콘 색상은 CSS로 완전히 제어됩니다 — 다크 모드, 호버 상태, 테마 적용이 모두 자연스럽게 작동합니다.

SVG CSS 애니메이션

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

<svg viewBox="0 0 24 24">
  <circle class="spinner" cx="12" cy="12" r="10"
    fill="none" stroke="#3b82f6" stroke-width="2"
    stroke-dasharray="31.4" stroke-dashoffset="10"/>
</svg>

stroke-dasharray와 stroke-dashoffset은 SVG에서 가장 강력한 애니메이션 속성입니다 — 경로가 스스로 그려지는 듯한 드로잉 애니메이션을 구현할 수 있습니다.

SVG 파일 최적화

디자인 도구는 불필요한 메타데이터, 주석, 편집기 ID가 포함된 SVG를 내보냅니다. 일반적으로 내보낸 SVG는 15 KB일 수 있지만, 최적화하면 3 KB로 줄일 수 있습니다.

제거해야 할 것:

<?xml version="1.0"?> 선언 (인라인에서는 필요 없음)
xmlns:xlink, xmlns:dc, Adobe/Inkscape 메타데이터 네임스페이스
편집기에서만 사용된 id 속성
주석과 공백
불필요한 그룹 요소 <g>
기본 속성 값 (fill="black", opacity="1")

SVGO와 같은 도구가 이 작업을 자동화해 줍니다. SVG를 지원하지 않는 플랫폼을 위해 래스터 버전이 필요하다면, 저희의 SVG to PNG 변환 도구로 PNG로 변환하세요.

접근성

의미 있는 콘텐츠로 사용되는 SVG에는 접근 가능한 설명이 필요합니다:

<svg role="img" aria-labelledby="title desc">
  <title id="title">Revenue chart</title>
  <desc id="desc">Bar chart showing monthly revenue growing from $10k in January to $45k in June 2026</desc>
  <!-- chart content -->
</svg>

장식용 SVG(레이블이 있는 버튼 옆의 아이콘)는 스크린 리더에서 숨겨야 합니다:

<svg aria-hidden="true" focusable="false">...</svg>

빠른 참조: 유용한 SVG 속성

속성	기능
`viewBox="x y w h"`	좌표 시스템 정의
`fill`	도형 채우기 색상 (`none`, hex, `currentColor`)
`stroke`	외곽선 색상
`stroke-width`	외곽선 두께
`stroke-linecap`	선 끝 스타일: `butt`, `round`, `square`
`stroke-linejoin`	모서리 스타일: `miter`, `round`, `bevel`
`opacity`	요소 투명도 (0–1)
`transform`	`translate()`, `rotate()`, `scale()`, `skew()`
`clip-path`	도형으로 콘텐츠 마스킹
`filter`	SVG 필터 적용 (blur, drop-shadow 등)

SVG는 웹에서 가장 활용도가 낮은 도구 중 하나입니다. 좌표 시스템과 스타일링 모델을 이해하고 나면, 모든 크기에서 완벽하게 보이고 사용자 인터랙션에 동적으로 반응하는 아이콘, 일러스트레이션, 차트, 애니메이션을 구현할 수 있습니다.