SVG와 캔버스의 차이점

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

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

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

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

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

캔버스와 SVG의 비교

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