HTML의 <svg> 요소는 SVG 그래픽을 담는 컨테이너 역할을 합니다. SVG(Scalable Vector Graphics, 확장 가능한 벡터 그래픽)는 XML 기반으로 2D 그래픽과 그래픽 애플리케이션을 기술하는 언어로, 박스, 원, 텍스트 등 다양한 도형을 정의하는 데 활용됩니다. XML로 작성된 SVG 코드는 SVG 뷰어를 통해 렌더링되며, 대부분의 최신 웹 브라우저에서는 PNG, GIF, JPG 이미지처럼 SVG도 별도 플러그인 없이 바로 표시할 수 있습니다.
반면 HTML의 <canvas> 요소는 JavaScript를 통해 그래픽을 그리는 데 사용됩니다. 캔버스 자체는 그래픽을 담는 빈 컨테이너일 뿐이며, 실제 도형과 이미지는 스크립트로 그려야 합니다.
SVG와 HTML5 Canvas 주요 차이점
| SVG | HTML Canvas |
|---|---|
| 확장성(Scalability)이 뛰어나 어떤 해상도에서도 고품질로 인쇄할 수 있습니다. | 확장성이 떨어져 고해상도 인쇄에는 적합하지 않습니다. |
| 객체 수가 적거나 화면 영역이 넓은 경우 더 나은 성능을 보입니다. | 화면 영역이 작거나 객체 수가 많은 경우 더 나은 성능을 보입니다. |
| 스크립트뿐 아니라 CSS로도 수정하고 스타일링할 수 있습니다. | 오직 스크립트(JavaScript)를 통해서만 수정할 수 있습니다. |
| 벡터(Vector) 기반이며 도형(shape)으로 구성됩니다. | 래스터(Raster) 기반이며 픽셀(pixel)로 구성됩니다. |
SVG 예제
다음 코드를 실행하면 웹 페이지에 확장 가능한 벡터 그래픽(SVG)으로 파란색 원을 추가할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>HTML5 SVG</title>
</head>
<body>
<h2 align = "center">HTML5 SVG Circle</h2>
<svg id = "svgelem" height = "200" xmlns = "https://www.w3.org/2000/svg">
<circle id = "bluecircle" cx = "60" cy="60" r = "50" fill = "blue" />
</svg>
</body>
</html>HTML5 Canvas 예제
다음 코드를 실행하면 HTML5 Canvas를 사용해 초록색 사각형을 그리는 방법을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id = "newCanvas" width = "200" height = "100" style = "border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById('newCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#7cce2b';
ctx.fillRect(0,0,300,100);
</script>
</body>
</html>정리하면, 로고나 아이콘처럼 확대·축소가 잦은 그래픽에는 SVG가 적합하고, 게임이나 실시간 데이터 시각화처럼 많은 객체를 빠르게 다뤄야 하는 경우에는 Canvas가 유리합니다. 프로젝트의 특성에 맞게 두 기술을 선택하거나 함께 활용하는 것이 좋습니다.