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를 이용하면 간단한 벡터 그래픽과 애니메이션이상으로 많은 것들을 할 수 있으며 스크립트를 사용하여 좀더 인터랙티브한 웹애플리케이션을 개발할 수도 있습니다. SVG 에 대해서 좀더 자세히 알고자 한다면 오페라 개발자센터의 " SVG:Evlolution, Not Revolution"을 참조하세요.
<svg style="margin:10px" version="1.1" width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="circleGrad">
<stop offset="0%" stop-color="rgb(255, 255, 0)" />
<stop offset="100%" stop-color="rgb( 0, 255, 0)" />
</radialGradient>
</defs>
<ellipse fill="url(#circleGrad)" stroke="#000" cx="50%" cy="50%" rx="50%" ry="50%">
<animate attributeName="rx" values="0%;50%;0%" dur="2s" repeatCount="indefinite" />
<animate attributeName="ry" values="0%;50%;0%" dur="2s" repeatCount="indefinite" />
</ellipse>
</svg>
HTML5 Cavas
HTML5 Cavas스펙에서는 다양한 자바스크립트 드로잉 API 들을 제공합니다. <canvas>태그요소만으로 HTML페이지에 원하는 그래픽을 드로잉 할 수 있습니다. 실제로 드로잉하기 위해서는 다른 옵션을 사용합니다.
전자인 2D드로잉 컨텍스트는 IE를 제외한 최근 웹브라우저에서 지원가능합니다. 후자인 3D드로잉 컨텍스트는 아직 표준화 작업중이며 손을 봐야 할 부분들이 남아있습니다.
좀더 폭넓게 지원되는 2D드로잉 컨텍스트에 대해서 살펴보자면, 2D 비트맵을 빠르게 드로잉 연산을 수행하기 위해 간단하고도 막강한 API들을 제공합니다. 파일포맷이 아니라 단지 스크립트를 이용하는 것입니다.
아래는 canvas를 이용한 드로잉 예제입니다.
소스다운로드 :
canvas.html
HTML5로 구현한 canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas animation example</title>
<script type="text/javascript">
<!--
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를 이용하여 이미지 히스토그램을 표현하고 계산하는 예제입니다.
사용자가 선택한 칼라값들(CMYKm HIV, RGB)에 따라 픽섹들이 카운트되고 분석됩니다. 오른쪽에 표시된 두번째 canvas태그에서는 각 픽셀에서 수집한 데이타를 바탕으로 이미지 히스토그램을 드로잉 합니다.
데꾸벅이 자주가는 canvas관련 사이트
이미지 히스토그램 소스 :
Canvas 3D Context는 어디에 적합한가?
보통 3D 컨텍스트는 개체들, 텍스쳐, 음영값들, 그리고 상업적 애니메이션에 사용됩니다. 쿼크(Quake)같은 3D 게임을 만들수도 있고 3D 모델링 툴들을 제작할 수도 있습니다. 웹브라우저는 하드웨어 가속기를 이용하여 장면들을 드로잉 합니다. 물론 가능하다는 전제하에 말이죠!!
SVG와 Canvas 비교
아래 표는 svg와 canvas를 사용했을때의 장점과 단점을 표기한 것입니다. 뭐, 물로 데꾸벅이 한게 아니라 오페라 개발자센터에서 한거지만요.. ㅡ.,ㅡ;
장점
| Canvas | SVG |
|
|
단점
| 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 |