What is the difference between how Canvas libraries handle SVG and SVG libraries, handle SVG?

Question

I am very interested in learning graphical user interfaces in a browser. I really like .SVG files for many reasons, they are mostly scalable and can be easily created in programs like Illustrator. Another thing that I like is that in many libraries (such as Snap.svg) individual layers can be selected (for example, only a circle path of a more complex shape).

However, I also often use particles and have many objects for drawing. Since I do what responds to music, I need the absolute fastest library (to maintain a high number of FPS with many objects).

Looking at webGL and SVG and the canvas, I can see that webGL is obviously the fastest for drawing things like pictures, but I don’t see libraries that can use webGL and access the same path information as my relatives svg libraries.

Can someone explain to me what the difference is between native svg libraries and libraries that use the canvas element (like paper.js fabric.js) with svg parsers? (I don’t even know what an svg parser is).

It seems that the libraries somehow drew elements on the canvas, which I suppose will turn them into raster ones (losing scalability and independence of svgs permission), and I'm not sure that separate svgs layers / paths can still (since they may be in libraries like Snap).

I would also be interested to know why there are no webGL-based svg libraries.

thanks

Answer 1

Here's a quick crash (disclaimer: I'm the author of Fabric.js)

SVG libraries

Raphael.js, Bonsai.js, svg.js, Snap.svg, etc.

They use SVG as the underlying technology for rendering graphics. This is a vector graphic . They are abstractions and gateways that allow you to do something like this (example from Bonsai):

var shape1 = new Rect(10,10,100,100).attr({fillColor: 'red'}); var group = new Group(); group.addChild(shape1); stage.addChild(group); 

and get the following:

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

which, in turn, is as follows:

These libraries allow you to work with SVG nodes, attributes, and values ​​indirectly through a higher-level abstraction.

Canvas libraries

Fabric.js, Paper.js, Kinetic.js, etc.

They use canvas as the underlying technology for rendering graphics. This is a raster graphic . They are also abstractions and gateways that allow you to do something like this (an example from Fabric):

 var rect = new fabric.Rect({ left: 100, top: 100, width: 100, height: 100, fill: 'red' }); canvas.add(rect); 

and do it like this:

Since these libraries are canvas-based, there will only be a <canvas> element in the document. Everything else is represented by internal code (lower level) as follows:

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

SVG parsing canvas libraries

Fabric.js, canvg etc.

This is a subset of the Canvas libraries, but with support for SVG parsing . This means that the library can take SVG as follows:

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

And do this:

This is essentially an SVG -> canvas transform. And this is also a vector -> pseudo-raster transform. The reason this is a pseudo-raster is because there is no loss of quality (at least in the case of Fabric). When converting a vector SVG Fabric creates a virtual and non-raster object from it, and this object can be displayed in any size, angle, position, etc. Without loss of quality. It can even be exported back to SVG. Only when rendering on canvas, then it becomes raster graphics.

WebGL Libraries

Three.js, Babylon.js, c3DL, Pixi.js, etc.

This is a superset of Canvas libraries (based on <canvas> rather than SVG) that use the WebGL rendering context, rather than the "2d" context:

 // webgl canvas libraries canvas.getContext('webgl'); // non-webgl canvas libraries canvas.getContext('2d'); 

WebGL canvas libraries use a completely different API for drawing graphics using a canvas compared to canvas libraries other than WebGL. They also often maintain the "2d" context as a fallback scenario.

Webgl 2d vs 3d

WebGL libraries can also be divided into categories 2d and 3d - those that specialize in 2d or 3d pins. The most popular webgl 3d library example: Three.js and 2d - Pixi.js.

As an additional note, as soon as we add support for the WebGL visualization tool to Fabric.js, the library will switch from the "SVG-enabled canvas library" to the "webgl-canvas library with SVG support" :)