SVG Backend

[awehring]

Have you ever considered to add a SVG Backend instead of Canvas painting?

As I see it, fabric.js has three main parts:

1. A user interface for drawing and altering shapes at the canvas
2. An object model of the shapes revealed by an API and events
3. A backend that renders the objects to the canvas

The first two features are very precious for developers and are the foundation for many applications.

The SVG standard for vector graphics has constantly improved over the last few years and it can directly implement most of the fabric.js objects now: Shapes (rect, circle, text, path, ...), groups, transformations, animations, masks, bitmap images, filters.
Browser support is almost universal. With one exception: Filters are quite erroneous in Safari.

I think it would be possible to render the fabric.js objects to SVG graphics instead of canvas paintings. The effort looks manageable. I tried it in a tiny example.
On top is the usual fabric.js canvas with some objects to manipulate - including an animated SVG-Graphic and an animated GIF (the horse).
Below are the corresponding SVG objects with copied properties.

:

Here you play it yourself and examine the (fairly simple) code: jsfiddle.

Pro

1. Best quality with any screen resolution
2. Animated objects (like animated PNG or GIF, works with current browser: Chrome, Firefox, Edge, Android Opera, Samsung mobile, Safari)
3. SVG-objects can be interactive (react to mouseclicks)
4. Additional flexible filters for all objects, e. g. 3D lighting (see below)
5. SVG import/export is a non-issue
6. "Native" group support
7. Replaces canvas rendering
8. Probably better performance with animations, scrolling, zooming
9. Almost universal browser support
10. Most existing SVG libraries are out of development since years
11. SVG can open up a new dimension for graphics: WOW

Cons

1. Filters don't work well in Safari
2. Some existing properties or functions might be difficult to implement

Further Considerations

• As the goup-function is currently redesigned, it might be worthwhile to make it SVG compatible.
• Filters can be used for any object and can be combined. Playground
• Filters can implement lighting:
  
  source

What do you think?

Updated March 39th, 2023: JSFiddel-Example

[ShaMan123]

I have been thinking of something similar for PDF.
Fabric abstracts over the abstract Canvas API.
All you need to do is to implement the Canvas API and there you go, fabric works on top of it. That is why fabric works in node using the node-canvas implementation of the Canvas API.
Take a look at https://github.com/gliffy/canvas2svg which implements the API for svg.
I am aiming to have the backend easily configured, but we have a long list of things before that.
If you want to workaround I would start at the toCanvasElement method of canvas. There you can export to whatever you like as long as it has some of the Canvas API (you can trace which, e.g. toDataURL).

[awehring]

Thank you for your suggestions!

I have no urgent needs for a SVG backend. It is just that I got more involved in SVG programming and became quite impressed by its abilities.

The fabric.js user interface (for creating and manipulating shapes) and the object model and events adds value. I’m not so sure if the rendering to canvas adds value or is more of a burden for the fabric.js developers. This burden could be much lighter, if the rendering is delegated to SVG.
SVG is a declarative language like HTML or CSS. The graphic is rendered by the browser to the window. To act as a fabric.js backend (or "renderer") you can often just set SVG attributes directly from the fabric.js object properties. My example in the opening post shows it.

[ShaMan123]

Fabric was built for SVG, sure.
Canvas has a lot of pros, it might be that for your use cases it isn't needed but fabric is meant for a variety of use cases.
The abstract API is the solution for all use cases.

[awehring]

Where do you see the benefits of Canvas?

Edit: the fabric.js API is outstanding - no question. I'm just not so sure with the Canvas rendering.

[ShaMan123]

Rendering images is a simple use case, editing videos
Adding HTML to fabric makes an SVG backend favorable

[awehring]

For those who do not know SVG well, here is an overview and some sources.

First of all, there is an excellent SVG tutorial from – you guessed it – Mozilla: MDN - SVG Tutorial.

SVG shapes
All fabric.js shapes exist in SVG as well and the properties match well with SVG attributes:

• Rectangle
• Circle
• Ellipse
• Line
• Polyline
• Polygon
• Path

Text
The SVG element has many attributes and you can directly load (Google-)fonts.
MDN - SVG Fonts
Stackoverflow - Google Fonts

Nice feature: <textPath> allows to align a text along an arbitrary path.

But W3C thinks, that SVG should be used for graphics and HTML elements like <texarea> for longer text. Therefor multiline text is not directly supported. But solutions (workarounds) exist:
O'Reilly - SVG Multiline Text Layout
The upcoming SVG standard 2.0 should make it easier.

Bitmap Images
With the SVG <image> element you can directly reference a bitmap image (JPG, etc.).
Update March 9th, 2023: Animated GIFs are possible too (tested with with current browser: Chrome, Firefox, Edge, Android Opera, Samsung mobile, Safari)

Decoration
The well known decorations for shapes and other objects are quite similar to use:

• Fills and Strokes
• Gradients
• Pattern

Grouping
SVG has a group tag <g> to combine elements to larger objects. A group has attributes to color, scale, transform, color, animate, etc. the members together. Group hierarchies are possible.
There are more advanced features like predefine or reference SVG elements.

Transformations
Are available too and it is even possible to transform a 2D shape in 3D space. As if it were cut out of incredibly thin—but incredibly sturdy—paper. It is based on CSS3 3D Transforms.
O'Reilly - SVG 3D Transformations

Animations
Any attribute of a SVG element can be animated, as well as attributes of transformations. Animations along a path are possible too.
MDN - SVG Animations
This SVG feature goes well above the possibilities within fabric.js. It would be an easy solution for the often demanded animated GIFs or APNG.
For simple cases there is an easy syntax for animating an attribute:
MDN - SVG <set>

Clipping / Masking
Clipping is easy and masking allows gradients for “soft clipping”. They can be animated too.
Dennis Gaebel - Clipping and Masking

Filter
Currently there are 17 filters available, like feBlend, feGaussianBlur, feConvolveMatrix , feDiffuseLigthing, feSpecularLighting. The lighting filters allow appealing effects on shapes.
All filters can be combined in complex filter chains and attached to single elements, groups, or the whole graphic.
MDN - Filter Effects

Interactivity
Hyperlink: Every SVG shape or text can carry an URL. The usage is very similar to HTML’s <a> element.
Events: An event handler can be attached to any SVG Element, just as to a HTML element.

The interactivity can be very helpful for user interactions if it is exposed in the fabric.js API.

[awehring]

Updated the opening post with this more complete example:

On top is the usual fabric.js canvas with some objects to manipulate - including an animated SVG-Graphic and an animated GIF (the horse).
Below are the corresponding SVG objects with copied properties.

Here you play it yourself and examine the (fairly simple) code: jsfiddle.

[iocoker]

It will be very nice if users can opt to choose what rendering engine to use, of course like in https://zzz.dog, it renders to either canvas or SVG. But of course, this won't be an immediate need, perhaps just a wish at this moment.

This is their comparison:

Canvas is better for lots of shapes and smaller image sizes. Canvas renders on a flat image, so it doesn't have to manage a DOM. But its rendered with pixels, so it can be slower with larger sizes — particularly with high-resolution screens.

SVG is better for fewer shapes and larger image sizes. SVG is a vector format, so its resolution independent, perfect for large image sizes. However, all shapes have to be rendered and sorted with individual DOM elements, which can negatively impact performance and get your fan spinning.

[ShaMan123]

I have a POC for exporting to any kind of canvas. We don't care about that since fabric abstracts over the canvas API so whatever respects that is fine.
Also we have a dom of overselves so to speak