SVG vs 래스터 이미지: 차이점 이해하기

웹에서 디지털 이미지를 작업할 때 SVG(Scalable Vector Graphics)와 래스터 형식(PNG, JPEG, WebP) 중 선택은 웹사이트의 성능, 시각적 품질 및 사용자 경험에 큰 영향을 미칠 수 있습니다.

벡터 그래픽(SVG)이란?#

**SVG(Scalable Vector Graphics)**는 점, 선, 곡선, 다각형과 같은 수학적 방정식과 기하학적 도형을 사용하여 그래픽을 정의하는 XML 기반 벡터 이미지 형식입니다.

SVG 작동 방식#

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#3B82F6" />
  <rect x="30" y="30" width="40" height="40" fill="#10B981" />
</svg>

핵심 특징: SVG는 실제 픽셀이 아닌 이미지를 그리는 방법에 대한 지침을 저장합니다.

래스터 그래픽이란?#

래스터 이미지(비트맵 이미지라고도 함)는 고정된 픽셀 그리드로 구성되며 각 픽셀에는 특정 색상 정보가 포함됩니다.

일반적인 형식:

• PNG: 무손실 압축, 투명도 지원
• JPEG: 손실 압축, 투명도 없음, 사진에 적합
• WebP: 최신 형식, 손실 및 무손실, PNG/JPEG보다 작음
• GIF: 제한된 색상(256), 애니메이션 지원

기본 차이점 비교#

SVG의 장점#

1. 무한 확장성#

SVG 이미지는 품질 손실 없이 모든 크기로 확장할 수 있습니다.

<!-- 다양한 크기에 사용되는 동일한 SVG 파일 -->
<img src="logo.svg" width="32" />   <!-- 파비콘 -->
<img src="logo.svg" width="200" />  <!-- 헤더 -->
<img src="logo.svg" width="1200" /> <!-- 히어로 배너 -->

2. 단순 그래픽의 작은 파일 크기#

단순 아이콘 비교:

SVG: 800 바이트
PNG (24×24): 2 KB
PNG (48×48): 6 KB
PNG (96×96): 18 KB

3. 텍스트 기반 및 편집 가능#

<!-- 파란색에서 빨간색으로 변경 -->
<circle fill="#3B82F6" />  <!-- 이전 (파란색) -->
<circle fill="#EF4444" />  <!-- 이후 (빨간색) -->

4. CSS 및 JavaScript 조작#

<svg class="icon">
  <path class="icon-path" d="..." />
</svg>
 
<style>
.icon-path {
  fill: currentColor;
  transition: fill 0.3s;
}
 
.icon:hover .icon-path {
  fill: #3B82F6;
}
</style>

5. 접근성 지원#

<svg role="img" aria-labelledby="icon-title">
  <title id="icon-title">홈 아이콘</title>
  <desc>홈 페이지를 나타내는 집 모양 아이콘</desc>
  <path d="..." />
</svg>

SVG의 단점#

1. 복잡한 이미지에 적합하지 않음#

사진 (3000×2000):

JPEG: 250 KB (압축됨)
SVG: 5-15 MB (추적 시, 사용할 수 없는 파일 크기)

2. 복잡한 그래픽의 성능 문제#

수천 개의 경로가 있는 복잡한 SVG는 렌더링 속도를 늦출 수 있습니다.

경험 법칙: SVG 파일이 100 KB를 초과하면 래스터 형식을 고려하세요.

3. 제한된 브라우저 효과#

일부 시각적 효과는 순수 SVG에서 어렵거나 불가능합니다:

• 사실적인 그림자 및 조명
• 사진 필터(블러, 노이즈)
• 텍스처 매핑

4. 학습 곡선#

SVG를 이해하려면 다음 지식이 필요합니다:

• XML 구문
• 좌표 시스템(viewBox, 좌표 변환)
• 경로 명령(M, L, C, Q, A, Z)

래스터 이미지의 장점#

1. 사진에 완벽#

사진 (1920×1080):
JPEG (품질: 85): 150 KB
PNG: 1.8 MB
WebP: 95 KB

2. 예측 가능한 렌더링#

Photoshop에서 보이는 것이 브라우저에서 렌더링되는 것과 정확히 일치합니다.

3. 광범위한 소프트웨어 지원#

모든 이미지 편집기가 래스터 형식을 지원합니다.

4. 복잡한 시각 효과에 더 나음#

래스터에서는 쉽고 SVG에서는 어려운 효과:

• 가우시안 블러
• 사실적인 드롭 섀도우
• 텍스처 오버레이
• 사진 필터

5. 압축 옵션#

WebP 비교:

PNG: 1.2 MB
JPEG (90% 품질): 180 KB
WebP (무손실): 650 KB
WebP (손실, 90% 품질): 85 KB

래스터 이미지의 단점#

1. 확장 문제#

확대: 픽셀화 및 흐림 축소: 대역폭 낭비

2. 반응형 디자인을 위한 여러 파일#

<img
  src="icon-1x.png"
  srcset="icon-1x.png 1x, icon-2x.png 2x, icon-3x.png 3x"
  alt="아이콘"
/>

3. 단순 그래픽의 더 큰 파일 크기#

SVG: 1.2 KB
PNG (200×200): 8 KB
PNG (500×500): 45 KB

SVG를 사용해야 할 때#

✅ 아이콘 및 UI 요소 ✅ 로고 및 브랜딩 ✅ 차트 및 그래프 ✅ 일러스트 및 드로잉 ✅ 애니메이션 ✅ 반응형 그래픽 ✅ 인쇄물

래스터 이미지를 사용해야 할 때#

PNG:#

• 스크린샷
• 투명한 이미지
• 텍스트가 있는 이미지
• 픽셀 아트

JPEG:#

• 사진
• 복잡한 그라데이션
• 큰 배경 이미지

WebP:#

• PNG 및 JPEG의 최신 대체품
• JPEG보다 25-35% 작음
• 투명도 지원

하이브리드 접근 방식#

<!-- 로고: SVG -->
<img src="logo.svg" alt="회사 로고" />
 
<!-- 제품 사진: JPEG/WebP -->
<picture>
  <source srcset="product.webp" type="image/webp" />
  <img src="product.jpg" alt="제품 사진" />
</picture>
 
<!-- 아이콘: SVG -->
<svg class="icon-cart"><use href="icons.svg#cart" /></svg>

최적화 모범 사례#

SVG 최적화#

# 파일 크기를 30-70% 줄임
npx svgo input.svg -o output.svg

래스터 이미지 최적화#

# JPEG 최적화
jpegoptim --max=85 image.jpg
 
# PNG 최적화
optipng -o7 image.png
 
# WebP 변환
cwebp -q 85 image.jpg -o image.webp

결론#

SVG 선택 조건:

• ✅ 단순한 도형 및 경로
• ✅ 확장성 필요
• ✅ 작은 파일 크기가 중요
• ✅ CSS/JS 조작 원함

래스터 선택 조건:

• ✅ 사진 또는 사실적인 이미지
• ✅ 복잡한 시각 효과 필요
• ✅ 이미지가 이미 래스터 형식

각 형식의 강점과 약점을 이해함으로써 시각적 품질, 파일 크기 및 사용자 경험의 균형을 맞추는 정보에 입각한 결정을 내릴 수 있습니다.