데꾸벅의 생각들

SVG와 CANVAS사이의 선택

Publisher/HTML/HTML5 / 2010. 3. 9. 21:45

HTML5에 대한 내용을 정리하기로 마음 먹으면서 하나하나씩 정리해 갑니다.

오늘은 오페라개발자센터에서 작성한 <Canvas>와 <SVG>관련 포스트를 참조하여 SVG와 Canvas태그에 대해서 알아보도록 하겠습니다.

새로운 웹기술의 목적은 지원하지 않는 브라우저에서도 동작하게끔 크로스브라우저를 지원합니다. 예를 들면 2010년 03월 현재 나온 브라우저에서 부분적으로만 지원하는 SVG나 CANVAS를 모든 브라우저에서 지원하게끔 대체(Fallback)기술들이 존재합니다. Raphaёl로 구현가능하고 <CANVAS>는 ExCanvasJavascript Library로 구현이 가능합니다. 심지어 MS의 익스프로러도 SVG에 관심을 보이고 있고 향후 폭넓게 지원할 것으로 보입니다. 제목과 같이 새로운 프로젝트에 어떤 기술이 적합할지 선택하는것이 점점 더 어려워 질것입니다.

HTML5 Canvas와 SVG 두 웹기술은 브라우저안에서 풍부한 그래픽을 만들어내는 것이나 이 두개는 근본적으로 서로 다릅니다. 이 포스트에서 서로 다른점에 대해서 밝혀보고, SVG와 Canvas 를 효과적이고 적절하게 사용하기 위해 필요한 지식에 대해 알아보고자 합니다.

SVG (Scalable Vector Graphics)

SVG 는 XML기반 표준 벡터 그래픽 포맷입니다. SVG 컨텐츠는 정적일수 있으며 인터랙티브하고 애니메이션이 가능합니다 즉 매우 유연하다는 뜻이죠. CSS로 SVG 를 스타일링 할수 있고, SVG DOM을 이용하여 동적인 비헤이비어(Behaviour)를 추가할수 도 있습니다. 물론 한개의 파일안에 SVG 텍스트가 있기때문에 상대적으로 접근 또한 가능합니다. 그리고 <object>태그를 이용하여 표준 (X)HTML안에 SVG 컨텐츠를 추가할 수도 있습니다.

좌측 이미지와 같이 SVG를 이용한 원형 샘플이 있습니다 (소스는 아래에..). 간단히 확대/축소 애니메이션을 구현한 것이다. 오페라와 Webkit기반의 웹브라우저에서 동작합니다 (아래 소스로는 FF 와 IE에서는 애니메이션이 작동하지 않습니다.)

SVG를 이용하면 간단한 벡터 그래픽과 애니메이션이상으로 많은 것들을 할 수 있으며 스크립트를 사용하여 좀더 인터랙티브한 웹애플리케이션을 개발할 수도 있습니다. SVG 에 대해서 좀더 자세히 알고자 한다면 오페라 개발자센터의 " SVG:Evlolution, Not Revolution"을 참조하세요.

<defs>

</radialGradient>

</defs>

</ellipse>

</svg>

HTML5 Cavas

HTML5 Cavas스펙에서는 다양한 자바스크립트 드로잉 API 들을 제공합니다. <canvas>태그요소만으로 HTML페이지에 원하는 그래픽을 드로잉 할 수 있습니다. 실제로 드로잉하기 위해서는 다른 옵션을 사용합니다.

전자인 2D드로잉 컨텍스트는 IE를 제외한 최근 웹브라우저에서 지원가능합니다. 후자인 3D드로잉 컨텍스트는 아직 표준화 작업중이며 손을 봐야 할 부분들이 남아있습니다.

좀더 폭넓게 지원되는 2D드로잉 컨텍스트에 대해서 살펴보자면, 2D 비트맵을 빠르게 드로잉 연산을 수행하기 위해 간단하고도 막강한 API들을 제공합니다. 파일포맷이 아니라 단지 스크립트를 이용하는 것입니다.

아래는 canvas를 이용한 드로잉 예제입니다.

소스다운로드 :

canvas.html

HTML5로 구현한 canvas

<!DOCTYPE html>

<head>

<title>Canvas animation example</title>

<!--

window.addEventListener('load', function () {

// canvas엘리먼트 찾기

var canvas = document.getElementById('myCanvas'),

w = 4,

h = 4,

zoompx = 6,

step = 'zoomin';

if (!canvas || !canvas.getContext) {

return;

}

// canvas 2d context 가져오기.

var ctx = canvas.getContext('2d');

if (!ctx) {

return;

}

var K = 4*((Math.SQRT2-1)/3);

//줌인,줌아웃처리

setInterval(function () {

if (step == 'zoomin') {

w += zoompx;

h += zoompx;

} else if (step == 'zoomout') {

w -= zoompx;

h -= zoompx;

}

if (w > canvas.width) {

w = canvas.width;

step = 'zoomout';

} else if (w < 4) {

w = 4;

step = 'zoomin';

}

if (h > canvas.height) {

h = canvas.height;

step = 'zoomout';

} else if (h < 4) {

h = 4;

step = 'zoomin';

}

// radial gradient 생성: x0, y0, r0, x1, y1, r1.

// That's the start circle (x0,y0) coordinates and r0 radius,

// followed by the end circle (x1,y1) coordinates and r1 radius.

var gradient = ctx.createRadialGradient(

Math.round(w/2), Math.round(h/2), 0, Math.round(w/2), Math.round(h/2),

Math.round(Math.min(w, h)/2)

);

gradient.addColorStop(0, "#ff0");

gradient.addColorStop(1, "#0f0");

// 그라디언트 속성 입히기

ctx.fillStyle = gradient;

// Ellipse radius and center.

var cx = w/2,

cy = h/2,

// Ellipse radius*Kappa, for the Bezier curve control points

rx = cx*K,

ry = cy*K;

ctx.setTransform(1, 0, 0, 1, 0, 0);

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.setTransform(1, 0, 0, 1, Math.round((canvas.width - w) / 2),

Math.round((canvas.height - h) / 2));

ctx.beginPath();

// startX, startY

ctx.moveTo(cx, 0);

// Control points: cp1x, cp1y, cp2x, cp2y, destx, desty

// go clockwise: top-middle, right-middle, bottom-middle, then left-middle

ctx.bezierCurveTo(cx + rx, 0, w, cy - ry, w, cy);

ctx.bezierCurveTo(w, cy + ry, cx + rx, h, cx, h);

ctx.bezierCurveTo(cx - rx, h, 0, cy + ry, 0, cy);

ctx.bezierCurveTo(0, cy - ry, cx - rx, 0, cx, 0);

ctx.fill();

ctx.stroke();

ctx.closePath();

}, 20); //end of setInterval

}, false);

// -->

</script>

</head>

<body>

<canvas id="myCanvas" width="320" height="320">당신의 브라우저는 Canvas를 지원하지 않습니다.</canvas>

</body>

</html>

canvas 영역안에서는 이미지필터와 같이 pixel-manipluation 연산들을 수행할 수 있으면 png, jpg,등 브라우저가 로드할수 있는 이미지들을 삽입할 수도 있습니다. 또한 canvas 결과물을 일반 이미지로 export하거나 저장할 수도 있습니다. 아래소스는 Canvas 태그로 구성한 윈도우즈 그림판 소스입니다.

Canvas태그로 만든 이미지 저장 및 구현 :

Canvas.rar

기본적인 Canvas 를 배우시려면 오페라 개발자센터의 "HTML5 Canvas"를 참조하세요

여기서 제공한 canvas 예제는 좋은 사용예가 아닙니다. 왜냐하면 여러분은 SVG를 이용하면 더 적은 코드로 같은 기능을 구현할 수 있기 때문입니다. 좀더 좋은 canvas 사용예는 인터랙티브한 그래프와 이미지분석과 같은 동적인 정보를 표현하는 것입니다. 좋은 canvas예제로써 아래 그림과 같은 예제는 canvas 2D Context API를 이용하여 이미지 히스토그램을 표현하고 계산하는 예제입니다.

왼쪽의 이미지 히스토그램 예제 코드에서는 <img>태그로 이미지를 로드합니다. 그리고 이미지가 로드되는 순간 Canvas 2D Context API를 이용하여 이미지에 사용된 모든 픽섹들을 카운트하여 분석합니다.

사용자가 선택한 칼라값들(CMYKm HIV, RGB)에 따라 픽섹들이 카운트되고 분석됩니다. 오른쪽에 표시된 두번째 canvas태그에서는 각 픽셀에서 수집한 데이타를 바탕으로 이미지 히스토그램을 드로잉 합니다.

데꾸벅이 자주가는 canvas관련 사이트

이미지 히스토그램 소스 :

imageHistogram.rar

Canvas 3D Context는 어디에 적합한가?

보통 3D 컨텍스트는 개체들, 텍스쳐, 음영값들, 그리고 상업적 애니메이션에 사용됩니다. 쿼크(Quake)같은 3D 게임을 만들수도 있고 3D 모델링 툴들을 제작할 수도 있습니다. 웹브라우저는 하드웨어 가속기를 이용하여 장면들을 드로잉 합니다. 물론 가능하다는 전제하에 말이죠!!

SVG와 Canvas 비교

아래 표는 svg와 canvas를 사용했을때의 장점과 단점을 표기한 것입니다. 뭐, 물로 데꾸벅이 한게 아니라 오페라 개발자센터에서 한거지만요.. ㅡ.,ㅡ;

장점

Canvas

SVG

높은 퍼포먼스의 2D영역으로 원하는 어떤것이라고 드로잉능함
지속적인 수행 - 모든것이 픽셀이므로 이미지 해상도가 높을 경우에만 수행능력이 떨어짐
.png나 .jpg로 저장할수 있음.
래스터방식(점-dotted방식)의 그래픽에 적합하여 게임이나 도형처리가 용이, 이미지 편집과 같이 픽셀수준의 처리가 용이하다

해상도에 독립적이다 - 어떤 화면 해상도에서도 처리가능하기때문(벡터방식)에 SVG 를 크로스플랫폼 UI 에 적합하게 하였음.
애니메이션에 대한 지원이 좋음 - 엘리멘트들은 명확한 태그나 스크립트로 구현이 가능
자바스크립트로 SVG DOM API 를 이용한 모든 엘리먼트들을 자유자재로 컨트롤한다.
SVG는 XML 파일포맷이므로 모든 웹브라우저에 지원하고 웹애플리케이션 UI에 좀더 좋은 솔루션으로 사용된다. UI 시맨틱은 ARIA로 향상시킬수 있다.

단점

Canvas

SVG

드로잉할 DOM노드가 없고 픽셀로만 컨트롤가능하다
애니메이션에 대한 API가 없으므로 필요할때마다 이벤트를 업데이트하거나 타이머를 작동시켜야 한다.
텍스트 렌더링에 약한다.
canvas를 지원하지 않는 브라우저가 존재하기 때문에 적절한 선택이 아닐지도 모른다.
웹사이트나 애플리케이션 UI에 적합하지 않다. 왜냐하면 전통적으로 UI는 동적이고 인터랙티브하나 canvas는 다시 렌더링 해야 한다. 다른 이유로는 지원하는 애니메이션 API가 부족하다.

문서 복잡도가 증가할수록 렌더링이 느리다. 즉 DOM이 많을수록 느리다
게임같은 곳에서는 적합하지 않다. 아마도 가장좋은 방법은 Canvas + SVG 조합이 아닐까 한다.

어떤것을 선택할 것인가?

각 기술마다 자신만의 이용법이 있어 어떤것이 좋고 어떤것이 나쁜것인지 가늠할 수 없습니다.

Canvas가 적합한 예

인터랙티브한 이미지 편집 : 자르기, 리사이징, 필터적용
래스터 그래픽 생성 : 데이타 표현, 데이터 플롯, 챠트등
이미지 분석
게임 그래픽 등

SVG가 적합한 예

해상도 독립적인 웹애플리케이션 사용자 인터페이스
매우 인터랙티브하고 애니메이션 되는 사용자 인터페이스
데이타 챠트
벡터 이미지 편집

간단하게 말하자면 두가지 기술을 모두 사용해야 합니다. 래스터 그래픽같이 동적으로 렌더링을 원한다면 canvas를 사용하고 그것들을 애니메이션 하려면 svg를 사용합니다.

언제 이런 기술들을 사용하죠?

순수하게 HTML + CSS기반으로 둥근 모서리펴현이나 CSS transition, 음영표현, 투명처리를 하려면 jquery와 같은 자바스크립트를 고려할 겁니다. 만약 여러분의 프로젝트가 순수 HTML과 CSS만으로 개발가능한지, 정말로 SVG, canvas가 필요한지 자신에게 반문해 보세요. SVG는 가장 프리젠이션에 능한 마크업이고 HTML보다 일반적이지도 않는 전문성을 필요로 합니다. 프리젠테이션을 하기 위해 HTML과 CSS뿐만아니라 SVG를 선택하는 것은 그리 바람직 하지 않습니다.

요약

이 포스트에서는 같지만 서로다른 두가지 기술들(SVG와 HTML5 Canvas)의 차이점에 대해 알아봤습니다. 각각의 기술의 강점과 단점을 있으므로 여러분은 적절하게 잘 사용하셔야 겠죠. 종종 이러한 하나의 웹애플리케이션에 두개의 기술을 적절히 혼합하면 좋은 결과를 수확할수도 있습니다.

저작자표시 비영리 변경금지

'Publisher > HTML/HTML5' 카테고리의 다른 글

[HTML5] Progress Bar CSS입히기 (2)	2013.03.04
HTML5 Gallery (4)	2009.04.10
웹페이지 소스보기 금지 (0)	2008.08.19

Post by 넥스트리소프트 데꾸벅(techbug)

, |

카테고리

최근에 올라온 글

최근에 달린 댓글

링크

SVG와 CANVAS사이의 선택

'Publisher > HTML/HTML5' 카테고리의 다른 글

티스토리툴바