HTML 5 Canvas vs. SVG
canvas와 SVG는 브라우저에서 그래픽을 생성할 수 있지만, 그들은 기본적으로 다릅니다.
SVG
SVG는 XML을 사용하여 2D 그래픽을 설명하는 언어입니다.
SVG는 XML을 기반으로 하며, 이는 SVG DOM의 각 요소가 사용 가능하다는 것을 의미합니다. 특정 요소에 JavaScript 이벤트 처리기를 추가할 수 있습니다.
SVG에서는 각 그래픽이 객체로 간주됩니다. SVG 객체의 속성이 변경되면 브라우저가 그래픽을 자동으로 재생성할 수 있습니다.
Canvas
canvas는 JavaScript를 통해 2D 그래픽을 그립니다.
canvas는 픽셀 단위로 렌더링됩니다.
canvas에서는 그래픽이 그려지면 그래픽에 대한 브라우저의 주의가 더 이상 필요하지 않습니다. 그 위치가 변경되면 전체 씬도 다시 그려져야 하며, 그래픽에 의해 덮혀 있을 수 있는 어떤 대상도 포함됩니다.
Canvas와 SVG 비교
다음 표는 canvas와 SVG 간의 몇 가지 차이점을 나열합니다.
Canvas
- 해상도에 의존
- 이벤트 처리기를 지원하지 않음
- 약한 텍스트 렌더링 능력
- .png 또는 .jpg 형식으로 결과 이미지를 저장할 수 있습니다
- 이미지 집중적인 게임에 가장 적합합니다. 많은 대상이 자주 다시 그려집니다.
SVG
- 해상도에 의존하지 않음
- 이벤트 처리기를 지원
- 대형 렌더링 영역을 가진 애플리케이션에 가장 적합합니다 (예: 구글 맵)
- 복잡도가 높으면 렌더링 속도가 느려집니다 (DOM을 과도하게 사용하는 모든 애플리케이션은 빠르지 않습니다)
- 게임 애플리케이션에 적합하지 않음
