SVG vs Canvas | Notion

SVG

확장 가능한 벡터 그래픽(Scalable Vector Graphics)

XML 기반의 2차원 그래픽

아이콘, 이미지, 그래프, 사용자 인터페이스(UI)등에 널리 쓰임.

DOM의 일부로서 각 개체별로 HTML 엘리먼트가 추가됨

벡터이기 때문에 이미지의 크기에 상관 없이 선명하게 유지되고 모양이 많이 복잡하지 않은 경우 파일 사이즈도 작다.

CSS와 자바스크립트를 이용해서 조작이 가능

크기(width/height)가 큰 이미지 표현에 유리

모양이 복잡하고 개체수가 많을수록 성능이 떨어짐

canvas로 그림판 만들기