Javascript 画布库处理SVG的方式与SVG库处理SVG的方式有什么区别？

我对在浏览器中探索图形用户界面非常感兴趣。我非常喜欢.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的作者）

SVG库 Raphael.js、Bonsai.js、svg.js、Snap.svg等

它们用作渲染图形的底层技术。这是矢量图形。它们都是抽象和“网关”，允许您执行类似的操作（来自盆景的示例）：

得到这个：

<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>

它是这样呈现的：

var canvasEl = document.getElementById('c');    
var ctx = canvasEl.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);

<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>

由于这些库是基于画布的，文档将只包含

元素。其他所有内容都在内部用（较低级别）代码表示，如下所示：

var canvasEl = document.getElementById('c');    
var ctx = canvasEl.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);

<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>

使用SVG解析的画布库 Fabric.js、canvg等

这些是画布库的一个子集，但支持解析SVG。这意味着库可以像这样接受SVG：

var canvasEl = document.getElementById('c');    
var ctx = canvasEl.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);

<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>

与非WebGL画布库相比，WebGL画布库使用完全不同的API通过画布绘制图形。它们通常还支持“2d”上下文，作为一种后备方案

WebGL 2d与3d WebGL库也可以分为2d和3d，即专门用于2d或3d输出的库。最流行的3d webgl库示例是Three.js和2d-Pixi.js

---

作为补充说明，一旦我们在Fabric.js中添加对WebGL渲染器的支持，该库将从“支持SVG的画布库”变为“支持SVG的WebGL画布库”：）

画布根本不处理SVG。这是一个基于光栅的绘图表面；一旦数据被绘制在上面，就是这样，它现在就是像素了。WebGL是画布可以使用的模式之一-对于二维光栅图形，有Canvas2D API，对于三维光栅图形，有WebGL。对，但是像paper.js和fabric.js这样的库使用SVG，并且能够解析它，大概是有人将SVG转换为画布像素？paper.js使用画布绘制，但可以跟踪形状，它可以从SVG输入中构建，并且知道如何序列化回SVG输出。因此，特定库处理它的方式是，它需要SVG->转换为像素->在画布中绘制（显示），但序列化回SVG输出是什么意思？为什么有人要编写WebGL SVG库？每个支持WebGL的浏览器都已经支持SVG了。接下来，我要说的是：（顺便说一句，非常详细）Snap.SVG的一个优点是，您可以从.SVG文件中选择路径（或对象）。如中所示，如果我有一个带红色圆圈的绿色矩形（单独的路径），我可以选择该圆圈并根据其id属性对其进行操作。我可以看到Fabric也有这种能力，尽管我不确定其他的（比如Paper.js）。天哪，这是一个多么棒的库啊。@kangax你有时间在Fabric.js上添加WebGL吗？-我已经是Paper.js的粉丝好几年了，我非常想看看在这样一个库中添加WebGL后端时会发生什么——性能一直是画布包装中几乎所有东西的巨大破坏者。现在还没有：（要做的事情太多，时间太少。我们现在专注于bug、架构改进、测试和与文本相关的功能——我们是唯一一个在画布上提供如此广泛（交互式）文本支持的库。WebGL仍在计划中；我只是不确定我们什么时候能做到这一点，但希望今年能做到。当然，任何帮助都是非常受欢迎的！）