SVG와 Canvas비교.

canvas를 처음 접했던 시기는 2015년쯤에 사용하였던 기억이 난다.
canvas를 이용하여 사용자가 태블릿pc에 서명을 하면 해당 정보를 jpg로 저장을 하거나, 좌표값을 저장하는걸 구현하여 다시 불러올 수 있도록 만들었었고, canvas로 그래프도 구현했었다.
Svg는 작년 프로젝트 진행시 간단한 그래프를 구현하는 용도로 사용했었다.
이번에 회사에서 그래프를 사용해야 해서 각종 그래프 api를 찾아 비교하던 중에 canvas, svg를 지원하는 그래프들이 있어서 이참에 차이점이 무엇인지 명확하게 알고 싶어서 찾아보았다.

SVG

SVG는 XML의 한 종류이기 때문에 XML의 문법을 그대로 이용할 수 있다.
SVG는 벡터를 기반으로 그래프를 그리며, 벡터 기반의 그래픽은 각 요소의 좌표를 조합하여 그림을 그리게 된다.
작은 데이터로도 도형을 그릴 수 있으며, 해상도가 바뀌거나 도형을 확대하더라도 선이 깨끗하게 표시되는 장점이 있다.
복잡한 도형은 계산해야 하는 좌표의 수가 많아서 처리하는데 시간이 많이 걸릴 수 있다.
SVG는 XML을 기반으로 하여, 모든 요소가 SVG DOM 내에서 사용할 수 있음을 의미하며, 요소에 자바스크립트 이벤트 핸들러를 첨부 할 수도 있습니다.
SVG에서, 각각 그려진 모양은 하나의 개체(오브젝트)로 기억됩니다.
SVG 객체의 특성이 변경되는 경우, 브라우저가 자동으로 형상을 다시 렌더링 할 수 있습니다.
해상도 독립적
이벤트 핸들러에 대한 지원
가장 큰 렌더링 분야와 응용 프로그램에 적합 (구글지도 등)
DOM이 복잡하면 렌더링도 복잡해져서 아무래도 느려짐.
게임앱(응용프로그램)에는 적합하지 않음.

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

Canvas

JavaScript를 통하여 다양한 그림을 그릴 수 있는 공간(Container)을 제공해주며,
독립된 해상도 SVG 그래픽을 활용하고 있다.
이는 그래프를 그리거나 게임 그래픽, 다른 기타 이미지를 실시간으로 그려서 사용할 수 있는 기능을 제공해 준다.
Canvas는 높이와 넓이 속성이 있는 그리기가 가능한 지역이라고 HTML코드에서 정의 된다.
일단 캔버스의 그래픽이 브라우저로 전달되어 그려진 후에 그 정보들은 지워집니다.
따라서 그것의 위치를 변경해야하는 경우, 전체 장면은 그래픽이 적용되었을 수있는 모든 개체를 포함하여, 다시 그려야만 합니다.
(코드를 수정하여 다시 브라우저로 전달하면 좀전의 그 그래픽 이미지는 삭제되고 새로운 그래픽이 표현 되는 방식 입니다.)
해상도에 의존
이벤트 핸들러에 대한 지원 없음
텍스트 렌더링 기능 미약
. PNG 또는 . JPG로 생성 된 이미지를 저장할 수 있음.
그래픽 집약적인 게임에 적합.

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

<canvas id="myCanvas" width="200" height="100"></canvas>

위 내용들은 w3schools과 구글링을 토대로 얻은 정보이며, 제가 생각하기에 가장 큰 차이점은
캔버스는 px단위여서 확대할 경우 찌그러져 보이겠고 그렇다면 모바일도 지원을 하게 될 경우 SVG를 사용해야 할 것 같네요.
모션이 들어가는 용도나 그래픽을 많이 사용할 경우에는 캔버스를 이용하고,
그래프나 지도를 사용하는 것은 SVG가 적합한 것 같습니다.