티스토리 뷰
canvas와 svg에 대한 용도와 목적은 상대적으로 다르다.
svg는 미려하고 복잡한 벡터이미지를, canvas는 빠른 처리속도를 바탕으로 한 비트맵으로
지도표기와 같은 실시간 데이터 표현에 특화되어있다.
커뮤니티에 난무하는 추측성 발언이나 입코딩을 지양하고 하기 문서의 내용을 정독한 후에
판단은 본인이 내리는것을 지향한다.
소개
HTML은 고객 환경을 개선하는 데 도움이 되는 보다 풍부하고 나아진 표준 그래픽을 제공하도록 발전하고 있습니다. 개발자들이 표준 기반의 웹 기술을 사용하여 전문화된 기술을 사용하거나 브라우저 특정 코드를 작성하지 않아도 그래픽이 풍부한 대화형 사이트 및 응용 프로그램을 만들 수 있는 기회를 창출합니다. 다음 섹션에서는 벡터 그래픽의 개념을 소개하고 다음을 수행합니다.
- 직접 실행 모드와 유지 모드 간의 차이점 구분
- 직접 실행 모드 그래픽에 사용되는 HTML5 canvas 요소를 소개하고 Canvas에 대해 대략적인 설명 제공
- 유지 모드 그래픽에 사용되는 HTML5 요소 집합인 SVG(Scalable Vector Graphics)를 소개하고 SVG에 대해 대략적인 설명 제공
- 초보 및 숙련된 개발자들이 한 가지 벡터 그래픽 모델(시나리오에 따라 두 가지 모두 사용 가능)을 사용하여 그래픽 및 HTML5를 벡터링하도록 지시
벡터 그래픽
벡터 그래픽은 새로운 개념이 아닙니다. 벡터 그래픽은 모두 이미지를 나타내는 벡터를 기반으로 하는 기하학적 기초 요소(모양, 점, 선 및 다각형)입니다. 1960년대 후반에 그리기 함수를 실행하도록 설계된 거북이 로봇을 지원하기 위해 벡터 그래픽 언어(거북이 그래픽)가 로고 프로그래밍 언어에 추가되었습니다. 그래픽은 복잡성 측면에서는 상당히 진화했지만 기본 개념은 동일합니다.
벡터 그래픽의 복잡성 범위는 단순부터 중간, 아주 복잡한 수준까지 다양합니다. 다음은 몇 가지 기본 예입니다.
- 단순 - 문서 또는 그림의 설명 상자
- 중간 - 차트, 다이어그램 및 지도 등의 그림
- 복잡 - 엔지니어링에 사용되는 그래픽 등의 문서
앞에서 예로 든 그래픽의 특징은 정적이지만 벡터 그래픽은 시나리오를 상당히 확장시키는 주요 기능인 대화형 작업도 지원합니다. 벡터 그래픽은 웹, 데스크톱 및 장치에 있는 응용 프로그램에 대화형 형식과 정적 형식을 제공합니다.
벡터 그래픽 시나리오의 대략적인 개요
오늘날 웹에서
- 웹 페이지에서 벡터 그래픽을 백그라운드 이미지로 사용하여 높은 DPI 및 “손가락 모으기” 확대 기능 지원
- 경로를 찾기 위한 Bing 지도와 같은 매핑 속성
- 실시간 차트 및 그래프를 표시하는 대화형 재고 사이트
- 선거 및 기타 지도.
- 항공권 또는 콘서트 홀의 좌석 차트
- 게임
사무실에서
- Microsoft Office Word(클립아트용), PowerPoint 및 Excel, Shapes for Visio 등의 생산성 도구
- 벡터 그래픽 형식을 출력하는 CAD 도구
- 대화형 차트 및 그래프를 렌더링하는 Oracle 및 Microsoft Dynamics 응용 프로그램 등의 엔터프라이즈 도구
장치에서
- 개선된 그래픽 사용자 인터페이스 부분
- 사용자 대화형 위젯 및 아이콘
- 전체 PDA 사용자 환경
전문 디자이너 및 도구 사용
전문 웹 디자이너는 다음과 같은 도구 세트에서 벡터 그래픽을 봅니다.
- Adobe Illustrator: 고품질 정적 이미지를 만드는 데 사용되며, SVG로 내보낼 수 있습니다.
- Adobe Flash Professional: XML 기반 벡터 언어로 내보낼 수 있습니다.
- WPF(Windows Presentation Foundation)용 Microsoft Expression Blend 및 Silverlight
벡터 그래픽은 상당히 오랫동안 데스크톱, 장치 및 웹에서 존재해 왔다는 사실을 기억해야 합니다.
HTML5 그래픽 기술
개발자나 디자이너는 이제 HTML5를 사용하여 표준 기반 기술을 사용하는 이전 환경을 만들 수 있습니다. 덕분에 플러그 인을 설치할 필요가 없으므로 사용자 환경이 크게 개선됩니다. 플러그 인 설치 문제는 사이트 사용 포기율 50%의 원인이었습니다. 이제 그래픽은 기본적으로 브라우저를 통해 전달되고 Internet Explorer 9의 경우 Microsoft Windows 및 하드웨어 가속 그래픽의 기능을 활용합니다.
다음 섹션에서는 새롭지만 서로 다른 두 기술, 기술 사용 방법 및 각 기술의 이점 및 제한에 대한 개략적으로 설명합니다. 벡터 그래픽 시나리오 범위는 각 시나리오에 가장 적합한 기술을 선택하는 방법을 설명할 때 사용됩니다.
다음 그림에서는 벡터 그래픽에 있는 일반적인 시나리오 범위를 보여 줍니다. 개별 시나리오는 특징 상 SVG에 더 가깝거나 Canvas에 더 가까울 수도 있으며, 이는 한 기술이 다른 기술에 비해 해당 시나리오에 더 적합함을 의미합니다. 시나리오가 범위의 중간에 해당하는 경우 두 기술 모두 실행 가능한 옵션입니다.
거의 모든 벡터 그래픽은 이러한 기술 중 하나를 사용하여 그릴 수 있지만 때때로 작업에 따라 개발자가 더 많은 작업을 해야 하거나, 컴퓨터가 더 많은 작업을 해야 합니다. 각 기술의 사용 케이스를 검토한 다음 일반적인 시나리오에 적용할 때 이 범위를 자세히 살펴 보겠습니다.
기술 소개
다음 섹션에서는 HTML5에서 벡터 그래픽을 만드는 기술을 소개하면서 앞서 제시한 시나리오를 자세히 살펴 보겠습니다.
샘플 사용
이후 나오는 예제를 사용하기 위해서 다음 코드 예제를 템플릿으로 사용합니다. 이 템플릿을 사용하여 HTML 내부에서 SVG를 개발할 수 있습니다. 이 템플릿은 이 항목의 각 샘플에서 사용됩니다. 형식 문제로 인하여 스타일과 스크립트를 사용할 수 있습니다. 템플릿에는 로컬 파일 공유에서 SVG 개발을 더 쉽게 활성화할 수 있는 메타 태그도 포함되어 있습니다. 예제에서는 다음 형식을 사용합니다. 먼저 중요한 코드가 제공되고 전체 코드 링크가 제공됩니다.
<!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <style type="text/css" media="screen"> </style> <script type="text/javascript"> </script> </head> <body> </body> </html>
http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/template.htm(이 태그를 보려면 소스 보기 클릭)
SVG
SVG는 Scalable Vector Graphics를 설명할 때 사용하는 용어로서, 메모리 내에서 유지되므로 다시 렌더링할 때 코드 결과를 통해 조작할 수 있는 유지 모드 그래픽 모델입니다. 이 모드는 나중에 설명하는 직접 실행 모드와 다릅니다. 두 모드 모두 HTML5에서 제공됩니다.
SVG는 유지 모드 모델이며 1999년에 독립 공급업체인 Microsoft와 Adobe의 제안에 대한 대응으로 도입되었습니다. W3C SVG 작업 그룹이 형성되었고 2001년에 SVG 사양은 “권장 상태”가 되었습니다. 현재는 작성이 "마지막 호출" 단계에 있는 SVG 1.1 2nd Edition에서 작업하고 있습니다.
SVG는 독립 실행형 파일로 전달될 수 있지만 처음에는 HTML과의 매끄러운 통합에 초점을 맞추겠습니다.
HTML과 마찬가지로 SVG는 요소, 특성 및 스타일을 사용하여 문서에 빌드됩니다. <svg> 요소가 처음 문서에 도입되면 이 요소는 <div>처럼 동작하고 HTMLDocument에 속하지만 추가적인 인터페이스인 SVGDocument를 포함합니다(SVGDocument는 벡터 그래픽과의 더 긴밀하고 더 풍부한 상호 작용을 제공함).
요소
외부 <svg> 래퍼는 HTML 상자 모델에 맞춰지지만, 벡터는 단순 상자로 제한되지 않기 때문에 내부 모델은 대부분의 경우 HTML 상자 모델에서 벗어납니다. 풍부한 그래픽을 제공하려면 SVG의 특성 확장을 통해 이 일탈을 처리해야 합니다.
예를 들면 다음과 같습니다.
<svg height="1000px" width="1000px"> <rect id="myRect" height="100px" width="100px" fill="blue"/> </svg>
http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/bluerect.htm
참고 이 예제와 다음의 여러 예제를 렌더링하려면 SVG 및 Canvas 요소를 지원하는 브라우저(예: Internet Explorer 9)를 사용해야 합니다.
앞에 나온 HTML 코드는 길이와 너비가 100픽셀이고 파란색 배경으로 채워진 정사각형을 1개 만듭니다.
이 <rect> 요소는 HTML 문서의 DOM(문서 개체 모델)에 유지됩니다. 다른 HTML 요소처럼 SVG도 다양한 방법으로 스타일을 지정할 수 있습니다. 다음 예는 표입니다.
스타일 지정
개발자는 스타일 특성이 많이 보던 것이라는 걸 알 수도 있습니다. SVG에는 특성과 프레젠테이션 특성이 둘 다 있습니다. 약간 임의적인 설명처럼 보이지만 여기서 핵심은 CSS 스타일 지정 규칙에 따라 프레젠테이션 특성의 스타일을 지정할 수 있다는 것입니다.
네 개의 직사각형을 여러 가지 방법으로 채웁니다.
<!--No fill (defaults the color to #000000)--> <rect id="myRect1" height="100%" width="100%" > <!--using the class="greenrect"--> <rect id="myRect2" height="100%" width="100%" class="greenrect"/> <!--using the style="fill:pink"--> <rect id="myRect3" height="100%" width="100%" style="fill:pink"/> <!--using the attribute fill="red"--> <rect id="myRect4" height="100%" width="100%" fill="red"/>
첫 번째 예제에서는 특성을 제외하여 그래픽에 시각적 효과를 주는 작업을 보여 줍니다. 이 경우 기본적으로 검은색으로 설정됩니다.
두 번째 예제에서는 class="greenrect"를 사용하여 직사각형을 채우는 작업을 보여 줍니다. 이를 채우는 CSS는 다음과 같이 포함됩니다.
rect.greenrect {fill:green;}
세 번째 예제에서는 인라인 스타일을 사용하여 채우기를 분홍으로 설정합니다. 마지막 예제에서는 특성을 사용하여 빨강으로 채웁니다. 다음 예는 CSS 선택기의 사용을 보여 줍니다. 스타일에는 다음이 포함됩니다.
rect:hover {fill:yellow;}
이 코드 조각은 마우스를 직사각형에 대면 색을 노란색으로 변경하도록 모든 직사각형에 대한 규칙을 설정합니다.
숙련된 웹 개발자에게 이는 전혀 새로운 내용이 아닙니다. 여기서 제공되는 예제에서는 차이점(스타일이 모든 속성에 적용되는 것이 아니라 프레젠테이션 특성, 새 속성 또는 불일치 속성에만 적용됨) 및 유사점(스타일, 스타일시트, 클래스 및 선택기 사용)을 모두 강조합니다.
http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/svgstyling.htm
프로그래밍 기능
특성 API와 기타 DOM 조작은 계속 적용되고 특성의 현재 규칙을 준수합니다. 예외라면, 적용될 경우 스타일로 대체되는 특성을 기반으로 한다는 점입니다.
이러한 특성이 코드 특성 또는 개별 DOM 메서드를 통해 설정되면 표시에 영향을 주고 기본 DOM은 이에 따라 변경됩니다(SVG DOM을 사용하여 높이를 설정하는 다른 구문 참조).
document.getElementById("myDiv").style.height = "200px";
// alternatively
//document.getElementById("myDiv").style="height;200px";
document.getElementById("myRect").height.baseVal.value = 200;
// alternatively
//document.getElementById("myRect").setAttribute("height","200px");
대화형 작업
SVG의 다른 주요 차별화 요소는 복잡하지 않게 상호 작용을 코딩하는 기능입니다. HTML처럼 SVG에 프로그래밍 가능 DOM이 있는 것처럼 SVG에는 이벤트 모델도 있습니다. 직사각형이나 정사각형보다 더 복잡한 그래픽인 다음의 경로 그래픽을 검토해 보세요.
경로는 임의의 모양을 그리는 데 사용됩니다(이 경우 미국의 알래스카 및 하와이 주를 나타내는 두 개의 모양).
http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/svginteractivity.htm
이전에 지정된 경고를 만드는 이벤트가 실행됩니다. 더 단순한 직사각형과 마찬가지로 이러한 복잡한 모양도 CSS 선택기에 응답합니다. 단순 강조 표시 메커니즘을 하나의 CSS 줄로 전달할 수 있습니다.
path:hover {fill:yellow;}
Canvas
Apple for Safari 및 기타 그래픽 widget에 의해 HTML5에 도입된 <canvas> 태그가 제공하는 풍부한 사용자 그래픽 환경을 제공하는 또 다른 방법입니다. Canvas는 SVG처럼 직사각형, 경로 및 이미지를 비롯한 즉시 모드 그래픽을 그리기 위한 더 많은 프로그래밍 환경을 노출합니다. 즉시 모드 그래픽 렌더링은 그래픽을 화면에 직접 렌더링한 다음 그 후에는 수행된 작업에 대한 컨텍스트가 없는 "실행 후 자동” 모델입니다. 유지 모드와 달리 렌더링된 그래픽이 저장되지 않습니다. 개발자는 실질적으로 화면이 변경되는지와는 상관없이 새 프레임이 필요할 때마다 전체 장면을 설명하는 데 필요한 모든 그리기 명령을 다시 호출해야 합니다(SVG에는 "장면 그래프"가 있는 것으로 알려짐).
요소
Canvas 기능을 사용하기 위해 웹 개발자는 canvas 요소를 도입합니다.
<canvas id="myCanvas" width="1200px" height="1200px"></canvas>
그런 다음 기존의 2D 하위 수준 라이브러리가 있는 <canvas> API를 사용하여 이미지나 벡터를 그립니다.
Canvas의 그래픽은 그래픽 지원을 추가하여 웹 개발자에게 더 친숙한 JavaScript 코드를 사용하여 조작합니다.
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d");
앞에서 설명한 대로 SVG에 있는 것과 비슷한 모양과 개체가 있으므로 예를 들어 개발자가 다음 코드로 직사각형을 그릴 수 있습니다.
ctx.fillStyle = "rgb(0,0,255)";
ctx.fillRect(10, 10, 100, 100);
이러한 방법의 장점과 단점 및 적절한 시나리오는 나중에 설명합니다.
최종 결과는 SVG와 동일합니다. http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasintro.htm
그러나 SVG처럼 Canvas에는 더 복잡한 기하학적 기초 요소가 있고 이 요소들은 함수 형식이라는 점이 다릅니다.
이벤트 프로그래밍 기능
앞에 표시된 하와이 지도와 같이 직사각형보다 훨씬 더 복잡한 그래픽을 그리기 위해 canvas API는 SVG의 <path> 요소와 비슷한 명령을 지원하는 경로 API를 제공합니다. 다른 점은 API를 단일 특성으로 나열하지 않고 각 줄 세그먼트에 대해 API를 호출한다는 점입니다.
ctx.beginPath(); ctx.moveTo(233.08751,519.30948); ctx.lineTo(235.02744,515.75293); ctx.lineTo(237.29070000000002,515.42961); ctx.lineTo(237.61402,516.23791); ctx.lineTo(235.51242000000002,519.30948); ctx.lineTo(233.08751,519.30948); ctx.closePath();
하와이 지도는 http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasmap.htm을 참조하세요.
경로 API는 moveTo 및 arc로 제한되지 않으며 이차 및 Bezier 곡선을 비롯하여 동일한 SVG 방향 측면을 포함합니다.
마우스가 이미지 위에 있을 때 캡처되는 이벤트와 기능이 제한됩니다. 유지되는 그래픽 정보가 없기 때문에 프로그래머는 mouseX 태그의 단일 요소에서 mouseY, <canvas> 좌표를 변환한 다음 메모리 내 구조에 있는 모양에 따라 해당 명령을 라우팅해야 합니다. 기본 제공 isPointInPath API를 포함하여 복잡한 경로에서 이를 지원하기 위한 타사 라이브러리가 있지만 이 API는 마지막에 그려진 경로로 제한됩니다. 따라서 SVG와 달리 스타일 지정도 없고 여러 형상에 대한 적중 감지에 대한 지원도 없습니다. 또한 Canvas는 확장성을 지원하지 않으므로 하와이 지도는 확대/축소 시 급격하게 충실도가 떨어집니다.
Canvas는 개발자가 새로운 그래픽 환경을 제공할 수 있게 하는 강력한 하위 수준 API입니다.
Canvas 대 SVG의 요약
다음은 벡터 그래픽을 만들 때 Canvas를 사용할 것인지 SVG를 사용할 것인지 결정하는 데 도움이 되는 결정에 도움이 되는 요약 설명입니다.
| Canvas | SVG |
|---|---|
| 픽셀 기반(Dynamic .png) | 세이프 기반 |
| 단일 HTML 요소 | DOM의 부분이 되는 다중 그래픽 요소 |
| 스크립트를 통해서만 수정됨 | 스크립트 및 CSS를 통해 수정됨 |
| 이벤트 모델/사용자 조작이 세분화됨(x,y) | 이벤트 모델/사용자 조작이 추상화됨(직사각형, 경로) |
| 성능은 표면이 작거나, 개체 수가 많을 경우(>10k) 또는 두 가지 조건이 모두 충족되면 개선됨 | 성능은 개체 수가 작거나(>10k), 표면이 클 경우 또는 두 가지 조건이 모두 충족되면 개선됨 |
이전 표에서 기존 소프트웨어 측면에서 두 가지 심성 모델을 생각해 봅시다. 캔버스는 모양과 다른 도구를 사용하여 이미지를 그리고 만들 수 있는 MSPaint와 비슷합니다. SVG는 프로그래밍 지원과 테마 추가 기능이 있는 Office PowerPoint 슬라이드와 비슷합니다.
<canvas>를 사용할 경우 및 SVG를 사용할 경우: 시나리오
이 섹션에서는 어떤 기술이 더 적합한지를 결정하는 상식적인 방법을 포함하여 두 기술의 기술적 이점과 제한에 대해 설명합니다. SVG 및 <canvas>는 모두 거의 동일한 결과를 얻을 수 있는 완전히 중복된 기능이라는 점을 알아야 합니다. <canvas>가 SVG보다 훨씬 더 낫거나 그 반대인 경우이거나, 두 기술의 조합이 더 적합하거나, 두 기술 중 하나를 사용하고 고려할 수 있는 구체적인 시나리오를 설명하는 것이 중요할 것입니다.
이러한 시나리오를 통해 SVG에 적합한 경우, Canvas에 적합한 경우 및 두 기술 중간에 있는 경우를 분명하게 이해할 수 있습니다. 시나리오는 각각의 장점과 단점을 설명하므로 개발자가 기술의 동작을 이해하고 적용에 대한 확고한 선택을 할 수 있습니다.
숙련된 사용자
경우에 따라 기능에 관계없이 기술을 선택해야 하는 외부적인 영향이 있습니다. Canvas 또는 SVG 사용에 대한 질문의 경우 두 가지 기본적인 구별 요소가 있습니다.
경우에 따라 개발자 지식, 기술 집합 및 기존 자산이 기술 선택에 중요한 역할을 합니다. 개발자에게 하위 수준 그래픽 API에 대한 깊은 지식이 있고 웹 기술에 대한 제한된 지식이 있는 경우 선택할 수 있는 기술은 Canvas입니다.
또한 트래픽이 높은 웹 사이트에서 성능은 아주 중요합니다. 두 기술의 성능 특징을 비교하는 것이 꼭 필요합니다. 여기에는 Canvas에 제공되지 않는 접근성, 사용자 지정 스타일 및 더 세부적인 사용자 조작이 필요할 수 있습니다. 이는 일반적으로 성능이 우수한 것처럼 보이긴 하지만 Canvas를 반드시 선택해야 한다는 의미는 아닙니다. 다음 그래프는 SVG 개체와 Canvas 개체의 렌더링 시간 차이를 보여 줍니다.
일반적으로 화면 크기가 커질수록 그리는 데 더 많은 픽셀이 필요하므로 Canvas는 성능이 떨어지기 시작합니다. 화면의 개체 수가 증가하면 지속적으로 개체를 DOM에 추가하므로 SVG의 성능이 떨어지기 시작합니다. 이러한 측정이 반드시 정확한 것은 아니며 분명히 구현과 플랫폼, 완전한 하드웨어 가속 그래픽 사용 여부 및 JavaScript 엔진 속도에 따라 변경될 수 있습니다.
높은 충실도의 복잡한 벡터 문서
높은 충실도의 복잡한 벡터 문서는 두 가지 기본적인 이유로 SVG의 최적 지점이었고 앞으로도 그럴 것입니다. CAD 프로그램으로 만든 문서를 비롯하여 아주 세밀한 문서는 많이 있습니다. 이런 문서에서는 SVG의 scalable 부분이 독립 실행형 문서나 웹 페이지에 포함된 문서로 자세한 보기를 제공합니다. 또한 이 기술은 충실도가 높은 인쇄에 적합합니다. SVG의 선언적 특징은 데이터베이스로부터 클라이언트 또는 서버 측 모양 생성이나 도구를 제공합니다. 마지막으로 특허를 위한 엔지니어링 다이어그램이나 도시 계획을 위한 산업 다이어그램 때문에 SVG를 권장 지원하던 정책에서 필수 지원 정책으로 변화하고 있는 정부 기관에서의 활용을 살펴 보았습니다. 정부 기관은 다음과 같은 공공 소비 전자 문서에 대해서 어느 특정 공급업체를 선호하지 않는 방향으로 선회하고 있기 때문에 이런 변화는 계속될 것으로 예상됩니다.
- 건물, 설계 및 평면도
- 전기, 항공 및 계통도
- 조직도
- 지도
- 생물 계통도
이전 시나리오에서 보존될 수 있는 세부 정보의 예가 다음 그림에 표시되어 있습니다. 첫 번째 이미지는 테스트 드라이브 사이트에서 찾을 수 있는 웹 페이지의 스냅숏을 보여 줍니다. 여기에는 호흡계 다이어그램과 원소 주기율표가 포함되어 있습니다.
http://ie.microsoft.com/testdrive/Graphics/RealWorldDataAndDiagrams/Default.xhtml
두 번째 이미지는 동일한 다이어그램을 1000% 확대한 것입니다.
큰 도식을 관찰하는 것이 유용하지만 세부 정보를 분석하거나 엔지니어링용으로 전체 도식을 인쇄해야 하는 경우를 고려하면 확장성의 S는 확실히 명확하고 중요해집니다. 이런 이유로 다음 이미지와 같이 높은 충실도의 복잡한 벡터 문서를 범위의 맨 끝에, SVG에 더 가깝게 배치합니다.
이러한 문서는 이러한 시나리오를 유지 그래픽 모델에 가장 적합하게 만드는 SVG의 두 번째 측면인 대화형 작업도 활용할 수 있습니다.
강화된 웹 그래픽
이미지 형식의 SVG
또한 일반적으로 SVG는 응용 프로그램이나 웹 페이지 내에서 크기에 관계없이 단순한 이미지에 사용됩니다. SVG는 DOM으로 로드되거나 적어도 이미지를 만들기 전에 구문 분석되므로 성능이 약간 저하되지만 이는 웹 페이지를 몇 밀리초 정도에 렌더링하는 비용과 비교하면 극히 작습니다.
네트워크 트래픽을 평가하기 위한 파일 크기 측면에서 다음 두 개의 이미지는 동일하게 표시되고 크기만 1K 다릅니다(SVG가 약간 더 크고 압축되지 않음).
앞에서 본 바처럼 이미지 형식의 SVG는 확장 가능하기 때문에 개발자가 이미지를 더 큰 크기로 사용하려고 하거나 사용자가 높은 DPI 화면을 사용할 경우 PNG(Portable Network Graphic)가 픽셀화되거나 충실도를 유지하기 위해 크기가 더 큰 파일 버전이 필요합니다.
SVG는 웹 페이지의 가장 단순한 이미지에 대해서도 멋진 이미지 대체 형식으로 사용됩니다. 정적 WebApp/WebPage 이미지는 범위에서 SVG 쪽으로 구분됩니다.
픽셀 조작
범위의 다른 쪽에 있는 Canvas를 사용하면 빨리 그리지만 이 정보를 유지할 필요가 없는 경우. <canvas>에 가장 적합한 여러 가지 실시간 데이터 시나리오가 있습니다. 광선 추적은 이미지 평면의 픽셀을 통해 광선 경로를 추적하고 가상 개체와 마주치는 효과를 시뮬레이트하는 방식으로 이미지를 하이드레이트하는 데 사용할 수 있습니다. 다음 이미지는 이 시뮬레이션을 보여 줍니다.
속도는 브라우저에서 JavaScript 엔진 속도에 따라 결정되므로 많은 계산이 필요하지 않습니다. 그럼에도 대부분은 네이티브 코드가 여전히 더 빠르다고 주장하겠지만 JavaScript 엔진이 발전함에 따라 어셈블리 및 C++의 시대와 같이 이 격차가 해소되기 시작했습니다.
일반적으로 웹의 백그라운드에서 수행되지만 광선 추적으로 얻는 효과는 광범위합니다. 효과의 범위는 단순 벡터 그래픽에서 현실적 이미지를 만드는 등 다양한 시각적 효과를 만드는 것부터 사진 같은 필터를 적용하여 적목 현상을 제거하는 것까지 다양합니다.
Canvas API를 통해 개발자가 픽셀을 읽고 쓸 수 있기 때문에 여기서 유일한 제한은 속도와 상상력입니다. 앞의 예제는 Adam Burmister가 제공한 것이며 http://labs.flog.co.nz/raytracer/에서 사용할 수 있습니다. 이 예에는 최종 이미지를 만드는 데 필요한 계산을 얻을 수 있는 많은 라이브러리가 있지만 기본적인 최종 함수는 fillRect입니다.
setPixel: function(x, y, color){ var pxW, pxH; pxW = this.options.pixelWidth; pxH = this.options.pixelHeight; this.canvas.fillStyle = color.toString(); this.canvas.fillRect (x * pxW, y * pxH, pxW, pxH); },
이런 이유로 광선 추적기 같은 높은 성능의 그래픽은 다음 이미지에서처럼 Canvas 시나리오로 범위의 맨 왼쪽으로 구분됩니다.
위의 광선 추적기 제작자는 시나리오가 정적 이미지를 생성하기 때문에 데스크톱 소프트웨어는 광선 추적기에 필요한 집중적인 부동 작업에 훨씬 더 적합하다고 지적했습니다.
금속 픽셀 조작에 대한 이 기술의 흥미로운 구현은 이미지에 필터를 적용하는 것입니다. 필터가 이미 웹이 있고 상당한 처리 속도가 필요하지만(이런 처리 속도는 그래픽 파이프라인에서 하드웨어 가속 그래픽을 통해 얻을 수 있음), 개발자들은 가장자리 감지나 다른 수리 표현식 등의 알고리즘으로 실험해볼 수 있습니다.
실시간 데이터
일반적인 시나리오의 경우 Canvas는 실시간 데이터 출력에 적합합니다. Canvas를 통한 사용자 상호 작용이 어렵다는 것을 이미 살펴 보았으므로 이러한 시나리오를 간결하게 식별하는 방법을 알아두세요. 따라서 다음 내용에서는 비대화형 실시간 데이터 시각화에 대해 설명합니다.
오늘날 날씨 데이터는 특정 간격으로 서버에서 생성된 이미지를 순전히 통계적으로 처리하거나 또는 클라이언트 측 타사 플러그 인을 통해 가능한 신속하게 처리하여 표시됩니다. ECWMF에서는 서버 생성 이미지 대신 SVG를 사용할 때의 비용 절감을 나타내는 연구를 수행했지만, 날씨 패턴(및 기타 빠른 실시간 데이터)에 대한 대부분의 그래픽 표현에서는 Canvas가 분명한 승자입니다. 다음 이미지는 지도에 그래픽으로 표시된 날씨 패턴을 보여 줍니다.
앞의 이미지와 같이 그리기는 표면이 반드시 크지는 않지만 화면의 개체 수는 상당히 많습니다. Canvas API를 사용하면 DOM에 영향을 주지 않고 개체를 빠르게 그리고 지울 수 있습니다. 또한 SVG 타원 등을 사용하여 이 작업을 수행할 수도 있지만 타원을 DOM에 로드하고 애니메이션을 통해 수정하는 비용이 높습니다. 사실, 분석할 이미지나 데이터 애니메이션에서 많은 모양, 특히 비슷하지 않은 모양이 나타나는 경우에는 모두 일반적으로 Canvas 기술을 사용해야 합니다. 실제로 데이터를 시각화 및 제어할 수 있는 속도는 CPU 속도 및 JavaScript 엔진 속도에 의해 제한됩니다. 그러나 CPU 집중식 광선 추적 시나리오를 제외하고는 적절한 애니메이션을 여전히 얻을 수 있습니다. Reasonable에서는 클라이언트가 JavaScript로 수행할 수 있는 애니메이션과 서버가 유선으로 계산하고 마샬링할 수 있는 애니메이션 사이의 상대적 차이를 설명합니다.
이 시나리오는 <canvas>에 주로 사용할 수 있는 케이스인 것 같습니다.
픽셀 대체(녹색 스크린)
Canvas를 사용할 수 있는 다른 시나리오는 배경색을 다른 장면이나 이미지로 바꾸기 위해 이미지에서 색 감지를 사용하는 것입니다. 광선 추적기나 필터와 같이 JavaScript의 현재 성능 속도 제한 때문에 높은 생산 품질이 요구되는 현실적인 시나리오에서는 데스크톱 소프트웨어로 사전 처리될 수 있습니다. 그러나 <canvas>는 녹색 스크린과 같은 시나리오를 읽고 쓰는 저급 픽셀용으로 디자인되었으므로 SVG로 대체할 수 없습니다.
두 개의 동영상에서 다른 동영상으로 픽셀을 읽고 쓰는 데 필요한 코드에는 두 개의 동영상, 두 개의 Canvas 및 최종 Canvas를 사용해야 합니다. 동영상은 한 번에 하나의 프레임으로 포착되고 두 개의 개별 Canvas에 그려집니다. 이를 통해 데이터를 다시 읽을 수 있습니다.
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++) { // Grab the RBG for each pixel: r = currentFrameSource1.data[i * 4 + 0]; g = currentFrameSource1.data[i * 4 + 1]; b = currentFrameSource1.data[i * 4 + 2]; // If this seems like a green pixel replace it: if ( (r >= 0 && r <= 59) && (g >= 74 && g <= 144) && (b >= 0 && b <= 56) ) // Target green is (24, 109, 21), so look around those values. { 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]; } }
마지막으로 픽셀 배열이 대상 Canvas에 기록됩니다.
ctxDest.putImageData(currentFrameSource1, 0, 0);
http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/canvasgreenscreen.htm(녹색 스크린 코드를 전체적으로 보려면 이 페이지의 원본 코드를 확인하세요.)
조합/크로스오버 시나리오
다음 시나리오는 SVG 또는 Canvas에서 적절한 결과로 수행할 수 있지만 선호하는 기술이 있을 수 있습니다.
차트 및 그래프
벡터 그래픽이 필요한 광범위한 범위의 차트와 그래프가 있습니다. 이러한 그래프는 대부분 세 가지 특징 중 하나를 포함하기 때문에 SVG를 사용하여 만드는 것이 가장 좋습니다.
- 그래픽은 XML(SVG)로 쉽게 바뀔 수 있는 기존 데이터에서 생성됩니다.
- 사용자 조작이 필요합니다.
- 웹 페이지의 They benefit from styling on a webpage
대화형 기능을 사용하는 높은 충실도 문서 시나리오를 늘려 시나리오의 범위를 크게 확장합니다. 다음이 포함됩니다.
- 대화형 조직도 및 순서도
- 데이터 차트(도넛형, 막대형, 분산형)
- 대화형 지도 - 경로 찾기
- 건물 설계 평면도
- 항공권 또는 콘서트 장소 좌석 지도
대부분 속도에 따라 결정되지만 빠른 실시간 데이터 처리에는 Canvas가 더 적합하다는 것을 설명했습니다.
2차원 게임
단순 2차원 게임으로 정의된 가벼운 게임은 Canvas와 SVG 사이에서 개발자가 선택해야 합니다. 이전에 게임 라이브러리는 더 낮은 수준의 그래픽 API를 활용했지만 <canvas>로 기울어지는 추세입니다.
널리 사용되는 물리 엔진과 같이 라이브러리의 다른 구성 요소가 그래픽 레이어보다 훨씬 더 깊을 경우 그래픽은 구현 세부 정보가 됩니다. 윤곽선, 속도, 크기 및 위치와 같은 그래프 형상이 엔진에 전달되고 엔진은 속도, 충돌 및 위치로 응답합니다. 그래픽은 구성 요소 중 가장 높은 수준입니다.
게임 논리와는 독립적인 그래픽의 개념은 <svg> 및 <canvas>를 모두 보여 주려고 같은 저자가 개발한 두 개의 게임 SVG-oids 및 canvas-pinball입니다. 게임 엔진과 독립적인 그래픽 계층의 좀 더 나은 예제는 둘 다 동일한 물리적 엔진을 사용하는 canvas-pinball을 SVG-Dice에 비교하는 경우입니다.
게임 및 데모 논리는 서로 다르지만 두 게임의 물리 엔진은 모두 게임 구성 요소의 위치, 충돌, 속도 및 기타 물리적 측면을 추적합니다.
canvas-pinball의 경우 더 높은 수준의 사용자 지정 애니메이션 관리자가 일련의 Canvas API를 사용하여 장면을 다시 그립니다.
if (animationsInProgress) {
ctx.save();
ctx.lineWidth = 2.0;
ctx.beginPath();
ctx.moveTo(89, 322);
ctx.lineTo(101, 295);
.
.
.
ctx.stroke();
ctx.restore();
ctx.moveTo(tVp.x, tVp.y);
}
SVG Dice의 경우 더 높은 수준의 사용자 지정 애니메이션 관리자가 그룹에 대한 변환을 사용하여 DOM을 통해 화면에서 기존 그래픽을 재배치합니다.
if (animationsInProgress) { this.rotation += (this.circleBody.m_linearVelocity.x/20); var transFormString = "translate(" + Math.round(this.circleBody.m_position.x) + "," + Math.round(this.circleBody.m_position.y) + ") scale (" + this.scale.toString() + ") rotate(" + Math.round(this.rotation).toString() + "," + Math.round(this.xTrans).toString() + "," + Math.round(this.yTrans).toString() + ")"; this.die2.setAttribute("transform", transFormString); }
한 게임은 모양을 다시 그리고 재배치하는 반면 다른 게임은 재배치하지만 메모리 내 모양을 유지하므로 비용이 듭니다. 대부분의 가벼운 게임에서는 이 비용이 아주 낮고 게임에 대한 기대치도 그 정도입니다. 더 낮은 수준의 API를 사용한 직접 실행 모드 그래픽에 대한 아이디어가 훨씬 더 익숙합니다.
고급 시나리오
가장 강력한 시나리오에서는 전체 그래픽, 스타일 지정 및 문서 기술이 결합될 수 있습니다.
사용자 인터페이스 디자인
몇 년 전까지만 해도 사용자 인터페이스 디자인에는 SVG가 더 적합한 기술이라고 주장할 수 있었습니다. 요구 사항은 SVG와 일치합니다. 사실, Linux 운영 체제에 대한 하나 이상의 프런트 엔드는 전체적으로 SVG에 빌드됩니다. 슬라이더, 확인란, 둥근 단추 및 표준 고유한 컨트롤 집합 중 상자가 없는 컨트롤과 같은 컨트롤은 벡터 그래픽에 적합합니다. 그러나 둥근 모서리, 그라데이션, 필터 및 포인터 이벤트를 포함한 CSS의 최근 개발과 앞으로의 개발을 볼 때 표준 상자 모델 HTML 문서 중심 구조를 사용하면 이러한 컨트롤을 거의 대부분 개발할 수 있습니다. 특히 최근 CSS 그리드 및 플렉스박스 모델을 포함한 다른 컨트롤은 적어도 컨테이너로서 HTML 요소에 더 적합합니다.
여기서는 풍부한 데이터 기반 차트의 예가 제공됩니다. 이는 잘 설계된 출력이 아니지만 최종 결과는 잘 표현됩니다. 그래프 및 차트 컨트롤은 개발하기가 어렵지만 Microsoft 및 타사에서 성공했습니다. 이 성공 덕분에 클라이언트 쪽 또는 서버 쪽 데이터 바인딩의 추상화를 제공하여 개발자의 부담을 줄어 들었지만 지금까지 웹에 대한 클라이언트 측 렌더링은 주로 정적으로 남거나 플러그 인을 필요로 했습니다. 아래에서는 SVG의 다양한 기능을 사용하여 향상된 사용자 환경을 제공했습니다. 클라이언트에 전달되거나 이후에는 더 선언적인 상호 작용으로 전달될 코드에 관계없이 차트는 두 개의 주요 구성 요소인 기능 및 데이터를 사용하여 렌더링됩니다. 그래프 기능 또는 배경은 기본 정적 SVG입니다.
<rect id="tipsh" x="20" y="100" width="194" height="34" rx="5" ry="5" /> <rect id="tip" x="20" y="100" width="190" height="30" rx="5" ry="5" /> <text id="tiptxt" x="40" y="120" font-size="12" font-family="Arial" fill="#ffffff" visibility="hidden">milliseconds</text> <polygon id="arrow" points="10,110 20,105 20,115" style="fill:#ffffff" /> <line x1="3" x2="460" y1="359" y2="359" style="stroke:#cccccc;stroke-width:1"/>
그런 다음 각 개별 데이터 요소가 클라이언트에 전달되고 동적으로 조작되거나 서버에서 생성됩니다.
<text x="10" y="348" font-size="12" font-family="Arial">{Page}.svg</text> <rect x="115" y="350" width="86" height="8" style="fill:url(#inverseblue);filter:url(#Gaussian_Blur);" rx="12" ry="12"/> <rect x="115" y="333" width="86" height="17" rx="12" ry="12" onmouseover="changeColor(evt)" onmousemove="changeText(evt,'2 milliseconds')" onmouseout="changeTextNotOver(evt)" /> <text x="171" y="345" font-size="11" font-family="Arial" fill="#ffffff">6.1%</text>
http://samples.msdn.microsoft.com/workshop/samples/graphicsInHTML5/svgchart.htm
결론
최신 브라우저에서 사용할 수 있는 기존 벡터 그래픽 기술을 분석하면 기존 시나리오와 새로운 시나리오가 대화형 방법으로 표준 웹 기술을 충족할 수 있습니다. 앞으로 누구보다 먼저 선언적 애니메이션으로 광고 공간을 지원할 수 있는 큰 기회가 있습니다. 시나리오 기반 기능 개발을 사용하면 경쟁에서 앞서 나가고 웹 응용 프로그램과 웹 페이지에서 풍부한 그래픽의 표준 기반 환경을 전달할 수 있습니다.
출처 : http://msdn.microsoft.com/ko-kr/library/ie/gg193983(v=vs.85).aspx
'■ 프론트엔드 ■ > SVG' 카테고리의 다른 글
| path (0) | 2013.11.29 |
|---|---|
| SVG란? (0) | 2013.11.29 |
| Flash 2 SVG (플래시를 SVG로 변환) (0) | 2013.10.25 |
| SVG API (0) | 2013.10.15 |
| SVG (Scalable Vector Graphics) (0) | 2013.10.14 |