我非常有兴趣在浏览器中探索图形用户界面。我非常喜欢使用.SVG文件，原因是它们可伸缩性强，并且可以轻松地在诸如Illustrator之类的程序中制作。另一个我喜欢的东西是，在许多库（如Snap.svg）中，可以选择单个图层（例如更复杂形状的圆形路径）。
然而，我也经常使用粒子并有许多对象需要绘制。因为我做的事情对音乐有反应，所以我需要绝对最快的库（以保持高FPS计数和许多对象）。
经过查看webGL、SVG和Canvas，我可以看出webGL显然是绘制图片等物品的最快方法，但我没有看到任何能够使用webGL并访问与本机SVG库具有相同路径信息的库。
有人能向我解释一下“本机”SVG库和使用Canvas元素（如paper.js fabric.js）的库以及“SVG解析器”之间的区别吗？（我甚至不知道什么是SVG解析器）。
似乎这些库会将项目绘制到画布上，这会将它们转换为光栅图像（失去了SVG的可伸缩性和分辨率独立性），我不确定SVG的单个图层/路径是否仍然可以被选择（就像在Snap等库中一样）。
我也很想知道为什么没有基于webGL的SVG库。
谢谢
以下是一个快速概述（免责声明：我是Fabric.js的作者）
Raphael.js、Bonsai.js、svg.js、Snap.svg等使用 SVG作为底层技术来渲染图形。这是矢量图形。它们既是抽象，也是“入口”，使您能够执行类似于这样的操作（来自Bonsai的示例）：
var shape1 = new Rect(10,10,100,100).attr({fillColor: 'red'});
var group = new Group();
group.addChild(shape1);
stage.addChild(group);
并获得这个：
<svg data-bs-id="0" width="796" height="796" class=" bs-1416663517803-1" viewBox="-0.5 -0.5 796 796">
<defs></defs>
<g data-bs-id="1087">
<g data-bs-id="1089">
<path data-bs-id="1088" d="M 0 0 l 100 0 l 0 100 l -100 0 Z"
fill="rgba(255,0,0,1)"
data-stroke="rgba(0,0,0,1)"
transform="matrix(1,0,0,1,10,10)"
stroke-width="0"
stroke-dashoffset="0"></path>
</g>
</g>
</svg>
这将转化为：
Fabric.js、Paper.js、Kinetic.js等。
它们使用画布作为底层技术来渲染图形。这是光栅图形。它们也是抽象和"网关"，使您能够执行类似于以下内容的操作（来自Fabric的示例）：
var rect = new fabric.Rect({
left: 100,
top: 100,
width: 100,
height: 100,
fill: 'red'
});
canvas.add(rect);
<canvas>元素。其他所有内容都是用类似于以下的（更低级别的）代码在内部表示的：var canvasEl = document.getElementById('c');
var ctx = canvasEl.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);
Fabric.js、canvg等是Canvas库的一部分，但支持解析SVG。这意味着库能够处理以下类似的SVG代码：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="700" xml:space="preserve">
<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
</svg>
Three.js、Babylon.js、c3DL、Pixi.js等。
这些是Canvas库的超集（基于<canvas>，而不是SVG），它们使用WebGL渲染上下文而不是“2d”上下文：
// webgl canvas libraries
canvas.getContext('webgl');
// non-webgl canvas libraries
canvas.getContext('2d');