지금까지 SVG와 캔버스의 주요 특징이 요약되었습니다. 이들은 모두 HTML5에서 지원되는 2D 그래픽 디스플레이 기술이며 모두 벡터 그래픽을 지원합니다. 이제이 두 기술을 비교하고 강점과 해당 시나리오를 분석해 봅시다.
먼저 두 기술의 두드러진 기능을 분석하고 아래 표를 살펴 보겠습니다.
| 캔버스 | SVG |
|---|---|
| 픽셀 기반 (dynamic.png) | 모양에 따라 |
| 단일 HTML 요소 | DOM의 일부가되는 여러 그래픽 요소 |
| 스크립트를 통해서만 수정하십시오 | 스크립트 및 CSS를 통해 수정하십시오 |
| 이벤트 모델/사용자 상호 작용 과립 (X, Y) | 이벤트 모델/사용자 상호 작용 추상화 (rect, Path) |
| 이미지가 작고 물체 수가 클 때 더 나은 성능 (> 10k) (또는 둘 다 충족) | 더 나은 성능 객체 수가 작을 때 (<10k), 더 큰 이미지 (또는 둘 다 만족) |
위의 비교에서, 우리는 캔버스가 픽셀 작동에 강력한 이점이 있음을 알 수 있습니다. SVG의 가장 큰 장점은 편리한 상호 작용과 작동성입니다. 캔버스를 사용하는 것은 캔버스의 크기 (실제로 픽셀 수)의 영향을 크게받으며 SVG를 사용하는 것은 물체 수 (요소 수)의 영향을 많이받습니다. 캔버스 및 SVG는 수정 방법 측면에서 여전히 다릅니다. 캔버스 객체를 그리면 스크립트와 CSS를 사용하여 수정할 수 없습니다. SVG 객체는 문서 개체 모델의 일부이므로 스크립트 및 CSS를 사용하여 언제든지 수정할 수 있습니다.
실제로 캔버스는 픽셀 기반 실시간 패턴 그래픽 시스템입니다. 물체를 그리면 물체가 메모리에 저장되지 않습니다. 이 객체가 다시 필요할 때 다시 드로 드로 이동해야합니다. SVG는 모양 기반 유지 패턴 그래픽 시스템입니다. 물체를 그리면 메모리에 저장됩니다. 이 객체의 정보를 수정 해야하는 경우 직접 수정할 수 있습니다. 이 근본적인 차이로 인해 많은 응용 시나리오의 차이가 발생했습니다.
다음과 같은 일반적인 응용 프로그램에서도 이해할 수 있습니다.
높은 충실도 문서 이 측면은 이해하기 쉽습니다. 문서를 탐색하거나 스케일링 할 때 왜곡되지 않거나 고품질 문서를 인쇄 해야하는 경우 SVG는 일반적으로 MAP 서비스와 같은 선호됩니다. 정적 이미지 리소스 SVG는 종종 응용 프로그램의 이미지이든 웹 페이지, 큰 이미지 또는 작은 이미지이든 간단한 이미지에 사용됩니다. SVG는 DOM에로드되거나 이미지를 생성하기 전에 적어도 구문 분석되므로 성능은 약간 떨어지지만이 효율 손실은 웹 페이지를 렌더링하는 비용 (약 몇 밀리 초)에 비해 매우 작습니다.파일 크기 측면에서 (네트워크 트래픽을 평가하기 위해) SVG 이미지와 PNG 이미지 크기는 크게 다르지 않습니다. 그러나 SVG는 이미지 형식으로 확장 가능하기 때문에 개발자가 이미지를 더 큰 규모로 사용하거나 사용자가 DPI가 높은 화면을 사용하는 경우 SVG를 사용하는 것이 좋습니다.
픽셀 작동 캔버스를 사용하는 경우 요소의 해당 정보를 유지하지 않고 빠른 드로잉 속도를 얻을 수 있습니다. 특히 픽셀 작업을 처리 해야하는 경우 성능이 더 좋습니다. 캔버스 기술은 기본적으로 이러한 유형의 응용 프로그램에 사용됩니다. 실시간 데이터 캔버스는 비회적 실시간 데이터 시각화에 이상적입니다. 예를 들어, 실시간 날씨 데이터. 차트 및 그래픽 SVG 또는 캔버스를 사용하여 관련 그래픽 및 차트를 그릴 수 있지만 작동성을 강조하려면 SVG가 의심 할 여지없이 최선의 선택입니다. 대화식이 필요하지 않고 성능을 강조하는 경우 캔버스가 더 적합합니다. 2 차원 게임 대부분의 게임은 저수준 API를 사용하여 개발되므로 캔버스는 쉽게 받아들이 기 쉽습니다. 그러나 실제로 게임 장면을 그릴 때 캔버스는 모양을 반복적으로 그리고 배치해야하며 SVG는 메모리로 유지되며 관련 속성을 수정하는 것은 매우 쉽기 때문에 SVG도 좋은 선택입니다.미니 게임 보드에서 여러 객체로 게임을 만들 때 캔버스와 SVG 간의 성능에는 거의 차이가 없습니다. 그러나 더 많은 객체가 만들어지면 캔버스 코드가 훨씬 커집니다. 게임 루프가 수행 될 때마다 캔버스 객체를 다시 작성해야하므로 캔버스 게임이 느려집니다.
사용자 인터페이스 디자인 상호 작용이 우수하기 때문에 SVG는 의심 할 여지없이 더 좋습니다. SVG의 유지 모드 그래픽 디스플레이를 사용하면 본문의 HTML 유사 태그로 모든 사용자 인터페이스 세부 정보를 만들 수 있습니다. 각 SVG 요소 및 하위 요소는 별도의 이벤트에 응답 할 수 있으므로 복잡한 사용자 인터페이스를 매우 쉽게 만들 수 있습니다. 캔버스를 사용하려면보다 복잡한 코드 순서로 사용자 인터페이스의 각 부분을 만드는 방법을 지정해야합니다. 따라야 할 순서는 다음과 같습니다.• 컨텍스트를 얻으십시오.
• 그리기 시작하십시오.
• 각 선의 색상과 각 채우기를 지정하십시오.
• 모양을 정의하십시오.
• 완전한 그림.
또한 캔버스는 캔버스 전체에서만 이벤트를 처리 할 수 있습니다. 보다 복잡한 사용자 인터페이스가있는 경우 캔버스에서 클릭하는 위치의 좌표를 결정해야합니다. SVG는 각 어린이 요소의 이벤트를 개별적으로 처리 할 수 있습니다.
다음 두 가지 예는 캔버스 및 SVG의 각 기술적 장점을 보여줍니다.
캔버스의 일반적인 응용 프로그램은 녹색 화면과 같습니다 : http://samples.msdn.microsoft.com/workshop/samples/graphicsinhtml5/canvasgreenscreen.htm렌더링은 다음과 같습니다.
페이지를 열면 페이지 소스 코드를 볼 수 있습니다.
이 응용 프로그램은 두 비디오의 픽셀을 다른 비디오로 읽고 쓰는 것이며, 코드는 두 개의 비디오, 2 개의 캔버스 및 1 개의 최종 캔버스를 사용합니다. 한 번에 비디오에서 하나의 프레임을 캡처하고 두 개의 개별 캔버스를 그려 데이터를 다시 읽을 수 있습니다.
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 [i * 4 + 1];
b = currentframesource1.data [i * 4 + 2];
// 이것이 녹색 픽셀처럼 보인 경우 교체하십시오.
if ((r> = 0 && r <= 59) && (g> = 74 && g <= 144) && (b> = 0 && b <= 56)) // target green은 (24, 109, 21)이 값을 둘러보십시오.
{
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의 일반적인 응용 프로그램은 사용자 인터페이스와 같습니다 .<! doctype html>
<html>
<헤드>
<script type = "text/javaScript">
//이 함수는 원을 클릭하면 호출됩니다.
함수 clickme () {
// 경고를 표시합니다.
ALERT ( "SVG UI 요소를 클릭했습니다.");
}
</스크립트>
</head>
<body>
<H1>
SVG 사용자 인터페이스
</h1>
<!- SVG 창을 만듭니다. ->
<SVG>
<!- 원을 만듭니다. ->
<circle cx = "100"cy = "100"r = "50"fill = "gold"id = "uielement"onclick = "clickme ();";
/>
</svg>
<p>
골드 원형 사용자 인터페이스 요소를 클릭하십시오.
</p>
</body>
</html>
이 예제는 간단하지만 사용자 인터페이스의 모든 특성이 있습니다. 이 예에서, 우리는 다시 한 번 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/