SVG파일 형식과 같은 도면의 사양입니다. SVG는 문서입니다. HTML 파일과 같은 SVG 파일을 교환 할 수 있습니다. 또한 SVG 요소와 HTML 요소가 동일한 DOM API를 공유하기 때문에 JavaScript를 사용하여 HTML DOM을 생성하는 것과 동일한 방식으로 SVG DOM을 생성 할 수 있습니다. 그러나 SVG 파일을 생성하기 위해 JavaScript가 필요하지 않습니다. 간단한 텍스트 편집기만으로도 SVG를 작성할 수 있습니다. 그러나 도면에서 도형의 좌표를 계산하려면 최소한 계산기가 필요합니다.
CANVAS그냥 그리기 영역입니다. 캔버스의 내용을 생성하려면 JavaScript를 사용해야합니다. 캔버스를 교환 할 수 없습니다. 문서가 아닙니다. 그리고 캔버스의 요소는 DOM 트리의 일부가 아닙니다. DOM API를 사용하여 캔버스의 내용을 조작 할 수 없습니다. 대신 전용 캔버스 API를 사용하여 캔버스에 모양을 그려야합니다.
의 장점은 SVG도면을 문서로 교환 할 수 있다는 것입니다. 의 장점은 CANVAS내용을 생성하는 데 덜 장황한 JavaScript API가 있다는 것입니다.
다음은 유사한 결과를 얻을 수 있음을 보여주는 예입니다.하지만 JavaScript에서 수행하는 방법은 매우 다릅니다.
// Italic S in SVG
(function () {
const ns='http://www.w3.org/2000/svg';
let s = document.querySelector('svg');
let p = document.createElementNS (ns, 'path');
p.setAttribute ('id', 'arc');
p.setAttribute ('d', 'M 0.9 -0.9 a 0.8,0.4 -10 0,0 -0.9,0.9');
s.appendChild (p);
let u = document.createElementNS (ns, 'use');
u.setAttribute ('href', '#arc');
u.setAttribute ('transform', 'rotate(180)');
s.appendChild (u);
})();
// Italic S in CANVAS
(function () {
let c = document.querySelector('canvas');
let w = c.width = c.clientWidth;
let h = c.height = c.clientHeight;
let x = c.getContext('2d');
x.lineWidth = 0.05 * w;
x.moveTo (w/2, h/2);
x.bezierCurveTo (w*0.02, h*0.4,
w*0.4, -h*0.02,
w*0.95, h*0.05);
x.moveTo (w/2, h/2);
x.bezierCurveTo (w*(1-0.02), h*(1-0.4),
w*(1-0.4), h*(1+0.02),
w*(1-0.95), h*(1-0.05));
x.stroke();
})();
svg, canvas {
width: 3em;
height: 3em;
}
svg {
vertical-align: text-top;
stroke: black;
stroke-width: 0.1;
fill: none;
}
canvas {
vertical-align: text-bottom;
}
div {
float: left;
}
<div><svg viewBox="-1 -1 2 2"></svg>VG</div>
<div>CANVA<canvas></canvas></div>
보시다시피 결과는 거의 동일하지만 JavaScript 코드는 완전히 다릅니다.
SVG는 사용하여 DOM API를 사용하여 생성 createElement, setAttribute및 appendChild. 모든 그래픽은 속성 문자열에 있습니다. SVG에는 더 강력한 기본 요소가 있습니다. 예를 들어 CANVAS에는 SVG 아크 경로와 동일한 것이 없습니다. CANVAS 예제는 Bezier 곡선으로 SVG 호를 에뮬레이션하려고합니다. SVG에서는 변형을 위해 요소를 재사용 할 수 있습니다. CANVAS에서는 요소를 재사용 할 수 없습니다. 대신 두 번 호출하려면 JavaScript 함수를 작성해야합니다. SVG에는 viewBox정규화 된 좌표를 사용하여 회전을 단순화하는가 있습니다. 캔버스에서 당신은 자신의 기준으로 좌표를 계산해야 clientWidth하고clientHeight. 그리고 CSS로 모든 SVG 요소의 스타일을 지정할 수 있습니다. CANVAS에서는 CSS로 스타일을 지정할 수 없습니다. SVG는 DOM이므로 모든 SVG 요소에 이벤트 핸들러를 할당 할 수 있습니다. CANVAS의 요소에는 DOM과 DOM 이벤트 핸들러가 없습니다.
그러나 반면에 CANVAS 코드는 훨씬 읽기 쉽습니다. XML 네임 스페이스는 신경 쓸 필요가 없습니다. 그리고 DOM을 빌드 할 필요가 없기 때문에 그래픽 함수를 직접 호출 할 수 있습니다.
교훈은 분명합니다. 그래픽을 빠르게 그리려면 CANVAS를 사용하십시오. CSS로 스타일을 지정하거나 그래픽에서 DOM 이벤트 핸들러를 사용하려는 등 그래픽을 공유해야하는 경우 SVG를 빌드하십시오.