HTML
HTML
| SVG | HTML 캔버스 |
|---|---|
| SVG는 확장성이 더 좋습니다. 따라서 어떤 해상도에서도 고품질로 인쇄할 수 있습니다. | 캔버스는 확장성이 좋지 않습니다. 따라서 고해상도로 인쇄하는 데 적합하지 않습니다. |
| SVG는 더 적은 수의 개체 또는 더 큰 표면에서 더 나은 성능을 제공합니다. | 캔버스는 표면이 작거나 개체 수가 많을 때 더 나은 성능을 제공합니다. |
| SVG는 스크립트 및 CSS를 통해 수정할 수 있습니다. | 캔버스는 스크립트를 통해서만 수정할 수 있습니다. |
| SVG는 벡터 기반이며 모양으로 구성됩니다. | Canvas는 래스터 기반이며 픽셀로 구성됩니다. |
예시
다음 코드를 실행하여 웹 페이지에 SVG(Scalable Vector Graphics)를 추가할 수 있습니다. −
<!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로 직사각형을 그리는 방법을 배우기 위해 다음 코드를 실행할 수 있습니다 -
<!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>