Graphics Choice

SVG vs Canvas 선택 흐름도

그래픽 방식은 편집 대상인지, 픽셀을 자주 다시 그리는지에 따라 달라진다.

어떤 기술을 고를 것인가

render mode

SVG

도형이 DOM 요소라 CSS와 이벤트 제어가 쉽다.

Canvas

픽셀을 직접 그려 대량 갱신에 유리하다.

벡터 UI

아이콘, 차트, 다이어그램처럼 선명한 확대가 필요하면 SVG가 맞다.

고빈도 렌더

게임, 파티클, 이미지 처리처럼 매 프레임 갱신하면 Canvas를 쓴다.

이벤트

개별 도형 클릭과 접근성이 중요하면 SVG가 편하다.

대량 객체

요소 수가 많아 DOM 비용이 커지면 Canvas가 안정적이다.

표현 대상갱신 빈도이벤트 필요기술 선택
읽는 법

SVG는 구조를 남기는 그래픽, Canvas는 매번 다시 그리는 그래픽에 가깝다. 선택 기준은 모양보다 갱신 방식이다.