도형 수와 변경 빈도
적은 도형을 개별 조작하면 SVG가 편하고, 많은 픽셀과 빈번한 redraw는 Canvas가 맞을 수 있다.
요소 수와 프레임 비용을 함께 본다이벤트 처리
SVG는 도형별 DOM 이벤트를 받을 수 있고, Canvas는 좌표 기반 hit-test를 직접 구현해야 한다.
상호작용이 많으면 차이가 커진다접근성 고려
SVG는 title, desc, role로 의미를 붙이기 쉽지만 Canvas는 대체 텍스트와 별도 DOM이 필요하다.
그래프와 도표는 접근성 요구를 먼저 본다해상도 대응
Canvas는 devicePixelRatio에 맞춰 backing store 크기를 조정해야 선명하다.
CSS 크기와 실제 픽셀 크기는 다르다재그리기 전략
Canvas는 상태를 직접 보관하고 변경 때 필요한 영역을 다시 그린다.
지우지 않으면 이전 픽셀이 남는다SVG
개별 도형과 의미
아이콘, 차트, 다이어그램처럼 요소별 선택과 스타일링이 필요할 때
좋다.
너무 많은 node는 DOM 비용이 된다
Canvas
픽셀 기반 고빈도 그리기
게임, 입자, 이미지 처리처럼 매 프레임 직접 그리는 작업에
적합하다.
hit-test와 접근성은 직접 챙긴다
Event
상호작용 방식
SVG는 요소 이벤트, Canvas는 좌표 계산으로 대상 판별을
한다.
툴팁과 선택 UI에서 차이가 난다
DPI
선명도
Canvas는 devicePixelRatio 보정 없으면 고해상도 화면에서 흐려질
수 있다.
resize 때 다시 그린다