我之前比较过 SVG 和 Canvas。 如果你正在它们之间做出选择，请阅读。 我想说它们之间的最大区别在于矢量（SVG）与光栅（Canvas）。 但是第二大区别在于你如何使用它们。 SVG 是声明性的，就像通过属性和内容来表达它们是什么的文字元素。 Canvas 是命令式的，就像你为它编写要遵循的指令一样。
Canvas 是一个 JavaScript API，因此它可能与 JavaScript 开发人员或 UI 构建基于 JavaScript 的环境配合良好。 但是 SVG 位于（并且拥有）DOM 中，并且 DOM 也具有 API！ 这意味着如果你愿意，你可以对 SVG 进行脚本化。 只是，可以说，不太方便。 我刚刚看到了 Graphery SVG，它显然是为了解决这个问题。
您如何使用标准 DOM API 编写创建粉红色矩形的脚本
const div = document.querySelector('#drawing');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
div.appendChild(svg);
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', '10');
rect.setAttribute('y', '10');
rect.setAttribute('width', '90');
rect.setAttribute('height', '90');
rect.setAttribute('fill', '#F06');
svg.appendChild(rect);使用 Graphery SVG
const svg = gySVG().width('100%').height('100%');
const rect = svg.add('rect').x(10).y(10).width(90).height(90).fill('#f06');
svg.attachTo('#drawing');必须喜欢这种链接。 向 jQuery 致敬。