SVG - это спецификация чертежа, подобного формату файла. SVG - это документ. Вы можете обмениваться файлами SVG, такими как файлы HTML. Кроме того, поскольку элементы SVG и элементы HTML используют один и тот же API-интерфейс DOM, можно использовать JavaScript для создания SVG-DOM таким же образом, как и для создания HTML-DOM. Но вам не нужен JavaScript для генерации файла SVG. Для написания SVG достаточно простого текстового редактора. Но вам нужен хотя бы калькулятор для расчета координат фигур на чертеже.
CANVAS это просто область рисования. Для генерации содержимого холста необходимо использовать JavaScript. Вы не можете обменять холст. Это не документ. И элементы canvas не являются частью дерева DOM. Вы не можете использовать DOM API для управления содержимым холста. Вместо этого вам нужно использовать специальный API Canvas для рисования фигур на холсте.
Преимущество 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 пытается эмулировать дугу SVG с кривой Безье. В SVG вы можете повторно использовать элементы для их преобразования. В холсте вы не можете повторно использовать элементы. Вместо этого вам нужно написать функцию JavaScript, чтобы вызвать ее дважды. SVG имеет viewBox, что позволяет использовать нормализованные координаты, что упрощает вращение. В ХОЛСТЕ вы должны рассчитать координаты самостоятельно, основываясь на clientWidth и clientHeight. И вы можете стилизовать все элементы SVG с помощью CSS. В холсте вы ничего не можете стилизовать с помощью CSS. Поскольку SVG является DOM, вы можете назначить обработчики событий для всех элементов SVG. Элементы в CANVAS не имеют ни DOM, ни обработчиков событий DOM.
Но, с другой стороны, код CANVAS гораздо легче читать. Вам не нужно заботиться о пространствах имен XML. И вы можете напрямую вызывать графические функции, потому что вам не нужно создавать DOM.
Урок понятен: если вы хотите быстро нарисовать графику, используйте CANVAS. Если вам нужно поделиться графикой, например, стилизовать ее с помощью CSS или использовать обработчики событий DOM в своей графике, создайте SVG.