canvas 와 svg의 장단점 비교 가이드: 선택 기준과 실제 활용 팁

Published at May 08, 2026 | Written by

Hwang Na-eun

웹 그래픽을 만들 때 개발자와 디자이너는 종종 canvas 와 svg의 장단점 때문에 고민합니다. 각각의 기술은 목적과 상황에 따라 강점과 약점을 가지므로, 올바른 선택은 성능과 유지보수, 사용자 경험에 큰 영향을 줍니다. 이 글에서는 canvas 와 svg의 장단점을 실무 관점에서 쉽게 정리하고, 어떤 상황에 어느 쪽을 선택해야 하는지 구체적으로 알려드립니다.

우리는 먼저 두 기술의 장점과 단점을 명확히 비교한 뒤, 렌더링 성능, 해상도, 이벤트 처리, 애니메이션, DOM 접근성, 파일 크기 등 핵심 항목을 상세히 다룹니다. 따라서 이 글을 읽으면 프로젝트 상황에 따른 현실적인 판단 기준을 얻을 수 있습니다.

canvas 와 svg의 장단점

빠른 픽셀 렌더링: canvas는 픽셀 단위로 그리기 때문에 복잡한 비트맵 연산이나 많은 프레임을 요구하는 애니메이션에 유리합니다.
벡터의 선명함: SVG는 벡터 기반이라 해상도에 무관하게 선명한 이미지를 제공합니다. 확대/축소 시 품질 저하가 없습니다.
상호작용 구현 편의성: SVG는 각 요소가 DOM에 매핑되므로 클릭이나 호버 같은 이벤트를 쉽게 다룰 수 있습니다.
제어와 유연성: canvas는 픽셀 레벨로 직접 제어하므로 복잡한 그래픽 효과(필터, 혼합모드 등)를 구현하기 쉽습니다.
파일 크기: 단순한 아이콘이나 로고 등은 SVG가 텍스트 기반이라 파일 크기가 작고 압축에도 유리합니다.

canvas 와 svg의 장단점

DOM 접근성 부족: canvas는 렌더링 결과가 단일 비트맵이므로 개별 도형에 바로 접근할 수 없습니다. 이벤트 처리가 복잡해질 수 있습니다.
해상도 종속성: canvas는 기본적으로 픽셀 기반이라 디바이스 픽셀 비율(DPR)에 따라 추가 처리가 필요합니다.
자원 소모: 대량의 객체를 매 프레임마다 다시 그려야 하는 경우 canvas가 CPU/GPU 리소스를 많이 사용합니다.
복잡한 DOM 관리: SVG는 각 요소가 DOM 노드이므로 요소가 많아지면 브라우저의 레이아웃·리플로우 비용이 커집니다.
스타일 통제의 한계: canvas는 CSS로 직접 스타일링할 수 없으며, 재사용성 측면에서 불리할 수 있습니다.

렌더링 성능: canvas 와 svg의 장단점 관점

먼저 렌더링 관점에서 보면, canvas는 픽셀을 직접 다루기 때문에 단일 캔버스에 많은 요소를 그리거나 복잡한 애니메이션을 처리할 때 유리합니다. 특히 프레임 단위로 장면을 갱신해야 할 때 성능 이점이 뚜렷합니다.

예를 들어 대량의 도형을 실시간으로 갱신해야 하는 경우, 아래와 같은 장점이 있습니다.

수천 개의 작은 요소를 한 번에 그릴 때 성능이 비교적 안정적이다.
GPU 가속을 활용하면 프레임 드롭을 줄일 수 있다.

반면에 SVG는 요소마다 DOM 노드를 생성하므로 요소 수가 수백 개를 넘어가면 레이아웃 계산과 이벤트 매핑 비용으로 성능이 저하될 수 있습니다. 따라서 복잡한 장면에서는 canvas를 고려하는 것이 일반적입니다.

해상도와 확장성: canvas 와 svg의 장단점 비교

해상도 관점에서 가장 큰 차이는 벡터 대 래스터의 본질적 차이입니다. SVG는 벡터라서 확대해도 깨지지 않고, 반대로 canvas는 기본 크기에서 픽셀 기반으로 그려집니다.

아래 표는 해상도와 관련된 실무적 고려사항을 간단히 정리한 것입니다.

항목	SVG	Canvas
확대/축소	무한 확장 가능	픽셀 한계(재렌더 필요)
고해상도 대응	자동	DPR에 맞춰 캔버스 크기 조정 필요
아이콘/로고	최적	비권장

따라서 레티나 디스플레이 같은 고해상도 환경에서는 SVG가 별다른 추가 작업 없이 선명함을 유지합니다. 반면 canvas는 DPR(scale)과 크기 재설정 로직을 넣어야 동일한 품질을 얻습니다.

상호작용과 이벤트 처리: canvas 와 svg의 장단점

인터랙티브한 UI를 만들 때는 이벤트 처리 방식이 중요한 고려사항입니다. SVG는 DOM 요소로 구성되므로 직접적인 이벤트 리스너를 붙이기 쉽습니다. 따라서 툴팁, 드래그, 클릭 같은 상호작용을 구현할 때 개발 생산성이 높습니다.

반면에 canvas는 캔버스 전체에 이벤트가 들어오고, 어떤 도형이 클릭되었는지 내부에서 계산해야 합니다. 이는 다음과 같은 추가 작업을 요구합니다.

마우스 좌표를 변환하여 어떤 객체에 해당하는지 판별
히트 테스트(hit test) 알고리즘 구현
상태 관리를 위한 별도 데이터 구조 유지

결론적으로, 상호작용이 단순하거나 요소 수가 적다면 SVG가 더 편합니다. 하지만 매우 복잡한 커스텀 피킹 로직이나 픽셀 기반 이펙트가 필요하면 canvas가 적합할 수 있습니다.

애니메이션과 프레임 제어: canvas 와 svg의 장단점

애니메이션을 만들 때 canvas는 프레임 단위 제어가 용이합니다. requestAnimationFrame을 이용해 매 프레임마다 픽셀을 직접 업데이트하면 정밀한 타이밍 제어와 필터 연산이 가능합니다. 아래 표는 두 기술의 애니메이션 특성을 요약합니다.

항목	SVG	Canvas
프레임 컨트롤	제한적(애니메이션 요소에 의존)	정밀 제어 가능
복잡한 픽셀 효과	제한적	자유롭게 구현 가능
성능(많은 오브젝트)	저하 가능	일반적으로 우수

그러나 SVG에서도 CSS 애니메이션이나 SMIL(일부 환경) 등을 활용해 간단한 애니메이션을 쉽게 구현할 수 있습니다. 따라서 애니메이션의 종류와 복잡도에 따라 적합한 기술을 선택해야 합니다.

예를 들어 인터랙티브 차트나 게임처럼 매 프레임 큰 변화가 있는 경우에는 canvas가 더 자주 선택됩니다. 반면 UI 애니메이션이나 아이콘의 간단한 상태 변화는 SVG가 유지 보수 측면에서 유리합니다.

DOM 접근성과 스타일링: canvas 와 svg의 장단점

웹 개발에서는 DOM과의 통합이 중요합니다. SVG는 요소가 DOM 노드이므로 CSS로 스타일을 조절하거나 JS에서 직접 조작할 수 있어 개발이 용이합니다.

예를 들어 다음과 같은 장점이 있습니다:

CSS 클래스 추가/제거로 색이나 투명도 변경 가능
애니메이션 라이브러리와 자연스럽게 통합
접근성(aria 속성) 지정으로 SEO 및 스크린리더 반응 향상

반면, canvas는 렌더링 결과가 이미지이므로 CSS로 내부 요소를 제어할 수 없습니다. 따라서 스타일 변경 시 전체를 다시 그려야 합니다. 종합적으로 DOM 통합이 필요하거나 접근성을 고려하면 SVG가 우위에 있습니다.

파일 크기와 로딩: canvas 와 svg의 장단점

파일 크기와 로딩 시간도 실무에서 무시할 수 없습니다. 일반적으로 단순한 벡터 그래픽(로고, 아이콘)은 SVG가 텍스트 기반이라 압축 시 매우 효율적입니다. 반면 복잡한 래스터 이미지는 PNG/JPEG 같은 포맷이 더 적합합니다.

실무적으로는 다음과 같은 판단 기준을 고려합니다.

아이콘이나 간단한 일러스트: SVG 권장
복잡한 사진·텍스처: 래스터(캔버스 사용 포함) 권장
애플리케이션에서 동적으로 그려야 하는 대규모 씬: canvas 권장

또한 네트워크 환경을 고려하면, SVG는 gzip 등 텍스트 압축에 의해 파일 크기가 크게 줄어드는 이점이 있습니다. 반대로 대형 캔버스 이미지를 서버에서 전송할 때는 이미지를 미리 압축하고 적절한 포맷을 선택하는 것이 중요합니다.

결론적으로, canvas 와 svg의 장단점은 상황에 따라 평가되어야 합니다. 고성능 애니메이션이나 많은 픽셀 연산이 필요한 경우 canvas가 더 적합하고, 해상도 독립성, DOM 통합, 접근성이 중요하면 SVG가 더 적합합니다.

지금 프로젝트의 요구사항을 목록으로 정리해 보세요. 그런 다음 렌더링 빈도, 요소 수, 상호작용 복잡도, 유지보수 용이성 등을 기준으로 위 비교를 적용하면 적절한 선택을 할 수 있습니다. 추가로 필요하시면 예제 코드나 체크리스트를 제공해 드릴 수 있으니 요청해 보세요.