둘은 화면에 사용자가 지정한대로 그림이나 이미지를 생성하거나 그리는 역할을 합니다.
다만 몇 가지의 특징과 각각의 장단점이 있으니 그것에 대하여 알아보고 비교해 보도록 하겠습니다.
SVG
XML문법을 활용하여 그림을 그릴 수 있습니다.
즉 HTML태그처럼 사용하여 svg라는 태그 내부에서 여러 필요한 태그들을 가져다 쓰는 방식으로 사용자가 접할 수 있습니다.
SVG는 벡터를 확장하며 도형을 기반으로 그려 나가기 때문에 화면이 아무리 확대가 되어도 픽셀이 깨져 이미지가 흐릿하게 보이는 문제가 없이 선명합니다.
벡터라고 하면 어려워보이는데 점과 점 사이의 계산을 활용하여 그리는 계산이라고 생각하시면 됩니다. EX) 기하와 벡터?
다만 계산해야 하는 도형이나 점들이 많거나 복잡하면 처리하는데 있어 용량이 커지거나 시간적으로 비효율적일 수 있습니다.
위에서 설명했듯 HTML태그처럼 활용이 가능하기에 DOM에 직접적으로 올라가 렌더링에 영향을 끼칠 수 있습니다.
이러한 문제들로 인해 게임앱에는 적합하지 않습니다.
다만 확대하여도 깨지지 않고 선명하기에 주로 아이콘이나 버튼등의 UI를 구현할 때 유용하게 사용됩니다.
Canvas
Javascript를 통해 사용자가 그림을 그릴 수 있는 공간(Canvas)를 제공합니다.
HTML에 canvas라 하는 단일 태그로 존재하며 자바스크립트에서 DOM으로 접근해 요소를 받아와 해당 컨버스에 여러 로직을 작성하여 그림을 그릴 수 있습니다.
따라서 사용자의 역량에 따라 표현의 자유도가 높고 여러 모션이나 복잡한 동작이 있는 그래픽을 나타날 때, 적합합니다.
하지만 저수준의 API를 다뤄야 하기 때문에 상당히 코딩이 복잡합니다.
주로 게임앱에 활용될 것으로 보입니다.
