1.3 Canvas vs. SVG

1.3.1 Canvas 장점과 단점

Canvas는 픽셀로 이루어진 비트맵데이터입니다. 정교하고 화려한 표현이 가능하고 픽셀 수가 많아질 수록 화질이 좋아진다는 장점이 있지만 용량이 커지고 확대 또는 축소로 인한 화질 문제를 유발 할 수 있습니다. 그렇지만 동작되는 모든 웹 브라우저에서 동일하고 세밀하게 화면이 나올 수 있으며 지원되는 모든 기능을 구현할 수 있습니다. 이로인해 유지보수 필요성이 거의 없고 컨트롤 개체가 많아도 비교적 바른 속도로 동작됩니다. 하지만 개발이 오래 걸리고, 버그가 많이 발생할 수 있습니다. 게다가 마우스 이벤트는 영역을 검사하면서 처리해야해서 각 개체마다 이벤트가 존재하는 HTML에 비해 복잡합니다.

1. 장점

• 그라디언트, 이미지, 도형, 텍스트 등 다양한 그래픽 요소를 처리할 수 있습니다.
• Canvas는 HTML5 요소로 웹 브라우저에서 지원되며, 모바일 기기 및 다양한 운영체제에서 동작해 크로스 플랫폼 호환성이 좋습니다.
• 사용자 입력에 반응하는 상호작용성이 좋아, 이벤트 처리를 통해 상호작용하는 그래픽 요소를 구현합니다.
• 프레임 기반 애니메이션 및 웹 게임 개발에 적합합니다.
• 하드웨어 가속을 사용해 그래픽을 처리하므로 높은 성능을 제공합니다.

2. 단점

• 그래픽 처리가 픽셀 단위로 이루어져 고해상도의 그래픽 처리에는 성능이 저하되며 아직 저수준의 그래픽 기능밖에 제공하지 않습니다.
• 상태 관리를 개발자가 수동으로 처리해야하므로 코드의 복잡성이 증가할 수 있습니다.
• 그래픽 기반 기술이므로 스크린 리더 등의 보조 기술에서는 접근성에 제약이 걸릴 수 있습니다.
• 비트뱁 기반의 그래픽 처리에 사용되므로 벡터 그래픽 지원에는 한계가 있습니다.

1.3.2 SVG의 장점과 단점

1. 장점

• 벡터 기반 이미지로서 해상도의 제한 없이 확대 및 축소가 가능하므로, 고해상도의 화면에서도 선명한 이미지를 제공합니다.