SVGé uma especificação de um desenho como um formato de arquivo. Um SVG é um documento. Você pode trocar arquivos SVG como arquivos HTML. Além disso, como os elementos SVG e HTML compartilham a mesma API DOM, é possível usar JavaScript para gerar um DOM SVG da mesma maneira que é possível criar um DOM HTML. Mas você não precisa de JavaScript para gerar o arquivo SVG. Um editor de texto simples é suficiente para escrever um SVG. Mas você precisa de pelo menos uma calculadora para calcular as coordenadas das formas no desenho.
CANVASé apenas uma área de desenho. É necessário usar JavaScript para gerar o conteúdo de uma tela. Você não pode trocar uma tela. Não é um documento. E os elementos da tela não fazem parte da árvore DOM. Você não pode usar a API DOM para manipular o conteúdo de uma tela. Em vez disso, você deve usar uma API de tela dedicada para desenhar formas na tela.
A vantagem de a SVGé que você pode trocar o desenho como um documento. A vantagem CANVASé que tem uma API JavaScript menos detalhada para gerar o conteúdo.
Aqui está um exemplo, que mostra que você pode obter resultados semelhantes, mas a maneira como fazê-lo em JavaScript é muito diferente.
// 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>
Como você pode ver, o resultado é quase o mesmo, mas o código JavaScript é completamente diferente.
O SVG é criado com a API DOM usando createElement, setAttributee appendChild. Todos os gráficos estão nas cadeias de atributos. SVG tem primitivas mais poderosas. O CANVAS, por exemplo, não tem nada equivalente ao caminho do arco SVG. O exemplo CANVAS tenta emular o arco SVG com uma curva de Bezier. Em SVG você pode reutilizar elementos para transformá-los. No CANVAS você não pode reaproveitar elementos. Em vez disso, você precisa escrever uma função JavaScript para chamá-la duas vezes. O SVG tem um viewBoxque permite usar coordenadas normalizadas, o que simplifica as rotações. No CANVAS, você deve calcular as coordenadas com base no clientWidtheclientHeight. E você pode estilizar todos os elementos SVG com CSS. No CANVAS você não pode estilizar nada com CSS. Como o SVG é um DOM, você pode atribuir manipuladores de eventos a todos os elementos SVG. Os elementos da CANVAS não têm DOM e nem manipuladores de eventos DOM.
Mas, por outro lado, o código CANVAS é muito mais fácil de ler. Você não precisa se preocupar com espaços de nomes XML. E você pode chamar diretamente as funções gráficas, porque você não precisa construir um DOM.
A lição é clara: se você quiser desenhar alguns gráficos rapidamente, use a tela CANVAS. Se você precisa compartilhar os gráficos, como estilizá-los com CSS ou deseja usar manipuladores de eventos DOM em seus gráficos, construa um SVG.