캔버스 vs SVG: 적합한 도구 선택하기

HTML5 Canvas와 SVG는 모두 놀라운 그래픽과 시각적 경험을 만들 수 있는 표준 기반 HTML5 기술입니다. 이 기사에서 질문하고자 하는 것은 다음과 같습니다: 프로젝트에서 어느 것을 사용해야 하는지 중요합니까? 다시 말해, HTML5 Canvas를 SVG보다 선호하는 어떤 사용 사례가 있습니까?

먼저 HTML5 Canvas와 SVG에 대해 몇 가지 소개하겠습니다.

HTML5 Canvas란?

다음은 WHATWG 사양이 canvas 요소를 소개하는 방식입니다:

canvas 요소는 스크립트에 해상도에 따른 비트맵 캔버스를 제공하며, 이를 사용하여 그래프, 게임 그래픽, 예술 또는 기타 시각적 이미지를 실시간으로 렌더링할 수 있습니다.

다시 말해, <canvas> 태그는 JavaScript 프로그래머블 인터페이스를 사용하여 픽셀 단위로 이미지를 생성 및 조작할 수 있는 표면을 노출시킵니다.

기본 코드 샘플입니다:

HTML:

<canvas id="myCanvas" width="800" height="800"></canvas>

JavaScript:

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = '#c00';
context.fillRect(10, 10, 100, 100);

HTML5 Canvas API 메서드 및 속성을 활용하려면 2D 컨텍스트 객체에 대한 참조를 얻어야 합니다. 위의 예시에서는 간단한 빨간색 사각형을 그렸는데, 크기는 100 x 100픽셀이고, <canvas> 그리기 표면에서 왼쪽으로 10px, 위쪽으로 10px 떨어져 있습니다.

해상도에 의존하는 특성 때문에, <canvas>에서 만든 이미지는 확대되거나 레티나 디스플레이에서 보일 때 품질이 저하될 수 있습니다.

단순한 모양을 그리는 것은 빙산의 일각에 불과합니다. HTML5 Canvas API를 사용하면 호, 경로, 텍스트, 그라데이션 등을 그릴 수 있습니다. 또한 이미지를 픽셀 단위로 조작할 수도 있습니다. 이는 그래픽의 특정 영역에서 한 색상을 다른 색상으로 교체하거나, 그림을 애니메이션으로 만들어 움직이게 할 수 있으며, 심지어 캔버스에 비디오를 그리고 그 모습을 변경할 수도 있습니다.

SVG란 무엇인가?

SVG는 Scalable Vector Graphics의 약자입니다. 사양에 따르면:

SVG는 2차원 그래픽을 기술하기 위한 언어입니다. 독립적인 형식으로 사용되거나 다른 XML과 혼합될 때 XML 구문을 사용합니다. HTML5와 혼합될 때는 HTML5 구문을 사용합니다. …

SVG 그림은 대화형이고 동적일 수 있습니다. 애니메이션은 선언적으로(즉, SVG 애니메이션 요소를 SVG 콘텐츠에 포함시켜) 정의하거나 스크립팅을 통해 트리거될 수 있습니다.

SVG는 벡터 그래픽을 생성하기 위한 XML 파일 형식입니다. 확장 가능한 특성 덕분에 벡터 이미지를 유지하면서 크기를 조절할 수 있어 선명하고 고품질을 유지할 수 있습니다. (HTML5 Canvas로 생성된 이미지에서는 이러한 작업을 할 수 없습니다.)

이전에 HTML5 Canvas로 만든 것과 같은 빨간색 사각형을 이번에는 SVG를 사용하여 그려보겠습니다.

<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 600 600">
  <desc>Red rectangle shape</desc>
  <rect x="10" y="10" width="100" height="100" fill="#c00"  />  
</svg>

SVG로 할 수 있는 대부분의 작업은 Canvas로도 할 수 있습니다. 도형과 경로, 그라데이션, 패턴, 애니메이션 등을 그릴 수 있죠. 그러나 이 두 기술은 근본적으로 다르게 작동합니다. Canvas 기반 그래픽과 달리 SVG는 DOM을 가지고 있으며, CSS와 JavaScript 모두 이를 접근할 수 있습니다. 예를 들어, CSS를 사용하여 SVG 그래픽의 모양과 느낌을 변경하거나, CSS 또는 JavaScript로 노드를 애니메이션 처리하거나, <div>와 같이 마우스 또는 키보드 이벤트에 응답하도록 할 수 있습니다. 다음 섹션에서 더 명확해질 것이므로, Canvas와 SVG 중에서 다음 프로젝트에 선택할 때 이 차이가 상당한 역할을 합니다.

즉시 모드와 유지 모드

중요한 것은 즉시 모드와 유지 모드를 구분하는 것입니다. HTML5 Canvas는 전자의 예이고, SVG는 후자의 예입니다.

즉시 모드는 그림이 캔버스에 그려지면 캔버스가 그것을 추적하지 않는다는 것을 의미합니다. 다시 말해, 개발자로서 객체를 그리는 명령어를 작성하고, 최종 출력 모습의 모델이나 장면을 생성하고 유지하며, 업데이트해야 할 사항을 지정해야 합니다. 브라우저의 그래픽 API는 단순히 브라우저에 그리기 명령을 전달하고, 브라우저가 이를 실행합니다.

SVG는 보존 접근 방식을 사용하여 화면에 표시하려는 내용에 대한 그리기 명령을 간단히 내리면 브라우저의 그래픽 API가 최종 출력의 메모리 내 모델 또는 장면을 생성하고 브라우저에 대한 그리기 명령으로 변환합니다.

일괄 그래픽 시스템으로서의 캔버스는 DOM(문서 개체 모델)이 없습니다.문서 개체 모델. Canvas로 픽셀을 그리면 시스템은 그것들에 대해 모두 잊어버리므로 내부 그림 모델을 유지하는 데 필요한 추가 메모리를 줄입니다. SVG로 그린 각 개체는 브라우저의 내부 모델에 추가되어 개발자로서의 삶이 약간 더 쉬워지지만 성능 측면에서 일정 비용이 발생합니다.

일괄 및 보존 모드의 차이 및 Canvas와 SVG의 각각의 특정 특성을 바탕으로 다른 기술을 사용하여 프로젝트의 목표를 더 잘 충족시킬 수 있는 경우를 간단히 설명할 수 있습니다.

HTML5 캔버스: 장단점

HTML5 캔버스 사양에 따르면 저자는 아니오 <canvas> 해당 요소에 다른 더 적합한 수단이 있는 경우 요소를 사용해야 합니다.

예를 들어 그래픽이 풍부한 <header> 요소의 경우 가장 적합한 도구는 HTML과 CSS이며 <canvas> (그리고 SVG도 마찬가지임)가 아닙니다. Dr Abstract, Zim JS 캔버스 프레임워크의 창시자이자 공동 설립자는 이러한 관점을 확인하며 다음과 같이 씁니다.

DOM과 DOM 프레임워크는 정보 표시와 특히 텍스트 정보 표시에 능숙합니다. 비교적으로, canvas는 그림입니다. 텍스트를 canvas에 추가하고 응답성을 띄울 수는 있지만, DOM에서처럼 쉽게 선택하거나 검색할 수는 없습니다. 긴 스크롤링 페이지의 텍스트나 텍스트와 이미지는 DOM의 훌륭한 사용 사례입니다. DOM은 소셜 미디어 사이트, 포럼, 쇼핑, 그리고 우리가 익숙한 모든 정보 애플리케이션에 적합합니다. — “자바스크립트 Canvas 라이브러리 또는 프레임워크를 사용해야 할 때”

그래서, 이것은 <canvas>를 사용하지 않아야 할 때의 명확한 예입니다. 그러나 <canvas>가 언제 좋은 선택일까요?

이 Sarah Drasner의 트윗은 canvas의 주요 장단점과 기능을 요약하여 이 강력한 기술의 사용 사례를 알아낼 수 있게 도와줍니다:

I had this slide in a lot of talks and workshops over the years: pic.twitter.com/4K0C7mNzg2

— Sarah Drasner (@sarah_edo) October 2, 2019

트윗의 이미지를 보려면 여기를 클릭하세요.

HTML5 Canvas가 훌륭할 수 있는 경우

Alvin Wan은 Canvas와 SVG의 성능을 객체의 수와 객체 또는 canvas 자체의 크기와 관련하여 모두 벤치마크했습니다. 그는 결과를 다음과 같이 말합니다:

결론적으로, DOM 렌더링의 오버헤드는 수백에서 수천 개의 객체를 다룰 때 더욱 두드러집니다. 이런 상황에서 Canvas가 분명한 승자입니다. 하지만 Canvas와 SVG 모두 객체 크기에 대해 일정합니다. 최종 결과를 보면 Canvas는 성능 측면에서 명백한 승리를 보여줍니다.

Canvas에 대해 알고 있는 사항을 바탕으로, 특히 많은 객체를 그릴 때의 우수한 성능을 고려할 때, SVG보다 적합하고 선호될 수 있는 몇 가지 가능한 시나리오를 살펴보겠습니다.

게임과 생성 예술

대량의 그래픽을 사용하는 그래픽 집약적인, 고도로 대화형인 게임, 그리고 생성 예술의 경우, Canvas가 일반적으로 선택되는 방법입니다.

광선 추적

광선 추적은 3D 그래픽을 생성하는 기술입니다.

광선 추적은 이미지 플레인에서 빛의 경로를 픽셀을 통해 추적하고 가상 객체와의 만남에 따른 효과를 시뮬레이션함으로써 이미지를 활성화할 수 있습니다. … 광선 추적에 의해 달성되는 효과는 … 단순한 벡터 그래픽에서 실제처럼 보이는 이미지를 생성하거나 붉은 눈동자 필터를 적용하는 등의 범위를 갖습니다. — SVG vs Canvas: 어떻게 선택할 것인가, Microsoft Docs.

궁금하다면, Mark Webster가 작동하고 있는 레이트레이서 애플리케이션을 살펴보세요.

그러나 HTML5 Canvas는 SVG보다 확실히 적합하지만, 레이 트레이싱이 <canvas> 요소에서 가장 잘 수행된다고 단정할 수는 없습니다. 실제로 CPU에 가해지는 부담은 상당할 수 있으며, 브라우저가 응답하지 않을 정도일 수 있습니다.

작은 표면에 많은 수의 객체 그리기

또 다른 예는 비상호작용 실시간 데이터 시각화와 같이 상대적으로 작은 표면에 상당한 수의 객체를 그리는 경우입니다. 예를 들어 기상 패턴의 그래픽 표현.

위의 이미지는 이 MSDN 기사에서 가져온 것으로, 이 기사를 준비하기 위한 내 연구의 일환이었습니다.

비디오에서 픽셀 교체

HTML5 Doctor 기사에서 설명한대로, Canvas가 적합한 또 다른 예는 비디오 배경 색상을 다른 색상, 다른 장면 또는 이미지로 교체하는 경우입니다.

HTML5 Canvas가 그다지 좋지 않은 경우

반면에 Canvas가 SVG에 비해 최선의 선택이 아닐 수 있는 경우가 많습니다.

확장성

확장성이 필요한 대부분의 시나리오에서는 SVG가 Canvas보다 더 적합합니다. 건물 및 공학 다이어그램, 조직도, 생물학적 다이어그램과 같은 고정밀도, 복잡한 그래픽이 이에 해당됩니다.

SVG로 그린 이미지를 확대하거나 인쇄할 때 모든 세부 사항이 고품질로 보존됩니다. 또한 데이터베이스에서 이러한 문서를 생성할 수 있으므로 SVG의 XML 형식은 이 작업에 매우 적합합니다.

또한 이러한 그래픽은 종종 대화식입니다. 예를 들어 온라인으로 비행기 표를 예매할 때의 좌석 맵을 생각해보십시오. 이는 SVG와 같은 보존 그래픽 시스템에 적합한 사용 사례입니다.

그렇다고 해서, CreateJS 및 Zim(CreateJS를 확장하는)과 같은 훌륭한 라이브러리의 도움을 받아 개발자들은 마우스 이벤트, 히트 테스트, 멀티터치 제스처, 드래그 앤 드롭 기능, 컨트롤 등을 빠르게 캔버스 기반 작품에 통합할 수 있습니다.

접근성

캔버스 그래픽을 보다 접근 가능하게 만들기 위한 여러 단계를 취할 수 있으며, Zim과 같은 좋은 캔버스 라이브러리는 이 과정을 가속화하는 데 도움이 될 수 있습니다. 그러나 캔버스는 접근성에 대해 빛나지 않습니다. 캔버스 표면에 그린 것은 단순히 픽셀들로, 보조 기술이나 검색 엔진 봇에 의해 읽거나 해석될 수 없습니다. 이는 SVG가 선호되는 또 다른 영역입니다. SVG는 XML이므로 인간과 기계 모두가 읽을 수 있습니다.

자바스크립트 의존성 없음

만약 당신이 애플리케이션에서 자바스크립트를 사용하고 싶지 않다면, Canvas는 당신의 최고의 친구가 아닙니다. 사실, <canvas> 요소를 사용하여 작업할 수 있는 유일한 방법은 자바스크립트를 사용하는 것입니다. 반면에, Adobe Illustrator 또는 Inkscape와 같은 표준 벡터 편집 프로그램을 사용하여 SVG 그래픽을 그릴 수 있으며, 순수 CSS를 사용하여 그 모양을 제어하고 눈에 띄는 미묘한 애니메이션과 미세한 상호작용을 수행할 수 있습니다.

고급 시나리오에 HTML5 Canvas와 SVG 결합

애플리케이션이 HTML5 Canvas와 SVG를 결합하여 양쪽 세상의 최선을 취할 수 있는 경우가 있습니다. 예를 들어, Canvas 기반 게임은 벡터 편집 프로그램에 의해 생성된 SVG 이미지의 스프라이트를 구현할 수 있으며, PNG 이미지에 비해 확장성과 감소된 다운로드 크기를 활용할 수 있습니다. 또는 페인트 프로그램은 SVG를 사용하여 디자인된 사용자 인터페이스를 가질 수 있으며, 내장된 <canvas> 요소를 사용하여 그림을 그릴 수 있습니다.

마지막으로, Paper.js와 같은 강력한 라이브러리를 사용하면 HTML5 Canvas 위에 벡터 그래픽을 스크립트로 작성할 수 있으므로 개발자는 두 기술을 모두 사용하는 편리한 방법을 제공받을 수 있습니다.

결론

이 기사에서는 HTML5 Canvas와 SVG의 몇 가지 주요 기능을 탐구하여 특정 작업에 가장 적합한 기술을 결정하는 데 도움을 드렸습니다.

답은 무엇인가요?

Chris Coyier는 Benjamin De Cock와 동의하며, 그 후자가 트윗한 것처럼:

한 가지 매우 기본적인 방법으로 답변하자면 “SVG를 사용할 수 없을 때 캔버스를 사용하세요” (여기서 “할 수 없다”는 수천 개의 객체를 애니메이션 처리하거나 각 픽셀을 개별적으로 조작하는 것을 의미할 수 있습니다). 다시 말해, SVG는 기본 선택이어야 하며, 캔버스는 대안 계획이어야 합니다.

— Benjamin De Cock (@bdc) October 2, 2019

Dr Abstract는 캔버스를 사용하여 가장 적합한 것들의 긴 목록을 제공합니다. 이 목록에는 대화형 로고 및 광고, 대화형 인포그래픽, e-러닝 앱 등이 포함됩니다.

제 견해에서는 캔버스를 SVG 대신 사용하는 것이 가장 적합한 시기에 대한 어떤 엄격하고 빠른 규칙도 없습니다. 즉시 모드와 보존 모드 사이의 구분은 그래픽 집중적인 게임과 같은 것을 구축할 때 HTML5 캔버스를 우위에 두고, 평면 이미지, 아이콘 및 UI 요소와 같은 것들에 대해 SVG를 선호하는 것으로 이어집니다. 그러나 그 사이에는 HTML5 캔버스가 확대될 수 있는 여지가 있으며, 다양한 강력한 캔버스 라이브러리가 테이블 위에 놓여있을 수 있는 것을 고려할 때 특히 그럴 수 있습니다. 그들은 두 기술을 동일한 그래픽 작업에서 작업하기 쉽게 만들 뿐만 아니라, 대화형 컨트롤 및 이벤트, 반응성, 접근성 기능 등과 같이 기본 캔버스 기반 프로젝트에서 구현하기 어려운 몇 가지 기능을 대부분의 개발자들의 손가락 끝에 놓이게 합니다. 이는 HTML5 캔버스의 더 흥미로운 용도의 가능성을 열어둡니다.

캔버스와 SVG에 대한 자주 묻는 질문 (FAQ)