Vector
SVG는 확대해도 선명한 도형과 텍스트를 DOM 요소로 보관합니다.
SVG와 Canvas 선택 판단
SVG는 의미 있는 벡터 요소를 문서처럼 다루고, Canvas는 픽셀을 빠르게 다시 그리는 작업에 어울립니다.
DOM
SVG 내부 요소는 CSS와 이벤트로 개별 조작할 수 있습니다.
Bitmap
Canvas는 좌표에 픽셀을 그리며 많은 변화에 적합합니다.
Redraw
Canvas 화면은 상태를 직접 저장하고 필요할 때 다시 그려야 합니다.
아이콘, 로고, 축이 있는 소형 차트처럼 확대 배율과 스크린 리더 구조를 유지해야 할 때 SVG를 고릅니다.
게임, 입자 효과, 실시간 시각화처럼 반복 렌더링이 많을 때 유리합니다.
SVG는 요소 단위 이벤트가 쉽고 Canvas는 좌표 계산이 필요합니다.
요소 수가 많아질수록 SVG DOM 비용과 Canvas 재그리기 비용을 비교합니다.
선택 가능한 그래픽 요소
그래픽의 각 부분을 HTML 요소처럼 선택해야 하는지 먼저 판단합니다.
SVG와 Canvas 선택 실수 방지
Canvas는 그린 결과가 자동으로 의미 정보를 갖지 않으므로 설명을 보완합니다.
SVG와 Canvas 선택 판단
같은 그림을 SVG와 Canvas 중 어느 쪽으로 만들지 근거를 말합니다.