SVG를 캔버스에 그리는 기본 원리
HTML5 캔버스(canvas)에 SVG를 직접 렌더링하려면 SVG를 하나의 이미지 객체로 다루어야 합니다. 기본적인 흐름은 다음과 같습니다.
- HTML 콘텐츠를 담을 수 있는
<foreignObject>요소를 사용해 SVG 마크업을 구성합니다. - SVG 문자열을
Blob객체로 만들어 이미지 소스(URL)로 변환합니다. - 이미지가 로드되면
drawImage()메서드를 통해 캔버스 위에 그립니다.
예제 코드
아래 전체 코드를 실행하면 HTML 캔버스 위에 SVG 파일(텍스트가 포함된 SVG)을 그릴 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>SVG file on HTML Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border:2px solid green;" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="https://www.w3.org/2000/svg" width="300"
height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="https://www.w3.org/1999/xhtml" style="font-size:50px">' +
'Simply Easy ' +
'<span style="color:blue;">' +
'Learning</span>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img1 = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);
img1.onload = function() {
ctx.drawImage(img1, 25, 70);
DOMURL.revokeObjectURL(url);
}
img1.src = url;
</script>
</body>
</html>코드 단계별 설명
- SVG 문자열 생성:
<foreignObject>안에 XHTML 네임스페이스를 가진<div>를 넣어 HTML 텍스트를 포함시킵니다. - Blob 변환: SVG 문자열을 MIME 타입
image/svg+xml인 Blob으로 감싸 실제 이미지 데이터처럼 취급합니다. - 객체 URL 생성:
createObjectURL()로 Blob을 가리키는 임시 URL을 만들어<img>의 소스로 지정합니다. - 캔버스 렌더링: 이미지 로드가 완료되는
onload시점에drawImage()로 좌표 (25, 70) 위치에 그린 뒤,revokeObjectURL()로 임시 URL을 해제해 메모리를 정리합니다.
실행 결과
코드를 실행하면 초록색 테두리의 캔버스 안에 "Simply Easy Learning"이라는 텍스트가 파란색 하이라이트와 함께 SVG 이미지로 출력됩니다.
