SVG vs Canvas: 웹 그래픽의 두 얼굴, 차이점과 완벽 선택 가이드

 

웹 페이지에 화려한 애니메이션이나 복잡한 차트를 넣고 싶을 때, 우리는 두 가지 갈림길에 서게 됩니다. 바로 **SVG(Scalable Vector Graphics)**와 Canvas API입니다. 둘 다 그래픽을 표현하지만, 작동 원리는 완전히 다릅니다.

오늘은 이 두 방식의 핵심 차이점을 살펴보고, 어떤 상황에서 무엇을 선택해야 할지 명확한 기준을 제시해 드립니다.

1. SVG (Scalable Vector Graphics)

특징: "확장 가능한 벡터 그래픽"

SVG는 XML 기반의 마크업 언어입니다. 우리가 흔히 사용하는 HTML 태그처럼 <svg>, <rect>, <circle> 등의 태그로 구성됩니다.

• 벡터 방식: 해상도에 독립적입니다. 아무리 확대해도 이미지가 깨지지 않습니다.
• DOM 접근 가능: 각 요소가 HTML 문서의 일부(DOM)로 취급되므로, CSS로 스타일을 입히거나 JavaScript로 개별 요소를 제어할 수 있습니다.
• 고해상도 디스플레이에 최적: 레티나 디스플레이 등에서도 항상 선명함을 유지합니다.

💡 SVG 예제: 인터랙티브한 아이콘 만들기

SVG는 코드 자체로 이미지를 정의하기 때문에 텍스트 에디터에서 바로 수정이 가능합니다.

<!-- CSS로 제어 가능한 단순한 원형 아이콘 -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" class="my-circle" />
  <style>
    .my-circle:hover {
      fill: blue;
      transition: fill 0.3s ease;
      cursor: pointer;
    }
  </style>
</svg>

2. Canvas

특징: "자바스크립트로 그리는 캔버스"

Canvas는 HTML5의 <canvas> 요소를 사용하여 JavaScript를 통해 비트맵 이미지를 직접 그리는 방식입니다.

• 래스터(비트맵) 방식: 픽셀 단위로 그림을 그립니다. 해상도가 고정되어 있어 확대하면 계단 현상이 발생할 수 있습니다.
• 고성능 애니메이션: 수천 개의 객체를 동시에 움직여야 하는 게임이나 복잡한 시각화에 매우 유리합니다.
• 상태 보존 안 함: 한 번 그려진 객체는 캔버스에서 정보를 유지하지 않습니다. 위치를 바꾸려면 화면 전체를 지우고 다시 그려야 합니다.

💡 Canvas 예제: 실시간 파티클 효과

Canvas는 많은 양의 데이터를 빠르게 렌더링할 때 빛을 발합니다.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 사각형 그리기
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);

// 애니메이션 루프 (매우 빠른 속도로 수백 번 반복 가능)
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 이전 프레임 삭제
    // 새로운 위치 계산 및 다시 그리기 로직...
    requestAnimationFrame(draw);
}

3. 한눈에 비교하는 차이점

구분SVGCanvas

렌더링 방식	벡터 (Vector)	래스터 (Raster / Pixel)
DOM 요소	존재 (개별 요소 제어 가능)	존재하지 않음 (캔버스 전체가 하나)
해상도	고해상도 유지 (무한 확대 가능)	해상도 의존적 (확대 시 깨짐)
스크립트	CSS / JS 모두 사용 가능	JS 필수
성능	객체 수가 적을 때 빠름	객체 수가 매우 많을 때 유리함
이벤트 핸들러	개별 요소마다 설정 가능	캔버스 전체에만 설정 가능

4. 무엇을 선택해야 할까요? (결정적 기준)

✅ SVG를 선택해야 할 때

1. 아이콘 및 로고: 다양한 크기의 디스플레이에서 선명해야 하는 그래픽 요소.
2. 데이터 시각화 (객체 수가 적을 때): 인터랙티브한 차트(D3.js 등)나 지도를 구현할 때.
3. 애니메이션 효과: CSS만으로 간단한 트랜지션을 구현하고 싶을 때.
4. 검색 엔진 최적화(SEO): 이미지 내부의 텍스트를 검색 엔진이 읽어야 할 때.

✅ Canvas를 선택해야 할 때

1. 웹 게임: 수많은 스프라이트와 충돌 감지가 필요한 고성능 그래픽 작업.
2. 실시간 영상 처리: 픽셀 단위의 필터링이나 데이터 조작이 필요한 경우.
3. 복잡한 시각화: 수만 개의 점을 찍어야 하는 산점도(Scatter Plot)나 복잡한 물리 시뮬레이션.
4. 스크린샷 생성: 캔버스에 그려진 내용을 즉시 이미지 파일(png, jpg)로 변환해야 할 때.

요약

• SVG는 "문서"에 가깝습니다. 하나하나의 모양이 살아있는 개체여서 다루기 쉽고 깨끗합니다.
• Canvas는 "도화지"에 가깝습니다. 자바스크립트라는 붓을 이용해 아주 빠르게 그림을 그려낼 수 있지만, 한 번 그린 것을 고치려면 덧칠하거나 새로 그려야 합니다.