SVG와 Canvas 렌더링 상태

SVG는 도형 객체가 DOM에 남는 retained mode이고, Canvas는 픽셀을 다시 그리는 immediate mode에 가깝다.

비교 축	SVG	Canvas	판단 기준
상태 보관	도형이 DOM 요소로 남음	그린 결과만 bitmap에 남음	나중에 개별 요소를 선택해야 하는가
이벤트	요소별 클릭과 hover 가능	좌표 hit-test 직접 구현	개별 도형 상호작용이 많은가
접근성	title, desc, role 연결 쉬움	대체 DOM이나 설명 필요	그래픽 의미를 읽어야 하는가
성능	요소 수가 많으면 DOM 비용 증가	반복 렌더링과 픽셀 처리 유리	프레임마다 다시 그리는가
해상도	벡터라 확대가 선명	devicePixelRatio 대응 필요	고해상도 화면에서 흐려지지 않는가

SVG와 Canvas의 차이는 모양보다 브라우저가 그래픽 상태를 어디에 보관하는가에서 출발한다.