HTML5에 새롭게 추가된 Canvas 태그와 SVG에 대해서 알아 보자.

Canvas가 추가된 이유는 HTML 기능만으로 플래시와 같은 기술을 대체하고자 하는데 목적이 있다고 볼 수 있다.

 

 

1. Canvas

 

Canvas는 코드를 이용해서 브라우저에 이미지를 그리거나 애니메이션을 가능케 할 수 있다.

하지만 Canvas 태그 자체에는 아무런 기능이 없다.

다만 그림이 그려지는 영역을 표시해 주는 역할만 하고 나머지 부분은 자바스크립트를 이용해서 그림을 그리게 된다.

Canvas는 픽셀 이미지이기 때문에 확대할 경우 깨끗한 이미지를 기대하긴 어렵다.

 

 

 

 

2. SVG

 

SVG는 Scalable Vector Graphics의 약자로 크기 조절이 가능한 벡터 이미지이다.

SVG는 .svg라는 확장자를 지닌 파일로 존재할 수도 있고, HTML 내부에 코드가 존재할 수도 있다.

SVG는 Canvas와 달리 XML로 구성되어 있으며 벡터 이미지이기 때문에 확대를 해도 이미지 손상이 전혀 없다.

사실 SVG는 플래시에서 사용하는 벡터 그래픽을 웹 표준 방식으로 표현하기 위해 만들어진 웹 표준 기술이다.

 

Canvas와 SVG는 실제 업무에서는 아직 많이 사용하지 않기 때문에 차후에 좀 더 자세히 다뤄보도록 하겠다.

 

 

+ Recent posts