[Web] SVG와 Canvas의 차이

 

부족한 지식은 웹서핑을 통해 수집하여 하나의 글로 정리한 것입니다. 작성한 내용을 기반으로 '절대적으로 A보다 B가 더 좋다!'라는 취지의 내용이 아닙니다. 여러 가지 환경에 따라 성능의 차이는 작성한 내용과 다를 수 있습니다.

안녕하세요.

웹 개발에 있어서 올바른 기술을 선택하는 것은 프로젝트의 성공에 상당한 영향을 미칠 수 있습니다. SVG(Scalable Vector Graphics)와 캔버스(Canvas)는 웹 상에서 그래픽을 생성하는 데 널리 사용되는 두 가지 인기 있는 옵션입니다. 하지만 개발 요구 사항에 가장 적합한 선택은 무엇일까요? SVG와 Canvas의 차이점을 알아보도록 하겠습니다.

들어가며

HTML는 사용자 경험을 향상시키기 위해 더 나은, 표준화된, 풍부한 그래픽을 제공하기 위해 꾸준히 진화하고 있습니다. 이를 통해 웹 개발자들은 전문 기술을 사용하지 않거나 브라우저별 코드를 작성하지 않고도 표준 기반의 웹 기술을 활용하여 그래픽이 풍부한 상호작용적인 사이트 또는 애플리케이션을 만들 수 있는 기회를 제공합니다.

SVG(Scalable Vector Graphics)란?

SVG(Scalable Vector Graphics)는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)의 약자로  Microsoft 및 Adobe의 제안으로 1999년에 도입된 XML 기반 벡터 그래픽 포맷입니다. 

SVG의 주요 특징

● 유지모드 방식: 미리 계산되어 저장된 후 필요할 때 표시
● 확장성: 어떤 크기로 확대해도 화질 저하 없음
● 편집 용이성: 텍스트 기반으로 간편한 편집 가능
● 애니메이션 지원: 동적인 SVG 애니메이션 제작 가능
● 웹 친화력: HTML과 함께 사용하여 웹페이지에 삽입 가능
● 파일 크기: 텍스트 기반으로 용량 적음
● 다양한 활용: 로고, 아이콘, 차트, 그래프 등 다양한 용도로 활용 가능

SVG 활용 분야

● 웹 디자인: 로고, 아이콘, 웹 페이지 요소 디자인
● 인쇄 디자인: 명함, 브로셔, 포스터 등 인쇄물 제작
● 데이터 시각화: 차트, 그래프 등을 통한 데이터 표현
● 애니메이션: 웹 애니메이션, 설명 영상 제작
● 그래픽 편집: 벡터 기반 편집 도구로 이미지 수정

SVG의 장점

● 해상도 독립성: 반응형 디자인에 완벽합니다.
● 쉬운 조작성: 요소는 CSS와 JavaScript로 스타일링 및 애니메이션화 할 수 있습니다.
● 접근성: SVG 이미지는 스크린 리더 및 검색 엔진에 액세스 가능합니다.

SVG의 단점

● 성능 오버헤드: 복잡한 SVG 그래픽을 렌더링하는 데 리소스가 많이 필요할 수 있습니다.
● 복잡한 애니메이션에 대한 제한된 지원: 복잡한 장면 처리에 대해 Canvas보다 성능이 낮을 수 있습니다.

SVG는 웹 디자인, 인쇄 디자인, 데이터 시각화 등 다양한 분야에서 활용되는 강력한 도구입니다. 해상도에 영향을 받지 않는 확장성과 편집 용이성, 웹 친화력 등의 장점을 지닌 SVG는 미래 웹 표준의 핵심 요소로 자리매김할 것입니다.

캔버스(Canvas)

캔버스(Canvas)는 HTML5에서 제공하는 비트맵 기반 2D 그래픽 API입니다. 이는 웹 페이지에 실시간 그래픽을 직접 조작하여 표현할 수 있게 해 줍니다. 즉, 이미지 파일 없이 JavaScript를 통해 직접 그림을 그릴 수 있다는 점에서 기존 방식과 차별화됩니다. 

Canvas의 주요 특징

● 즉시 모드 방식: 그래픽을 화면에 직접 렌더링하여 실시간 반영
● 높은 성능: 브라우저 내에서 실행되어 빠른 처리 속도 제공
● 풍부한 표현력: 다양한 도구와 기능을 통해 원하는 이미지 자유롭게 제작

Canvas의 활용 분야

● 게임: 웹 기반 게임 개발데이터
● 시각화: 차트, 그래프 등을 통한 데이터 표현
● 애니메이션: 웹 페이지에 동적인 효과 추가
● 그림 도구: 온라인 그림 도구 제작

Canvas의 장점

● 높은 개발 효율성: 이미지 파일 관리 없이 JavaScript로 직접 그래픽 제작 가능
● 실시간 반영: 변경 사항이 화면에 즉시 반영되어 빠른 개발 및 테스트 가능
● 다양한 플랫폼 지원: 대부분의 브라우저에서 동작 가능

Canvas의 단점

● 해상도 의존성: 이미지 해상도에 따라 품질 저하 발생 가능
● 편집 및 조절 제약: 이미지 편집이나 크기 조절 시 성능 저하 가능

Canvas는 웹 페이지에 풍부한 2D 그래픽 경험을 제공하는 강력한 도구입니다. 높은 성능과 실시간 반영 특성을 활용하여 다양한 분야에서 활용할 수 있습니다.

유지 모드와 즉시 모드 

유지 모드는 그래픽 작업을 수행하는 두 가지 API 방식 중 하나로, 다른 방식으로는 즉시 모드가 있습니다.

 

유지 모드 (Retained Mode) 

이 모드에서는 그래픽 요소가 미리 계산되어 저장된 후 필요할 때 표시됩니다. 즉, 그래픽 요소는 미리 계산되어 파일에 저장되며, 이 파일은 필요할 때 불러와 표시됩니다. 이 모드는 복잡한 그래픽 요소를 처리하는 데 유용합니다. 예를 들어, 웹 페이지나 애플리케이션에서 복잡한 도형이나 이미지를 표시하는 데 사용됩니다. 유지 모드에서는 그래픽 요소를 미리 계산하여 파일 크기를 줄이고 편집하기 쉽게 만들 수 있습니다.

 

유지모드가 표시되는 과정 (https://learn.microsoft.com)

즉시 모드 (Immediate Mode)

이 모드에서는 그래픽 요소가 실시간으로 그려집니다. 즉, 사용자가 그림을 그리는 동안 화면에 직접 그려집니다. 이 모드는 실시간으로 변경되는 그래픽에 적합합니다. 예를 들어, 게임 개발에서 캐릭터나 객체의 움직임을 실시간으로 표시하는 데 사용됩니다. 이 모드에서는 그림을 그리는 동안 변경된 부분만 업데이트하여 성능을 향상시킬 수 있습니다.

즉시모드가 표시되는 과정 (https://learn.microsoft.com)

 

유지 모드는 초기화, 상태 유지 관리, 정리 등 더 많은 작업을 수행해 주므로 사용이 더 간단하다는 장점이 있지만 라이브러리에서 보여질 화면을 모델링하기 때문에 유연성이 떨어지는 경우가 많습니다. 또한 범용으로 보여질 화면 모델링을 제공해야 하므로 메모리 요구 사항이 더 높을 수 있습니다. 이에 반해 즉시 모드를 사용하면 보일 대상에 맞춘 최적화를 구현할 수 있습니다.

벡터 그래픽

벡터 그래픽은 2차원 그래픽으로 점, 선, 면, 복잡한 도형 등을 이용하여 그림을 표현하는 방식입니다. 벡터 그래픽은 확대 또는 축소 시에도 품질이 유지되며, 픽셀 기반 그래픽에 비해 파일 크기가 작고, 편집이 쉽습니다.

무슨 차이가 있는 걸까?

일반적으로 그래픽에 관련된 지식이 낮거나, 이제 막 개발을 시작하는 개발자의 경우 Canvas를 사용할 가능성이 높습니다. 이는 다시 말해 쉽고 간편하게 쓸 수 있는 것은 Canvas라는 이야기입니다. 하지만 여기서 "성능"이라는 것이 등장합니다. 트래픽이 많은 웹사이트에서는 성능이 절대적으로 중요합니다. 일반적으로 Canvas의 성능이 SVG에 비해 뛰어난 것으로 여겨지지만 '그래서 Canvas가 확실한 선택이야!'라는 의미는 아닙니다. 

Canvas	SVG
비트맵 기반	벡터 기반
단일 HTML 요소	DOM의 일부가 되는 여러 그래픽 요소
스크립트를 통해서만 수정 가능	스크립트 및 CSS를 통해 수정 가능
이벤트 모델/사용자 상호작용이 세분화됨 (x, y)	이벤트 모델/사용자 상호작용이 추상화됨 (rect, path)
보여질 화면이 작고, 객체 수가 많을 때 성능이 우수 (>10,000)	보여질 화면이 넓고, 개체 수가 적을 때 성능이 우수 (<10,000)

 

 아래의 비교차트를 보면 화면의 크기가 커질수록 화면에 그려야 할 픽셀이 늘어나게 되어 Canvas의 성능이 급격하게 저하되는 모습을 확인할 수 있습니다. 화면에 표시해야 할 객체 수가 증가함에 따라서는 객체를 DOM에 지속적으로 추가해야 하기 때문에 SVG의 성능이 급격하게 저하되기 시작합니다. 

SVG와 Canvas의 성능 비교표 (https://learn.microsoft.com)

Loading time

SVG는 일반적으로 Canvas보다 로딩 시간이 빠릅니다, 특히 단순한 그래픽 및 아이콘의 경우에는 더욱 빠릅니다. SVG 이미지는 XML 기반이며 효율적으로 압축될 수 있으므로 로딩에 더 적은 대역폭이 필요합니다.

Animation

SVG는 간단한 애니메이션에 적합하지만, Canvas는 복잡한 애니메이션 및 게임에 적합합니다. Canvas는 픽셀 수준에서 그래픽을 렌더링 하기 때문에 더 부드러운 애니메이션 및 더 좋은 성능을 제공할 수 있습니다.

모바일 호환성

SVG는 모바일 기기에서 다양한 화면 크기와 해상도에 적응할 수 있습니다. Canvas 성능은 하드웨어 기능 및 브라우저 최적화에 따라 모바일 장치에서 다양할 수 있으며 이에 따른 불확실성을 초래할 수 있습니다.

SEO

SVG 이미지는 텍스트 기반이기 때문에 검색 엔진에서 색인화될 수 있습니다. 웹 페이지에 SVG 그래픽을 포함하면 SEO 순위를 향상시키고 웹 사이트의 전체 접근성을 향상시킬 수 있습니다. 그러나 Canvas 그래픽은 검색 엔진에서 색인화되지 않으며 SEO에 영향을 줄 수 있습니다.

 

위의 성능 비교 결과는 구현 방법 및 동작중인 플랫폼, 하드웨어 그래픽 가속 사용 여부, Javascript 엔진 속도에 따라 차이가 있을 수 있습니다.

언제, 어떤 것을 사용해야 하는가?

이럴 때 Canvas가 더 좋습니다!

● 동적 콘텐츠: 실시간 처리, 고성능이 요구되는 게임, 애니메이션 및 멀티미디어 애플리케이션 
● 픽셀 조작: 픽셀에 대한 정확한 제어가 필요한 이미지 편집 도구 및 그림 애플리케이션 
● 오프라인 애플리케이션: 외부 리소스에 의존하지 않는 게임 및 그림 편집기와 같은 오프라인 애플리케이션

이럴 때 SVG가 더 좋습니다!

● 정적인 그래픽: 크기를 자유롭게 조절해야 하는 아이콘, 로고 및 그림과 같은 정적 그래픽
● 데이터 시각화: 상호작용성과 접근성이 필요한 차트 및 그래프
● SEO 친화적 그래픽: 텍스트 기반의 특성으로 인해 검색 엔진 순위 향상 가능

 

SVG와 Canvas가 어떤 상황에 유리한가? (https://learn.microsoft.com)

FAQ

SVG와 Canvas를 혼합하여 사용할 수 있나요?

네, SVG와 Canvas를 혼합하여 사용할 수 있습니다. 예를 들어, SVG를 사용하여 정적인 이미지를 렌더링하고 Canvas를 사용하여 그 위에 동적으로 생성된 그래픽을 추가할 수 있습니다.

SVG와 Canvas를 이용할 때 성능 최적화를 위해 주의해야 할 점은 무엇인가요?

SVG의 경우에는 요소의 개수를 최소화하고, CSS 및 JavaScript를 사용하여 GPU 가속을 활성화하고 렌더링 성능을 최적화할 수 있습니다. Canvas의 경우에는 그래픽 요소를 최소화하고, 그래픽 처리를 위한 최적화된 알고리즘을 구현하여 성능을 향상시킬 수 있습니다. 또한 Canvas의 경우 웹 워커(Web Worker)를 사용하여 그래픽 처리를 병렬화하고 성능을 최적화할 수도 있습니다.

SVG와 Canvas를 이용할 때 고려해야 할 보안적인 측면은 무엇인가요?

SVG 파일은 XML 기반의 텍스트 파일로써, 일반적으로 안전한 포맷입니다. 그러나 SVG 파일에는 스크립트를 포함할 수 있으며, 이를 통해 크로스 사이트 스크립팅(XSS) 공격이 가능합니다. 따라 외부 리소스 로드를 허용하지 않거나, 외부 스크립트 실행을 차단하는 등의 보안 설정을 통해 취약점을 방지할 수 있습니다. 또한 사용자 입력을 받는 경우에는 입력 유효성 검사를 수행하여 악의적인 코드 삽입을 방지해야 합니다.

결론

SVG와 캔버스는 웹 개발에서 그래픽을 구현하는 데에 중요한 기술로 자리매김하고 있습니다. 각각의 기술은 고유한 특성과 장단점을 가지고 있으며, 프로젝트의 목적과 요구 사항에 따라 선택되어야 합니다. SVG는 벡터 그래픽을 지원하여 확대/축소에 민감하지 않고, CSS와 JavaScript와의 통합이 용이하며, 웹 접근성을 고려하여 디자인되어 있습니다. 한편, Canvas는 실시간으로 그래픽을 렌더링하여 인터랙티브한 웹 애플리케이션을 구현하는 데에 유용합니다. 이러한 특성을 고려하여 SVG와 Canvas를 적절하게 활용하여 보다 우수한 사용자 경험을 제공할 수 있습니다.

마치며

지금까지 SVG와 Canvas를 알아보았습니다. 실제로 개발을 하면서 SVG에 대한 이해가 필요한 상황이 있어서 간단히 몇 줄의 문장으로 정리한 글을 조금 더 상세하게 알아보고자 레퍼런스의 내용을 참조하여 정리하였습니다. 잘못된 내용이 있다면 언제든지 댓글로 알려주시면 수정하도록 하겠습니다.

 

읽어주셔서 감사합니다.

레퍼런스

Retained Mode Versus Immediate Mode

SVG vs canvas: how to choose

MDN Web Docs - SVG 

MDN Web Docs - Canvas

Canvas Tutorial

 

 

 

오타 혹은 잘못된 내용이 있다면 부담없이 댓글로 알려주세요 :)
문장을 다듬는데 ChatGPT의 도움을 받았습니다