[Html] 그래픽 요소 - Canvas와 SVG

그래픽

• SVG, 캔버스를 사용한 2차원 그래픽과 CSS3, WebGL을 사용한 3차원 그래픽을 지원한다.

 

Canvas 요소란?

• canvas 요소는 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공한다.
• 이 요소는 그래픽을 위한 컨테이너(container) 역할만을 수행하므로, 실제로 그래픽을 그리기 위해서는 JavaScript 등의 스크립트 언어를 이용해야 한다.

canvas 요소의 속성

• canvas 요소는 테두리도 콘텐츠도 없는 웹 페이지 내의 단순한 사각형의 공간으로, 반드시 style 속성을 이용하여 캔버스의 크기를 설정해 주어야 한다.
• 스크립트(script)에서 canvas 요소에 접근하기 위해서는 해당 요소의 id 속성을 이용하면 된다.

<canvas id="drawCanvas" style="width:300px; height:200px; border: 1px solid #993300;">
    이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다!
</canvas>

사각형 그리기

context.strokeRect(10, 10, 250, 130);
context.fillStyle = "rgba(255,0,0,1)";
context.fillRect(20, 20, 200, 100);
context.clearRect(30, 30, 150, 50);

 

SVG(Scalable Vector Graphics) 요소란?

• svg 요소는 XML 기반의 W3C 그래픽 표준 권고안이다.
• 기존에 사용해 왔던 canvas 요소로는 점과 점을 연결해 수학적 원리로 그림을 그려 표현하는 벡터 이미지를 표현할 수 없었지만, svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해준다.
• svg 요소는 도표나 그래프 등 벡터 기반의 다이어그램을 표현하는 데 효과적이다.

사각형 그리기

<svg width="200" height="150">
    <rect width="200" height="150" stroke="orange" stroke-width="5" fill="yellow"/>
    이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!
</svg>

 

Canvas와 Svg의 차이

• canvas와 svg는 거의 같은 결과물을 얻을 수 있는 비슷한 동작을 하는 요소다. 하지만 canvas는 화면이 작거나 픽셀 수가 많을 경우(>10k)에 좋고, svg는 화면이 크거나 픽셀 수가 적을 경우(<10k)에 좋다.
• 또한 canvas는 복잡하고 고성능의 애니메이션 작업이나 동영상 조작 등의 작업에 잘 어울리고, svg는 고품질의 문서 작업이나 정적 이미지의 조작 작업 등에 잘 어울린다.

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/