*SVG (Scalable Vector Graphics) (벡터 그래픽 기반, 파일에 의존)
메모리 내에서 유지 > 다시 렌더링할 때 코드결과를 통해 조작할 수 있는 유지 모드 그래픽 모델
- HTML과 마찬가지로 요소, 특성 및 스타일을 사용하여 문서에 빌드된다. (Javascript 와 css의 조합을 사용하여 조작이 가능하다.)
- svg가 삽입되면 div처럼 동작하고 HTMLDocument에 속하지만, 추가적인 인터페이스인 SVGDocument를 포함한다. (SVGDocument는 벨터그래픽과의 더 긴밀하고 더 풍부한 상호 작용을 제공한다.)
- 정적, 동적, 상호작용형 애니메이션이 될 수 있다.
- 독립적인 웹 애플리케이션 사용자 인터페이스를 제공
- 고도의 상호작호작용 애니메이션 사용자 인터페이스
- 데이터차트 및 그래프
- 벡터 이미지 편집
*Canvas (픽셀 조작 형식, 순수 스크립트 사용)
SVG와 같이 직사각형, 경로 및 이미지를 비롯한 즉시 모드 그래픽을 그리기 위한 더 많은 프로그래밍 환경 노출
- 즉시 모드 그래픽 렌더링은 그래픽을 화면에 직접 렌더링한 다음 그 후에는 구행된 작업에 대한 컨텍스트가 없는 '실행 후 자동' 모델
- 유지 모드와 달리 렌더링된 그래픽이 저장되지 않음
- SVG와 달리 스타일 지정도 없고 여러 형상에 대한 적중 감지에 대한 지원도 없음
- Canvas는 확장성을 지원하지 않으므로 확대/축소 시 급격하게 충실도가 떨어짐
- 상호작용하는 이미지 편집
- 데이터 시각화, 데이터 플롯, 렌더링 도형, 함수의 그래프: 격자 그래프 생성
- 이미지 분석: 히스토그램의 색상 사용
- 스프라이트와 배경등으로 게임 그래픽 렌더링
- canvas 의 최대 장점은 속도 (그린 이미지의 특정 부분을 인식하지 않아 브라우저 내부에선 그리기만함)
- 애니메이션에 더 효율적 (단순 movement는 svg가 낫지만 화면 전체를 다시 그리는 애니메이션에는 svg는 비효율적)
| Canvas | SVG |
|---|---|
| 픽셀 기반(Dynamic .png) | 백터 그래픽 기반 |
| 단일 HTML요소 | DOM의 부분이 되는 다중 그래픽 요소 |
| 스크립트를 통해서만 수정이가능 | 스크립트 및 CSS를 통해 수정가능 |
| 이벤트 모델/사용자 조작이 세분화됨(x, y) | 이벤트 모델/사용자 조작이 추상화됨(직사각형, 경로) |
| 성능은 표면이 작거나, 개체수가 많을 경우 또는, 두 가지 조건이 모두 충족. | 성능은 개체 수가 적거나, 표면이 클 경우 또는 두 가지 조건이 모두 충족. |