svg vs canvas

마이크로소프트, svg와 canvas 중에서 선택하기

한글문서

https://msdn.microsoft.com/ko-kr/kr/library/gg193983(v=vs.85).aspx

영어문서

https://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx

canvas <----(scenario)-----> svg

Each individual scenario might fall closer to canvas or svg, meaning that one technology over the other is better for that scenario. If a scenario falls in the middle of the spectrum, either technology is a viable option.

각 시나리오는 canvas나 svg에 더 어울리는데, 즉 시나리오에 더 잘맞는 기술이 따로 있다는 말이다. 만약 시나리오가 스펙트럼의 가운데 있다면, 어떤 기술을 사용해도 상관없다. 

svg: Scalable Vector Graphics, retained mode graphics model that persist in an in-memory model that can be manipulated through code results in re-rendering.

다시 그릴 때, 코드 결과를 통해 조작할 수 있는 in-memory 모델을 유지하는 retained mode graphics model

svg의 장점중 하나는 복잡하지 않게 인터랙션을 구현하는 것이다. svg는 html처럼 프로그램가능한 DOM을 갖고 있어서, 이벤트 모델 또한 갖고 있다. 

canvas

Immediate mode graphic rendering is a "fire and forget" model that renders graphics directly to the screen and then subsequently has no context as to what was done.

(캔버스->) 즉시모드 그래픽 렌더링은 그래픽을 스크린에 즉시 그리고 뭘 그렸는지 내용을 갖고 있지 않는 "화면에 뿌리고, 잊는"모델이다.

In contrast to retained mode, the rendered graphics are not saved; a developer needs to re-invoke all drawing commands required to describe the entire scene each time a new frame is required, regardless of actual changes.

유지 모드와 달리 렌더링된 그래픽이 저장되지 않는다; 개발자는 실제로 변화가 있든 없든 간에 프레임마다 매번 전체 화면에 필요한 드로잉 명령어를 다시 호출해야한다.

Canvas vs. SVG 를 고를 때 도움될만한 표

Canvas	SVG
픽셀 기반	Shape 기반
하나의 HTML 요소	DOM의 일부가 되는 여러 그래픽 요소
스크립트로만 수정 가능	스크립트, CSS로 수정 가능
이벤트 모델/사용자 인터랙션이 세분화(x, y)	이벤트 모델/사용자 인터랙션이 추상화(rect, path)
작은 표면, 많은 객체(만개 이상)일 때 성능이 좋음	객체가 적고(만개 이하), 큰 표면일 때 성능이 좋음

스크린이 클수록, canvas는 그리기 위해 더 많은 픽셀이 필요하므로 성능이 떨어지기 시작한다. SVG는 스크린에 그릴 객체의 수가 많아질 수록, DOM에 계속 추가되므로 성능이 떨어지기 시작한다.