웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > webdevetc

svg 그리고 canvas 장단점 나열하기

Last Modified : 2020-12-21 / Created : 2017-04-27
2,876
View Count
svg 그리고 canvas의 장단점을 알아보려고 합니다. 제목의 범위가 너무 광범위한 것 같아 좀 더 범위를 좁혀 보자면... 웹개발이 필요한 경우 웹프론트 입장에서 svg, canvas 둘 중 하나를 사용해야 할 경우 어떤 방식을 사용하는게 좀 더 나은 선택일까요?

웹퍼블리셔 및 프론트엔드 입장에서 생각해보겠습니다. 일반적인 경우 이미지 및 svg를 사용하는 것이 더 편한 방법일 것 입니다. 이유야 많겠지만 이미지나 svg 포맷은 여러 시각화 툴에서 쉽게 사용하고 다운로드 받을 수 있다는 점도 큰 이유입니다. 사실 생산성을 위해 대부분 Figma와 같은 툴의 사용이 필요하며 canvas 형태로 아이콘이나 스태틱한 이미지를  지원하는 경우는 거의 없는 것도 큰 부분입니다.

특히 목적에 따라 분류하자면 svg를 사용하는 것이 재사용성 측면에서 큰 이점이 있습니다. 즉 svg를 사용하는 컴포넌트를 만들어 사용할 경우 크기가 색상 등 여러가지 프로퍼티나 메소드 등을 만들어 컴포넌트화 할 수 있기 때문입니다. 또한 svg는 웹표준을 따르고 내부 요소들 역시 css를 사용하여 제어가 가능하기 때문에 여러가지 이점이 많다고 할 수 있습니다.



! 마치면서

생각해보니 canvas를 svg와 비교하는 것은 다소 무리가 있는 것 같습니다. 그 이유가 canvas가 기능상 부족하다는 것은 절대 아닙니다. 기능 구현에 있어서는 실제로 svg 보다 더 많은 부분을 구현할 수 있죠. 다만 코드 구현이 더 어렵고 복잡할 수 있으므로 단순한 컴포넌트 등의 개발에는 적합하지 않겠죠. 하지만 canvas는 성능상의 가장 큰 이점을 가지기 때문에 이런 목적인 경우라면 당연히 canvas를 선택하는 것이 좋겠죠.

Previous

Internal Server error, 서버 500 에러는 어떤 경우에 발생하나요?

Previous

Postman을 사용한 서버 API 통신방법 알아보기