HTML에서 그림 그리기 기능에는 <Canvas> 와 <SVG> 태그가 있다.
SVG란?
- SVG는 확장 가능한 벡터(Vector) 그래픽을 의미한다.
- SVG는 웹을 위한 벡터 기반 그래픽을 정의하는데 사용합니다.
- SVG는 XML 형식의 그래픽을 정의합니다.
- 확대 하거나 크기를 변경해도 품질은 전혀 손상이 없습니다.
- 동영상으로 된 SVG의 모든 요소와 모든 속성은 W3C의 권장사항에 포함됩니다.
* Canvas(캔버스)는 비트맵(Bitmap) 그래픽을 표현합니다.
SVG와 Canvas의 차이점
|
- SVG는 XML의 2D 그래픽을 기술하는 언어입니다. - SVG는 XML을 기반으로하여 모든 요소가 SVG DOM내에서 사용할 수 있음을 의미합니다.
- 요소에 자바스크립트 이벤트핸들러를 첨부할 수 있습니다.
- SVG에서 각각 그려진 모양은 하나의 객체(Object)로 기억됩니다.
- SVG 객체의 특성이 변경되는 경우, 브라우저가 자동으로 형상을 다시 렌더링 할 수 있습니다.
|
- Canvas는 자바스크립트로 2D그래픽을 그려냅니다. - Canvas는 픽셀에서 픽셀로 렌더링됩니다.
- 캔버스의 그래픽이 브라우저로 전달되어 그려진 후에 그 정보들은 지워집니다. 따라서 그것의 위치를 변경해야하는 경우, 전체 장면은 그래픽이 적용되었을 수 있는 모든 객체를 포함하여 다시 그려야만 합니다.
(코드를 수정하여 다시 브러라우저로 전달하면 좀전의 그 그래픽 이미지는 삭제되고 새로운 그래픽이 표현 되는 방식입니다. )
|
SVG와 Canvas의 비교
|
Canvas |
SVG |
|
- 해상도에 의존 - 이벤트 핸들러에 대한 지원 없음 - 텍스트 렌더링 기능 미약 - PNG / JPG로 생성 된 이미지를 저장할 수 있음. - 그래픽 집약적인 게임에 적합
|
- 해상도 독립적 - 이벤트 핸들러에 대한 지원 - 가장 큰 렌더링 분야와 응용 프로그램에 적합(구글지도 등) - DOM이 복잡하면 렌더링도 복잡해져서 아무래도 느려짐 게임앱 (응용프로그램)에는 적합하지않습니다.
|
'프론트엔드 > HTML' 카테고리의 다른 글
| [CSS] 브라우저 기본값 초기화 리셋 reset.css 개념 잡기 (0) | 2020.06.16 |
|---|---|
| 엔티티 (entity) / 엔터티 HTML 특수문자 유니코드 리스트 (0) | 2020.01.21 |
| [HTML] 웹표준 코딩 용어 GNB, LNB, SNB, FNB 네비게이션 클래스명 이름 종류와 차이 (0) | 2020.01.17 |
| [HTML] 기본 카테고리 콘텐츠 정리 (0) | 2019.12.20 |
| [HTML5] 기본 문법 태그 개념 & 정리 Introduction & Syntax (0) | 2019.12.19 |