I evaluate Fabric.js as an alternative to Raphael.js for creating interactive renderings compatible with IE8, which does not support SVG or canvas (unfortunately, support for IE8 is not negotiable).
Raphael can be created to work with the D3.js visualization library - which outputs SVG and is incompatible with IE8 - through the D34Raphael bridge library , a D3 plug adapted for use with Raphael. D34Raphael adapts some (but not all) D3 functions for output to abstract Raphael objects instead of the DOM, so Raphael can interpret D3 output as VML in IE8.
(edit Feb 2014 - D34Raphael seems to be already dead now, but there is a surprisingly named alternative R2D3 which seems to be in active development)
The fabric can render Canvas on IE8 (using excanvas to convert to VML) and can convert SVGs to interactive Canvas elements. Thus, it is theoretically possible that Fabric could replace Raphael with the D3 and IE8 bridge. This will provide additional flexibility while also supporting the functionality of Canvas as well as SVG.
I did not find the Fabric equivalent for D34Raphael - the closest I can find is a demo page that does not work in IE8,
From what I saw in the Fabric docs, it looks like D34Raphael could be tried for Fabric: it supports converting SVG contours, circles, polygons, polylines, ellipses, rectangles, lines and image elements and works with abstract objects that provide continuous interactivity. Tests comparing the effectiveness of vector paths of material processing compared to Raphael processing the same ones are impressive (although comparative tests that include interaction or animation are not indicated).
A few typical D3 projects as examples:
I am sure that I am not the first to look into this. I don’t really like the idea of starting an attempt to implement something like this, only to find there some inevitable problem that anyone who has experienced more with Fabric, Canvas and / or D3 from the very beginning could encounter.
- Are there any existing projects that allow D3 output using fabric.js, similar to D34Raphael?
- Is there something about how D3 works with SVG, which simply cannot be passed through Fabric SVG to convert Canvas and object model?
- Is there an easier way to push D3 through Fabric than the D34Raphael approach to mark up a D3 project and adapt its output?
What I tried: Some problems that I have already addressed:
- The fabric will have a similar problem, since the D34Raphael is very limited in its ability to adapt the D3 DOM tools for queries (since it works with abstract objects, not with DOM elements), but this is something that you can work with a well-organized object structure.
- Both Raphael and Fabric use VML in IE8, but with different engines, so there may be differences in what features Raphael and Fabric managed to implement in VML. In my testing, both still have poor performance with animation and interactivity in IE8, but the features seem comparable, and Fabric seems to be much better than Raphael for rendering VML text in IE8 .
- The performance of fabric with shapes converted from SVG seems great, and it seems like D3-based redraws, interactivity, and animations should be smooth as they require similar processes for the initial draw (but there might be something I’m talking about did not think here).
- Fabric groups seem to be more like their own SVG groups that D3 works with than Raphael sets (but I might have missed something).