HTML5 13의 SVG 2D 소개 - SVG와 캔버스 비교, 강점 분석 및 적용 가능한 시나리오

지금까지 SVG와 Canvas의 주요 기능을 정리했습니다. 모두 HTML5에서 지원되는 2D 그래픽 표시 기술이며, 모두 벡터 그래픽을 지원합니다. 이제 이 두 기술을 비교하고 각각의 강점과 적용 가능한 시나리오를 분석해 보겠습니다.
먼저 두 기술의 두드러진 특징을 분석해 보겠습니다. 아래 표를 참조하세요.

Canvas	SVG
基于像素（动态 .png）	基于形状
单个 HTML 元素	多个图形元素，这些元素成为 DOM 的一部分
仅通过脚本修改	通过脚本和 CSS 修改
事件模型/用户交互颗粒化 (x,y)	事件模型/用户交互抽象化 (rect, path)
图面较小时、对象数量较大 (>10k)（或同时满足这二者）时性能更佳	对象数量较小 (<10k)、图面更大（或同时满足这二者）时性能更佳

위 비교에서 알 수 있듯이 Canvas는 픽셀 조작에 있어 강력한 이점을 갖고 있으며 SVG의 가장 큰 장점은 편리한 상호작용성과 조작성입니다. Canvas를 사용하면 캔버스의 크기(실제로는 픽셀 수)에 큰 영향을 받는 반면, SVG를 사용하면 개체 수(요소 수)에 큰 영향을 받습니다. Canvas와 SVG는 수정 방법도 다릅니다. Canvas 객체를 그린 후에는 스크립트와 CSS를 사용하여 수정할 수 없습니다. SVG 개체는 문서 개체 모델의 일부이므로 스크립트와 CSS를 사용하여 언제든지 수정할 수 있습니다.
사실 Canvas는 픽셀 기반의 실시간 모드 그래픽 시스템입니다. 객체를 그린 후 객체가 다시 필요할 때 다시 그려야 합니다. 모양 기반 유지 모드 그래픽 시스템 그리기 후에는 개체를 다시 그려야 합니다. 개체 정보를 수정해야 하는 경우 직접 수정할 수 있습니다. 이러한 근본적인 차이로 인해 다양한 애플리케이션 시나리오가 발생합니다.

다음과 같은 일반적인 애플리케이션에서도 이를 경험할 수 있습니다.
고품질 문서
이 점은 이해하기 쉽습니다. 크기 조정 시 왜곡 없이 문서를 검색하거나 고품질 문서를 인쇄하려면 지도 서비스와 같은 SVG가 일반적으로 선호됩니다. .
정적 이미지 리소스
SVG는 애플리케이션이나 웹 페이지의 이미지, 큰 이미지 또는 작은 이미지 등 간단한 이미지에 사용되는 경우가 많습니다. SVG를 DOM에 로드해야 하거나 최소한 이미지를 생성하기 전에 구문 분석해야 하기 때문에 약간의 성능 저하가 있지만 웹 페이지를 렌더링하는 데 드는 비용(몇 밀리초 정도)과 비교하면 이러한 효율성은 손실은 극히 적습니다.
파일 크기 측면에서(네트워크 트래픽 평가 목적) SVG 이미지의 크기는 png 이미지의 크기와 크게 다르지 않습니다. 그러나 이미지 형식인 SVG는 확장 가능하므로 개발자가 이미지를 더 큰 규모로 사용하기를 원하거나 사용자가 높은 DPI 화면을 사용하는 경우 SVG를 사용하는 것이 매우 좋은 선택입니다.

픽셀 작업
캔버스를 사용하면 요소의 해당 정보를 유지하지 않고 빠른 그리기 속도를 얻을 수 있습니다. 특히 픽셀 작업을 처리해야 하는 경우 성능이 더 좋습니다. 이러한 유형의 응용 프로그램은 기본적으로 Canvas 기술을 선택합니다.
라이브 데이터
Canvas는 비대화형 실시간 데이터 시각화에 적합합니다. 실시간 날씨 데이터 등이 있습니다.
차트와 그래프
관련 그래프와 차트를 그릴 때는 SVG나 Canvas를 사용할 수 있지만, 조작성을 강조하고 싶다면 당연히 상호작용성이 필요하지 않다면 SVG가 최선의 선택이라는 점을 강조하세요. 성능을 위해서는 Canvas가 더 적합합니다.
2차원 게임
대부분의 게임이 저수준 API를 사용하여 개발되기 때문에 Canvas가 수용하기 더 쉽습니다. 하지만 실제로 게임 장면을 그릴 때 Canvas는 반복적으로 도형을 그리고 배치해야 하는 반면 SVG는 메모리에 유지되고 관련 속성을 수정하기가 매우 쉽기 때문에 SVG도 좋은 선택입니다.
작은 게임판에 몇 개의 개체로 게임을 만들 때 캔버스와 SVG의 성능 차이는 거의 없습니다. 그러나 더 많은 객체가 생성될수록 Canvas 코드는 훨씬 더 커집니다. 게임이 반복될 때마다 캔버스 개체를 다시 그려야 하기 때문에 캔버스 게임 속도가 느려집니다.
사용자 인터페이스 디자인
좋은 상호작용성으로 인해 SVG는 의심할 여지 없이 우수합니다. SVG의 보존 모드 그래픽 디스플레이를 활용하면 본문 내에서 HTML과 같은 마크업으로 모든 사용자 인터페이스 세부 정보를 만들 수 있습니다. 각 SVG 요소와 하위 요소는 별도의 이벤트에 응답할 수 있으므로 복잡한 사용자 인터페이스를 매우 쉽게 만들 수 있습니다. 반면에 Canvas에서는 사용자 인터페이스의 각 부분을 생성하는 방법을 지정하기 위해 더 복잡한 코드 시퀀스를 따라야 합니다. 따라야 할 순서는 다음과 같습니다.
• 상황 파악.
•그림 그리기를 시작하세요.
•각 선과 채우기의 색상을 지정합니다.
• 모양을 정의합니다.
•그림을 완성하세요.
또한 Canvas는 전체 캔버스에 대한 이벤트만 처리할 수 있습니다. 더 복잡한 사용자 인터페이스가 있는 경우 캔버스에서 클릭한 위치의 좌표를 결정해야 합니다. SVG는 각 하위 요소에 대한 이벤트를 개별적으로 처리할 수 있습니다.

다음 두 가지 예는 각각 Canvas와 svg의 기술적 이점을 보여줍니다.

그린 스크린과 같은 캔버스의 일반적인 응용 프로그램: http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasgreenscreen.htm

렌더링은 다음과 같습니다.

페이지를 연 후 페이지 소스 코드를 볼 수 있습니다.

이 애플리케이션은 두 개의 비디오에서 다른 비디오의 픽셀을 읽고 씁니다. 코드는 두 개의 비디오, 두 개의 캔버스 및 최종 캔버스를 사용합니다. 한 번에 한 프레임씩 비디오를 캡처하고 두 개의 개별 캔버스에 그리면 데이터를 다시 읽을 수 있습니다.

코드 복사

코드는 다음과 같습니다.

ctxSource1.drawImage(video1, 0, 0, videoWidth, videoHeight);
ctxSource2.drawImage(video2, 0, 0, videoWidth, videoHeight);

따라서, 다음 단계는 각 개별 픽셀을 검사할 수 있도록 그려진 각 이미지에 대한 데이터를 검색하는 것입니다.

다음과 같이 코드를 복사합니다.

currentFrameSource1 = ctxSource1.getImageData(0, 0, videoWidth, videoHeight);

currentFrameSource2 = ctxSource2.getImageData(0, 0, videoWidth, videoHeight);

일단 획득되면 코드는 녹색 화면의 픽셀 배열을 탐색하고 녹색 픽셀을 검색하며, 발견되면 코드는 모든 녹색 픽셀을 배경 장면의 픽셀로 바꿉니다. :

코드 복사

코드는 다음과 같습니다.

for (var i = 0; i < n; i )

{

// 각 픽셀에 대한 RBG를 가져옵니다.
r = currentFrameSource1.data[i * 4 0];
g = currentFrameSource1.data * 4 1 ];
b = currentFrameSource1.data[i * 4 2];

// 녹색 픽셀처럼 보이면 교체하세요.
if ( (r >= 0 && r = 74 && g = 0 && b {
pixelIndex = i * 4;
currentFrameSource1.data[pixelIndex] = currentFrameSource2.data[pixelIndex];
currentFrameSource1.data[pixelIndex 1] = currentFrameSource2.data[pixelIndex 1];
currentFrameSource1.data[pixelIndex 2] = currentFrameSource2.data[pixelIndex 2];
currentFrameSource1.data[pixelIndex 3] = currentFrameSource2.data[pixelIndex 3];
}
}

마지막으로 픽셀 배열이 대상 캔버스에 기록됩니다.

코드 복사

코드는 다음과 같습니다.

ctxDest.putImageData(currentFrameSource1, 0, 0);

사용자 인터페이스 등 svg의 일반적인 응용

코드 복사

코드는 다음과 같습니다.

< ;h1>
SVG 사용자 인터페이스

< ;svg height="200" width="200" >

/>

금색 원형 사용자 인터페이스를 클릭하세요. element.

이 예제는 간단하지만 사용자 인터페이스의 모든 기능을 갖추고 있습니다. . 이 예에서 우리는 svg 의 편리한 상호작용성을 다시 한 번 높이 평가합니다.

마지막으로, 그림을 사용하여 각 애플리케이션에 적합한 기술을 요약합니다. 그림의 각 상자는 특정 목적에 가까울수록 이 기술을 사용할 때의 이점이 더 커집니다.

실용 참조:

스크립트 색인:

http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx 개발 센터:
https://developer.mozilla.org/en/SVG인기 참고 자료:
http://www.chinasvg.com/ 공식 문서:
http://www.w3.org/TR/SVG11/

HTML5 13의 SVG 2D 소개 - SVG와 캔버스 비교, 강점 분석 및 적용 가능한 시나리오_html5 튜토리얼 기술