SVG vs Canvas

객체를 남길지, 픽셀을 다시 그릴지

확대 품질과 개별 조작이 중요하면 SVG, 빠른 장면 갱신과 픽셀 처리가 중요하면 Canvas가 어울립니다.

선택 기준은 결과물보다 수정 방식에서 갈립니다.

SVG를 고르는 경우

  • 로고, 아이콘, 다이어그램처럼 확대해도 선명해야 합니다.
  • 각 도형을 CSS나 이벤트로 따로 다뤄야 합니다.
  • title과 desc로 그래픽 설명을 남길 수 있습니다.

Canvas를 고르는 경우

  • 게임, 그림판, 이미지 필터처럼 매 프레임 새로 그립니다.
  • 수많은 점과 픽셀을 빠르게 갱신해야 합니다.
  • 대체 텍스트와 별도 설명 영역을 함께 준비합니다.
확대 품질 해상도 독립성이 필요하면 SVG가 유리합니다.
갱신 빈도 장면을 계속 다시 그리면 Canvas가 단순합니다.
접근성 그래픽 의미를 사용자가 읽을 방법을 함께 둡니다.