html5 SVG와 캔버스의 차이점

SVG와 캔버스의 차이점

SVG는 XML에서 2D 그래픽을 설명하기위한 언어입니다.

 

Canvas는 2D 그래픽을 즉석에서 그립니다 (JavaScript 사용).

 

SVG는 XML 기반이며, 이는 모든 요소가 SVG DOM 내에서 사용 가능하다는 것을 의미합니다. 요소에 JavaScript 이벤트 핸들러를 첨부 할 수 있습니다.

 

SVG에서 그려진 각 도형은 객체로 기억됩니다. SVG 객체의 속성이 변경되면 브라우저는 자동으로 모양을 다시 렌더링합니다.

 

캔버스는 픽셀 단위로 렌더링됩니다. 캔버스에서 그래픽이 그려지면 브라우저에서이를 잊어 버립니다. 위치를 변경해야하는 경우 그래픽으로 덮여있을 수있는 모든 객체를 포함하여 전체 장면을 다시 그려야합니다.

 

캔버스와 SVG의 비교

아래 표는 Canvas와 SVG의 중요한 차이점을 보여줍니다.

Canvas	SVG
해상도에 따라 다름 이벤트 핸들러에 대한 지원이 없습니다. 불쌍한 텍스트 렌더링 기능 결과 이미지를 .png 또는 .jpg로 저장할 수 있습니다. 그래픽 집약적 인 게임에 적합	해상도 독립적 이벤트 핸들러 지원 대형 렌더링 영역 (Google지도)이있는 애플리케이션에 가장 적합합니다. 복잡한 경우 느린 렌더링 (DOM을 많이 사용하는 모든 것이 느려집니다) 게임 응용 프로그램에는 적합하지 않습니다.